#书摘 #css #前端《CSS 世界》流的破坏与保护
1. absolute的包含块
包含块（containing block）这个概念实际上大家一直都有接触，就是元素用来计算和定位的一个框。比方说，width:50%，也就是宽度一半，那到底是哪个“元素”宽度的一半呢？实际上就是指的“包含块”。
普通元素的百分比宽度是相对于父元素的 content box 宽度计算的，而绝对定位元素的宽度是相对于第一个position不为static的祖先元素计算的。
实际上，大家已经和“包含块”打过交道了，对于这些计算规则，规范是有明确定义的，具体如下（剔除了不常用的部分内容）。
（1）
根元素（很多场景下可以看成是 <html> ）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
（2）对于其他元素，
如果该元素的 position 是 relative 或者 static，则“包含块”由其最近的块容器祖先盒的 content box 边界形成。
（3）
如果元素 position:fixed，则“包含块”是“初始包含块”。（4）
如果元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素建立，具体方式如下。
如果该祖先元素是纯 inline 元素，则规则略复杂：
- 假设给内联元素的前后各生成一个宽度为0的内联盒子（inline box），则这两个内联盒子的 padding box 外面的包围盒就是内联元素的“包含块”
- 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是 CSS2.1 规范并没有明确定义，浏览器自行发挥。否则，“包含块”由该祖先的 padding box 边界形成。
（5）如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。
2. 可以看到，和常规元素相比，absolute 绝对定位元素的“包含块”有以下3个明显差异：
（1）
内联元素也可以作为“包含块”所在的元素（2）“包含块”所在的元素不是父块级元素，而是最近的 position 不为 static 的祖先元素或根元素
（3）边界是 padding box 而不是 content box
