w3c系列CSS之路（五）：详解visual formatting model

最新推荐文章于 2021-03-29 23:03:29 发布

机智的大猫猫

最新推荐文章于 2021-03-29 23:03:29 发布

阅读量905

点赞数

分类专栏： Web开发

本文链接：https://blog.csdn.net/liquanfeng326/article/details/39026063

版权

Web开发专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文是对w3c系列CSS之路（四）种的VFM的完善和补充，官方原文：http://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 id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the 
      <STRONG id="strong1">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，或者是绝对长度