定义

传统的块级元素定义中只是说明了在文档流中形成了一个块，在前后加换行，这里有些笼统。 其实框元素是指宏观上的框元素，它包括3种类型：1.本身就是块级元素 2.dispaly被设置为类block 3.由于某些元素的包含关系迫使其形成块级元素。前2类比较容易理解，第3类稍后举例时候回说明。

而，行内元素也是指宏观上的行内元素，分类和上面一样。

注意，以上块级元素和行内元素都没有在table中，如果加入table会产生很多匿名块级元素或者匿名行内元素，更何况现在布局已经很少有table了。

例子

1、对于块级元素，前2类就不必举例了，属于正常情况，那么第三类具体是什么情况呢？

　　1）块级元素的所有子元素都是块级元素

     
    
      
this is p1
    
      
this is p2
    
      
       this is section
      
  
     

那么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;}  
    some    this is em    this is span    text  

上面的some和this isem显示在一行，thisis span和text各占一行。如果 一个行内

2、行内元素也只说明第三种情况

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

    some    em    text  

 

上面代码中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