本文深入探讨CSS2.1中的视觉格式化模型，重点讲解了包含块的概念，包括初始包含块、静态或相对定位元素的包含块、绝对定位元素的包含块以及固定定位元素的包含块。通过实例分析，阐述了不同定位方式下包含块的计算规则及其对元素布局的影响，同时对比了浏览器间可能存在的差异，对于理解CSS布局基础有着重要作用。
原汁原味的才是最有味道的，在阅读CSS标准时对这一点的体会更加深刻了，阅读文档后的一大感觉就是很多看上去理所应当的样式表现也都有了对应的支持机制。本文首先从包含块写起，一方面总结标准中相应的阐述，并且结合具体的实例进行具体分析，特别是对于CSS2.1支持并不完善的IE6/7。由于经验尚浅，文中肯定存在一些问题，希望大家可以多多包涵并且指出问题。
阅读本文前，应当对于CSS盒模型以及视觉格式化模型中会产生的各种框(box，也可以成为盒子)以及各种不同的布局方式有比较准确的认识，可以阅读杜瑶大神的两篇文章，这两篇文章也是对标准中相关章节的翻译和阐述。
(1)
视觉格式化模型中的各种框
(2)
置换和非置换元素
或直接阅读CSS2.1 SPEC中的相关章节：
(1)
Box model
在讲包含块之前还是想先简单说一下视觉格式化模型
1、CSS视觉格式化模型
标准中对于视觉格式化模型的阐述为：
how user agents process the document tree for visual media.
即用户代理在视觉媒体下如何处理文档树，用户代理最常见的比如浏览器，而负责页面解析和渲染的就是浏览器的渲染引擎(现在更多地直接称为浏览器内核)，文档既可以包括HTML文档，也包括其他通用标记语言所编写的文档。在视觉格式化模型中，文档树中的每个元素都会根据盒模型产生0个或多个框，影响这个框的布局的因素有：
(1)框的尺寸和类型，比如块级框和行内级框的布局方式就是不同的。
(2)框的定位方式，display属性绝对了一个元素所产生的框的定位方式，定位方式不同的框在布局时也有不同的规则。
(3)与其他框的关系，假如有两个框，它们之间是包含关系还是同辈关系而所产生的布局是不相同的。
(4)其他的额外信息(比如视口的大小，置换元素的固有尺寸等)
从这个角度讲，视觉格式化模型就是对上述这些因素是如何影响一个框的布局而进行的详细描述。
2、视口(viewport)
第一部分中出现了视口这个词，直观上看，我觉得视口可以理解为用户代理用来呈现解析和渲染后的文档树的区域，用户通过这个区域可以阅读文档得内容，在浏览器中，视口一般就是浏览器用于呈现网页的区域。
标准中对于视口的阐述为：
注意加粗的continuous media，我们平时所浏览的网页就属于连续媒体，而通过打印机打印的文档内容必须是分页的，所以就是分页媒体，即paged media(此处的解释略粗糙，仅是个人的简单看法)。网页是连续的媒体，那么问题就来了，视口不可能跟随网页的大小而变化，因此视口在小于文档的尺寸时，必须提供一种滚动机制，最常见的就是浏览器的滚动条，通过滚动条我们就可以浏览超出视口的文档部分，也就是文档中阐述的：
当然关于视口的知识点可不只是上述的这么简单，比如在移动web中，viewport的相关属性对于移动web的开发至关重要，但本文暂不涉及其他关于视口的知识点。
3、包含块(containing block)
一个网页是由一个一个的框(box)所组成的，每一个框在页面中都有自己的尺寸、位置以及其他的渲染属性(如背景色，字体等)，那么这些框在布局的时候，它们的位置是如何决定的呢？另外，如果没有为框定义显示的尺寸(width,padding,border,margin)等，那么它们的尺寸又是如何确定的呢？答案的关键点就是包含块，个人认为，包含块是学习CSS布局时基础中的基础，不过还好，这个概念也并不难理解。
首先看一下标准中对于包含块的阐述：
The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.
即视觉格式化模型中所产生的各种框，它们的位置和
大
小
往往都是根据一个特定的
矩形框边缘
来计算得到的， 这个矩形框就是这个box的包含块。
注：如果讲
一个框的包含块时，指的是它
所处的包含块，而不是它
形成的包含块。
那么该如何确定一个框的包含块呢？标准中规定了相应的规则：
3.1根元素的包含块
最低0.47元/天 解锁文章
扫一扫
2852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
