什么是包含块？
MDN 定义：一个元素的尺寸和位置经常受其 包含块（containing block）的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区域，但也不是总是这样
包含块（containing block）就是元素用来计算和定位一个的框。如：width:50%，那到底是哪个 “元素” 宽度的一半呢？其实，这个 “元素” 实际上就是指的包含块
包含块的计算规则
1、根元素（很多场景下可以看成是 <html> ）被称为 “初始包含块”，其尺寸等同于浏览器可视窗口大小
2、对于其他元素，如果该元素的 position 是 relative 或 static 或 sticky，则 “包含块” 由其最近块级、单元格（tr、td）或者行内块（inline-block）祖先元素的内容区的边缘组成
3、如果元素是 position: fixed，则包含块是 “初始化包含块”
4、如果元素是 postion: absolute，则 “包含块” 由最近的 position 不为 static （也就是值为 fixed, absolute, relative 或 sticky）的祖先元素的内边距区的边缘组成
元素如果未声明 position 特性，那么就会采用 position 的默认值 static
如果没有找到符合条件的祖先元素则包含块是 “初始化包含块”
根据包含块计算百分值
如上所述，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：
- 要计算
height、top及bottom中的百分值，是通过包含块的height的值。如果包含块的height值会根据它的内容变化，而且包含块的position属性的值被赋予relative或static，那么，这些值的计算值为auto - 要计算
width、left、right、padding、margin这些属性由包含块的width属性的值来计算它的百分值
网友评论