CSS的Inline、Block属性
浏览器在布局时，会遵守下面两个原则：
Inline元素的孩子必须都是Inline元素。
Block元素的孩子要么都是Block，要么都是Inline。
示例一：代码“Children of Block Flows Test”：block包含了inline和block。
示例“Children of Block Flows Test”的div元素里面包含了文本(inline)、span(inline)、a(inline)、div(block)。
浏览器在渲染的时候会把前面三个连续的inline元素包含在一个匿名block里面。这样可以保证div里面的所有元素都是block元素。
其结果如下：
******Children of Block Flows Test（浏览器渲染模型）*******
</p>
<div>
<anonymous block>
final div.text1
<span> final div.span</span>
<a href="http://www.google.com">Google ME</a>
</anonymous block>
<div>
final div.div1
</div>
final div.text2
<div>
final div.div2
</div>
</div>
<p>
示例二：代码“Children of Inline Flows Test”：Inline包含了Inline和Block。
浏览器会在顶层Inline元素之外封装一个匿名Block：
******Children of Inline Flows Test（浏览器渲染模型）*******
<anonymous pre block>
<i>Italic only <b>italic and bold</b></i>
</anonymous pre block>
<anonymous middle block>
<div>
Wow, a block!
</div>
<div>
Wow, another block!
</div>
</anonymous middle block>
<anonymous post block>
<i><b>More italic and bold text</b> More italic text</i>
</anonymous post block>
完整代码如下：
| <html> | |
| <head> | |
| </head> | |
| <body> | |
| <style> | |
| div,span{background-color:green;margin:5px;border:1px solid #333;padding:5px;color:#fff;} | |
| a{background-color:green;color:#fff;} | |
| .b{display:block;} | |
| .i{display:inline;} | |
| div.i{display:inline;} | |
| div.ib{display:inline-block;} | |
| a.ib{display:inline-block;} | |
| a.b{display:block;} | |
| </style> | |
| <p> | |
| ******inline,block Test******* | |
| </p> | |
| <div> | |
| div display:block | |
| </div> | |
| <div class="i"> | |
| div display:inline | |
| </div> | |
| <div class="ib"> | |
| div display:inline-block | |
| </div> | |
| <span>span display:inline</span> | |
| <span class="b">span display:block</span> | |
| <span><a class="b"> span.a display:block</a></span> | |
| <span><a class="ib"> span.a display:inline:block</a></span> | |
| <br /> | |
| <p> | |
| ******Children of Block Flows Test******* | |
| </p> | |
| <div> | |
| final div.text1 | |
| <span> final div.span</span> | |
| <a href="http://www.google.com">Google ME</a> | |
| <div> | |
| final div.div1 | |
| </div> | |
| final div.text2 | |
| <div> | |
| final div.div2 | |
| </div> | |
| </div> | |
| <p> | |
| ******Children of Inline Flows Test******* | |
| </p> | |
| <i>Italic only <b>italic and bold | |
| <div> | |
| Wow, a block! | |
| </div> | |
| <div> | |
| Wow, another block! | |
| </div> | |
| More italic and bold text</b> More italic text | |
| </i> | |
| </body> | |
| </html> |
http://www.webkit.org/blog/115/webcore-rendering-ii-blocks-and-inlines/