文章目录[隐藏]
contain block
这部分是基础知识,需要掌握的点时width、height、padding、margin的百分比的数值是基于最近父元素的containing block 宽度计算的,但是transform的是百分比值是按照自身宽高计算。
关于containing block
标识containing block(包含块)的过程完全取决于元素position
属性的值:
- 如果
position
属性是static
,relative
或sticky
,则包含块由最接近祖先元素的内容框的边缘形成,该元素是一个块容器(例如inline-block,block或list-item元素)或建立一个格式化上下文(例如表容器,伸缩容器,网格容器或块容器本身)。 - 如果
position
属性是absolute
,含块由的边缘形成填充箱,其具有最近的祖先元素的position
比其他值static
(fixed
,absolute
,relative
,或sticky
)。 - 如果
position
属性为fixed
,则包含块是由视口(对于连续媒体而言)或页面区域(对于分页媒体而言)建立的。 - 如果
position
属性是absolute
或fixed
,则包含块也可以由具有以下内容的最近祖先元素的填充框的边缘形成:-
transform
或perspective 除
none以外的值
-
will-change
值为transform
或perspective
-
filter除了
none以外的值
或will-change
值为filter
(仅适用于Firefox浏览器)。 -
contain
值为paint
(例如contain: paint;
)
-
注意:根元素(<html>
)所在的包含块是一个称为初始包含块的矩形。它具有视口(用于连续媒体)或页面区域(用于分页媒体)的尺寸。
精心打造全新课程,欢迎吐槽!反馈宝贵意见!
从包含块计算百分比值
如上所述,当给某些属性指定百分比值时,计算出的值取决于元素的包含块。以这种方式工作的属性是框模型属性和偏移属性:
bounding box
bound box是一个元素的边界,可以通过DOM API:getBoundingClientRect和getComputedStyle来获取,这两个方法有些差别:
上面介绍了吸顶组件现在可以用css position:sticky 来实现,但是webkit内核之前有个bug,就是吸顶有1px的缝隙,可以用css hack解决。之前比较多的是通过js来实现吸顶的逻辑。
BFC
基本知识点,要知道浏览器布局的基本单位就是元素的BFC和IFC,边距折叠的原理,如何创建BFC和清除浮动。浮动会导致的问题是父元素高度塌陷,无法撑起父元素的高度。
定位
布局
优先级
预处理
参考:
https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block