<p><div></div></p> 与 <div><p></p></div> 样式引用问题

最近在复习web前端开发,在实践的时候,发现了一个问题

1. 标签 p 中包含标签 div 时,样式p .div1无法起到效果,如下:

<p><div class="div1">为什么这个没效果</div></p>

p .div1{
width:150px;
height:150px;
background:blue;}

2. 标签 div 包含标签 p 时,样式div .p1可以起到效果,如下:

<div><p class="p1">效果2</p></div>

div .p1{
  width:100px;
  height:100px;
  background:green;

}

一直弄不明白是什么情况下导致的这种结果,后来,w3cfuns上的朋友帮忙解答了这个问题,科普了很详细,非常感谢这位朋友

现在把这位朋友的解答给粘贴过来,也是为了方便以后的复习

一、HTML 标签包括 块级元素(block)、内嵌元素(inline)

  1、块级元素

  一般用来搭建网站架构、布局、承载内容……它包括以下这些标签:

  address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

  2、内嵌元素

  一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素:

  a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var

  二、HTML 标签的嵌套规则

  1. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素:

  <div><h1></h1><p></p></div> —— 对

  <a href=”#”><span></span></a> —— 对

  <span><div></div></span> —— 错

  2. 块级元素不能放在<p>里面:

  <p><ol><li></li></ol></p> —— 错

  <p><div></div></p> —— 错

  3. 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是:

  h1、h2、h3、h4、h5、h6、p、dt

  4. li 内可以包含 div 标签 —— 这一条其实不必单独列出来的,但是网上许多人对此有些疑惑,就在这里略加说明:

  li 和 div 标 签都是装载内容的容器,地位平等,没有级别之分(例如:h1、h2 这样森严的等级制度^_^),要知道,li 标签连它的父级 ul 或者是 ol 都 可以容纳的,为什么有人会觉得 li 偏偏容纳不下一个 div 呢?别把 li 看得那么小气嘛,别看 li 长得挺瘦小,其实 li 的胸襟很大 滴……

  5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列:

  <div><h2></h2><p></p></div> —— 对

  <div><a href=”#”></a><span></span></div> —— 对

  <div><h2></h2><span></span></div> —— 错

时间: 2024-10-27 13:17:02

<p><div></div></p> 与 <div><p></p></div> 样式引用问题的相关文章

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致

文字在div中垂直居中的方法,设置div的高度height和行高line-height一致,如 .containerdiv{ height:60px; line-height:60px; }

DIV设置浮动float以后下一个DIV要换行的方法

<div style=“float:left;”> 1111111 </div> <div style=“float:left;”>222222 </div> <div >33333333</div> 1111111 和222222  在同一行,接下来的33333333虽然没有float:left的属性,但是也会在同一行, 要想让33333333不在同一行怎么办呢,答案很简单就是加入clear:both; <div style=

DIV+CSS专题:十天学会DIV+CSS

DIV+CSS专题:十天学会DIV+CSS,在网上看到的.感觉蛮好,推荐一下. 十天学会DIV+CSS(WEB标准)CHM格式文件下载 第十天 div+css网页标准布局实例教程(三) 第十天 div+css网页标准布局实例教程(二) 第十天 div+css网页标准布局实例教程(一) 第九天 CSS表单设计 第八天 下拉及多级弹出菜单 第七天 横向导航菜单 第六天 html列表 第五天 超链接伪类 第四天 纵向导航菜单及二级弹出菜单 第三天 二列和三列布局 第二天 一列布局 第一天 XHTML

子DIV浮动(float)后父DIV高度自动失效解决方案

高度的自适应(父div高度随子div的高度改变而改变): 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变. 2.如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,如父div设置height:50px 如下所示,子元素div 本身具有高度和宽度,但由于其具有float:left属性后,其父元素div不具有高度. <html> <head&

jquery判断一个div的边界是否超出另外一个div的边界

摘要:本文简单介绍jquery判断一个div的边界是否超出另外一个div的边界,如果超出边界做出相应的处理. 1.实现效果 判断前 判断后 2.实现思路 实现类似的判断,主要是获取两个div在浏览器中的上下左右的四至,在jquery中,可以通过div.offset().left和div.offset().top获取div在浏览器中的绝对位置的left和top值:div在浏览器中的绝对位置的right和bottom为div的left+width和top+height,width和height可以通

使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式

text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height: 200px; /*设置文字行距等于div的高度*/ o

div中放入一个img元素导致div高度会多出几个像素

在写代码的时候经常遇到这样一个问题,如果div里嵌套一个img元素且div的高度是由img的高度来撑开,那么div的高度总会比img的高度多3px.好了,废话不多说,直接给大家上代码. html代码: <div id = "header"> <img src="img/header.png"/> </div> css代码: #header{ width : 400px ; border : 1px solid #000 ; /*

实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现三个div,固定左右两边的div宽为200,中间的div宽度自适应的四种方法</title> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; padding:

原生DIV,控制两个DIV显示隐藏切换,且切换后样式形状不乱

功能:做项目时候经常需要设置两个DIV显示或者隐藏,切换显示,并且保证之前设置的样式不乱: 实现: 保证样式不乱的方法是:先进行有关数据渲染的操作,最后再执行隐藏和显示的操作,这样数据已经填充好了,样式就不会乱了. 一.方式1:隐藏后仍占有页面空间,显示空白 div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白 style="visibility: none;"document.getElementById("typediv1").styl