CSS 盒模型

当一个客户端代理（比如说浏览器）展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：

• 内容区( content )
• 内边距区( padding )
• 边框( border )
• 外边距区( margin )

包含块

---

包含块，顾名思义就是包含元素的盒子，一个元素的 尺寸 和 位置 经常受其包含块的影响

大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样

 

1. 包含块的影响

元素的 尺寸 及 位置 ，常常会受它的包含块所影响。

对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值 （比如 position 被设置为 absolute 或 fixed），当我们对其赋予 百分比值 时，这些值的计算值，就是通过元素的包含块计算得来

 

2. 确定包含块

确定包含块的过程完全依赖于该元素的 position 属性：

• position 属性为 static、relative 时，其包含块就是最近的祖先 块元素 ( inline-block、block、list-item ) 或者 格式化上下文 ( table container, flex container, grid container, or the block container itself ) 的 内容区 的边缘组成的
• position 属性为 absolute 时，其包含块就是最近的 position 的值 不为 static(fixed, absolute, relative 或 sticky) 祖先 元素 的 内边距区 的边缘组成
• position 属性为 fixed 时，其包含块就是 viewport

 

3. 根据包含块计算百分值

如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：

• 要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 0( 设置对应属性为 0 )
• 要计算 width left right padding margin 这些属性由包含块的 width 属性的值来计算它的百分值。