489
京东网上商城
w3c系列CSS之路（五）：详解visual formatting model
本文是对w3c系列CSS之路（四）种的VFM的完善和补充，官方原文：https://www.w3.org/TR/2011/REC-CSS2-20110607/visudet.html
1 containing block
containing block（包含框）上节有提到，这里给出更详细的介绍。一个盒子的位置和大小通常都跟包含它的矩形框有关，这个矩形框就是这个盒子的包含框。标准给出了一个元素的containing block的定义：
- 首先，根元素的居住的包含框叫做initial containing block(初始包含框)；
- 对于非根元素，如果其position为static或relative，containing block的形成依赖于其最近的block container祖先块的内容边界；
- 如果position属性为fixed，containing block依赖于viewport而建立；
- 如果position属性为absolute，containing block的形成依赖于最近的，并且position值为relative | absolute | fixed 的先祖元素。如果它没有这样的先祖元素的话，containing block就是initial containing block。
为了更好的理解，我们举个例子就知道了：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Illustration of containing blocks</TITLE>
</HEAD>
<BODY >
<DIV >
<P >This is text in the first paragraph...</P>
<P >This is text <EM > in the
<STRONG >second</STRONG> paragraph.</EM></P>
</DIV>
</BODY>
</HTML>html的containing block是由initial containing block建立的，#div1的containing block是由body建立的，#p1的containing block是由#div1建立的，#em1的containing block是由#p2建立的......如果加上以下样式的话：
#div1 { position: absolute; left: 50px; top: 50px }
#em1 { position: absolute; left: 100px; top: 100px }#div1的containing block则是由initial containing block建立的。而#em1的containing block则是由#div1建立的。2 width宽度的计算
width属性指定了元素内容的宽度，相关信息如下：
| 可取值： | <length> | <percentage> | auto | inherit |
| 初始值: | auto |
| 适用于: | all elements but non-replaced inline elements, table rows, and row groups |
| 是否继承: | no |
| 百分比: | 取决于containing block的宽度 |
| Media: | visual |
| Computed value: | 百分值， 或者auto，或者是绝对长度 |
width属性对non-replaced inline elements无效，因为non-replaced inline elements 的宽度就是其内容的宽度。
最后更新：2017-04-03 05:40:12