1，写在前面的话

CSS目前还不被认可是一门真正的编程语言，虽然现在已经有像less、saas、stylus这样的预处理器或者叫预处理框架，使CSS更具动态性，拥有诸如变量、继承、运算、函数等编程特性，但是我们不可忽视CSS在前端开发中的地位，特别是在互联网（移动互联网）时代，前端作为直面用户的“门户”，对视觉与交互要求越来越高，CSS就如是“门户”的装潢有者不可替代的地位，在发挥着越来越重要的作用。

正是因为CSS的声明式特点与编程上的特殊性，CSS上手很容易，但是精深却很难，我们需要系统性地学习并应用它。我们从最基础，最不容易懂而且很容易被忽视的地方开始，从规范或者权威解读里出发，一步一步深入CSS的世界。

2，什么是包含块

首先，我们来看下W3C CSS规范中对包含块的定义:

一大串英文，看起来容易头晕，没关系我们来翻译并拆解下:

上面这句话就给包含块下了个定义，其中有几个点我们需要关注下

（1）“特定的矩形框”：包含块的具象特征

（2）“有时”：这意味者并不是所有元素都有包含块。

理清了定义后，我们来看看包含块具体的规则与详细解释

上面都是文字描述，有点不够形象，我们引用个导图来总结下：

3，包含块的作用和意义

包含块我们平时“看不到”、“摸不着”，那理解它有什么意义呢？

意义大着呢，因为山就在那里！

包含块（Containing Block）是视觉格式化模型（该文集里有相应的解读）的一个重要概念，它与框模型（盒模型）类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置的计算往往是由该元素所在的包含块决定的。

如果深入了解包含块等重要基础知识，则在日常的开发比如页面布局，还有问题解决时，就更有底气，更能够找到问题点，对开发的价值也是有重大意义的。