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

text

<p>this other p</p>

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