CSS实例分析
hanlray@gmail.comRevision: 0.5 Date: 2006/08/22
<html>
<body>
<p>abc</p>
<label>label1</label>
<label>label2</label>
</body>
</html>
在HTML4的default style sheet下，上面的代码应该产生怎样的布局呢？abc、label1、label2各占一行？全在同一行？还是其他？
在Firefox1.5和Opera9上的结果都是：abc占一行，label1和lable2占另一行。为什么呢？分析一下：在default style sheet下，body和p是block-level element，label是inline-level element，因此p产生一个block box，两个label各产生一个inline box；根据containing block的定义，这三个box的containing block都是body的block box（的content area），由于block box只能包含block boxes或inline boxes，将会产生anonymous block box包围(wrap around)这些inline boxes，这里最好的方式就是用一个anonymous block box来wrap这两个inline boxes，这样，anonymous block box里的两个inline boxes就参与到一个inline formatting contenxt里，在这个anonymous box里按顺序水平排列；同时这个anonymous block box和p产生的block box参与到body上建立的block formatting contenxt里，按顺序垂直排列。
2189
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
