包含块(containing block)学习
一下均为个人理解,如果错误还望大家指正.
1.块元素的定义
个人认为,块元素就是一个矩形框,作为参考,可以便于内部的元素定位和尺寸的计算。
在浏览器生成显示的页面的时候,每一个框都有一个定位,这个定位受其包含快的影响,不过它不被包含块所限制,而且可能会溢出到包含快之外。
2.包含快的确定
1.跟预算怒存在的包含快成为初始包含快;
2.如果元素的定位(position)为relative或者static,它的包含块由它最近的快级、单元格(table cell)或者行内快(inline-block)祖先元素的内容框创建。
3.如果元素的定位(position)为fixed,包含块由视口创建。
4.如果元素的定位(position)为absolute,包含块由最近的position属性为absolute、relative、fixed的祖先元素创建。
用图表示为:
参考资料: