CSS的Inline、Block属性

来源：互联网发布：志鸿优化高一寒假作业编辑：程序博客网时间：2024/05/20 19:16

浏览器在布局时，会遵守下面两个原则：

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>

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>

<p>

示例二：代码“Children of Inline Flows Test”：Inline包含了Inline和Block。

浏览器会在顶层Inline元素之外封装一个匿名Block：

******Children of Inline Flows Test（浏览器渲染模型）*******

<i>Italic only <b>italic and bold</b></i>

</anonymous pre block>

<div>

Wow, a block!

</div>

<div>

Wow, another block!

</div>

</anonymous middle 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/