CSS的Inline、Block属性

最新推荐文章于 2024-07-27 17:24:14 发布

最新推荐文章于 2024-07-27 17:24:14 发布 · 130 阅读

本文详细解析了浏览器在布局时遵循的原则，包括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>

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>