一个元素的占用面积大小以及布局定位通常受到包含块(Containing Block)的影响,比如 top
和 left
取百分比时相对的长度是什么长度,width
和 height
取百分比时相对的长度是什么长度?
包含块一般情况下是当前元素的最近的祖先块元素1的内容区域,但具体还需要分情况来确定。
布局区域
浏览器渲染文档时,对于每一个元素,都会有一个布局盒子,该盒子又被划分为四个区域。
- 内容区域——Content Area
- 内边距区域——Padding Area
- 边框区域——Border Area
- 外边距区域——Margin Area
box-sizing 设为 border-box,会影响 width 和 height 的计算,但不影响布局区域的划分。