标签:
传统的块级元素定义中只是说明了在文档流中形成了一个块,在前后加换行,这里有些笼统。 其实框元素是指宏观上的框元素,它包括3种类型:1.本身就是块级元素 2.dispaly被设置为类block 3.由于某些元素的包含关系迫使其形成块级元素。前2类比较容易理解,第3类稍后举例时候回说明。
而,行内元素也是指宏观上的行内元素,分类和上面一样。
注意,以上块级元素和行内元素都没有在table中,如果加入table会产生很多匿名块级元素或者匿名行内元素,更何况现在布局已经很少有table了。
1、对于块级元素,前2类就不必举例了,属于正常情况,那么第三类具体是什么情况呢?
1)块级元素的所有子元素都是块级元素
<div> <p>this is p1</p> <p>this is p2</p> <section>this is section</section> </div>
那么div下面的p和section都各自占一行。正常显示。
2)块级元素里面包含块级元素和匿名文本
<div>
some
<p>this is p</p>
text
<p>this other p</p>
<span>this is span</span>
other text
</div>
按照官方说法,“if a block container box (such as that generated for the DIV above) has a block-level box inside it (such as the P above), then we force it to have only block-level boxes inside it.” 然而事实上并不是如此,只有在块级块周围的匿名文本元素才会产生块级效果,如上面的some和text显示为块级元素,二other text显示为行内元素。
3)行内元素包含块级
p{ display:inline; } span{ display:block; } <p> some <em>this is em</em> <span>this is span</span> text </p>
上面的some和this isem显示在一行,thisis span和text各占一行。如果 一个行内
2、行内元素也只说明第三种情况
参考:http://www.w3.org/TR/CSS21/visuren.html#containing-block
标签:
原文地址:http://www.cnblogs.com/bdbk/p/4987174.html