对p标签嵌套块级元素的思考

wuxy720

浏览: 29106 次
性别:
来自: 长春

最近访客更多访客>>

里昂工作室

ph7.3

悲伤向右

ayufish

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

今天在准备给学弟学妹讲css的子选择器时，列了一个简单的小demo，结果却发现了问题

<p class="maindiv">
        我是父元素
        <p>
            子元素
            <p>
                孙子元素
            </p>
        </p>
   </p>

当用p的时候

会发生无法包裹子元素，而使用div时候却可以

    <div class="maindiv">
        我是父元素
        <div>
            子元素
            <div>
                孙子元素
            </div>
        </div>
    </div>

通过上网的查询和学习，发现原来p元素内无法包裹块级元素。

因为我们使用的DTD中规定了块级元素是不能放在<p>里面的，再加上一些浏览器纵容这样的写法：

<p>这是一个段落的开始

<p>这是另一个段落的开始

当一个<p>签还没结束时，遇到下一个块元素就会把自己结束掉，其实浏览器是把它们处理成这样：

<p>这是一个段落的开始</p>

<p>这是另一个段落的开始</p>

这也就解释了，为何firebug中最后会多出2个空的<p></p>。

很多浏览器把<body>视为一级，一部分块级元素二级，而有一部分不能自由嵌套的块级元素则被视为三级

，它们包括有：标题标记的<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<caption>；段落标记的<p>；分隔线<hr>和一个特别的元素<dt>(它只存在于列表元素<dl>的子一级)。

三级元素就是指，只能嵌套内联元素的块级元素。p也恰好是其中之一。其实在内联元素中，还是可以再区分一下的，有几个元素（<img>、<input>等）比较特别，它们可以定义宽高。虽然在IE 浏览器里，所有的元素都可以定义宽高，但这是IE自己的标准，并非所有浏览器都支持，W3C称它们为replaced元素，其实它们也就是我们常说的行内块，虽然这些元素属于inline，但是却具有一定的block（可以设置宽高），我们也可以赋予任何元素css属性display:inline-block。本身具有inline-block的元素应该没有！