元素的尺寸及位置,常常会受它的包含块所影响
根元素(很多场景下可以看成是<html>)被称为“初始包含块”,其尺寸等同于浏览器可视窗口的大小
百分比
- 子 width = 父 width
- 子 height = 父 height
- 子 margin = 父 width
- 子 padding = 父 width
position
-
static 、 relative、sticky
最近的父级块元素
-
absolute
最近的 position 的值不是 static (也就是值为 fixed, absolute, relative 或 sticky)的祖先元素的 padding 的边缘组成, 百分比计算规则父元素宽度需要包含 padding
-
fixed
- 在连续媒体的情况下包含块是
viewport - 分页媒体下的情况下包含块是分页区域
- 在连续媒体的情况下包含块是
-
absolute 或 fixed
- transform 或 perspective 的值不是 none
- will-change 的值是 transform 或 perspective
- filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效)
- contain 的值是 paint 最近父级元素的内边距区的边缘