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/

你可能感兴趣的:(block)