前端 CSS 经典：CSS 包含块

前言：CSS 总的来说就两块，样式计算和视觉格式化模型，而包含块就是视觉格式化模型的重要内容，理解包含块的定义，对于 CSS 布局有更好的帮助。

1. 概念

什么叫包含块，指的是一个区域，某一个元素在这个区域的排列，这个元素的宽度，高度，left，top 是相对于这个区域的。而这个区域就叫作这个元素的包含块。

2. 包含块的确定规则

1. 如果一个元素是浮动元素或常规元素他的包含块是父元素的内容盒。
2. 如果一个元素是绝对定位元素他的包含块是第一个定位祖先的填充盒。
3. 如果一个元素是固定定位元素且他的祖先元素里面没有 transform 变形样式，那他的包含块是整个视图窗口。如果祖先元素有 transform 变形样式。那他的包含块就是设置了 transform 变形样式的填充盒子。

3. 面试问题

绝对定位元素和固定定位元素的区别是什么？

答案：包含块不一样。