HTML中的行内元素和框元素详解

定义

传统的块级元素定义中只是说明了在文档流中形成了一个块，在前后加换行，这里有些笼统。其实框元素是指宏观上的框元素，它包括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、行内元素也只说明第三种情况

　　块级元素内包含行内元素和匿名文本

 <p>
    some
    <em>em</em>
    text
  </p>

上面代码中some em text 显示在一行，这也就是匿名文本在行内元素周围显示为行内元素的效果，并且，这些匿名行内元素会继承他父级块元素的属性。这里特别说明一点，“white-space”属性不会产生任何匿名的行内元素。

总结

行内元素和块元素的定义对于布局有较大的影响，还有一个特殊的块级元素li，这个元素不仅产生主框，还会多出一个额外的序列编号，这2个是行内元素，但是整体显示为一个块级元素，可以更具list-type-style和list-style-position来确定mark box的位置。

参考：http://www.w3.org/TR/CSS21/visuren.html#containing-block