内容简介：一个元素的占用面积大小以及布局定位通常受到包含块一般情况下是当前元素的最近的祖先块元素的浏览器渲染文档时，对于每一个元素，都会有一个布局盒子，该盒子又被划分为四个区域。
一个元素的占用面积大小以及布局定位通常受到 包含块（Containing Block） 的影响，比如 top 和 left 取百分比时相对的长度是什么长度， width 和 height 取百分比时相对的长度是什么长度？
包含块一般情况下是当前元素的最近的祖先块元素的 内容区域 ，但具体还需要分情况来确定。
布局区域
浏览器渲染文档时，对于每一个元素，都会有一个布局盒子，该盒子又被划分为四个区域。
- 内容区域—— Content Area
- 内边距区域—— Padding Area
- 边框区域—— Border Area
- 外边距区域—— Margin Area
box-sizing 设为 border-box，会影响 width 和 height 的计算，但不影响布局区域的划分。
确定包含块
根据元素的 position 属性值来确定它对应的包含块：
- 如果是根元素，那么就是视窗
- 如果
position属性值是static（不设置时的默认值）或者relative是，那么包含块就是它最近的祖先块元素或块格式化上下文（如浮动元素、表格单元格、弹性元素、网格元素等）的 内容区域 。 - 如果
position属性值是fixed，那么包含块是视窗，除非满足 5 的条件 - 如果
position属性值是absolute，那么包含块是最近的position属性值不是static的祖先元素的 内边距区域 ，除非满足 5 的条件 - 如果
position属性值是absolute或fixed，包含块也可能是满足以下任一条件的的最近的祖先级元素的 内边距区域 ：
– transform 或 perspective 属性值不是 none
– will-change 的属性值是 transform 或 perspective
– filter 属性值不是 none 或 will-change 属性值是 filter （仅 Firefox）
根据包含块计算百分比值
部分属性使用百分比值时，计算值根据这个元素的包含块计算而来，包括：
1. height 、 top 和 bottom 中的百分比值，通过包含块的 height 值。如果包含块的 height 值会根据它的内容而变化（如没设置 height 或设为 auto），而且包含块的 position 属性值时 relative 或 static ，那么这些计算值为 0
2. width 、 left 、 right 、 padding 、 margin 这些属性的百分比值通过包含块的 width 属性值来计算。
详细实例参考 MDN 文档 。
参考资料
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Alone Together
Sherry Turkle / Basic Books / 2011-1-11 / USD 28.95
Consider Facebookit’s human contact, only easier to engage with and easier to avoid. Developing technology promises closeness. Sometimes it delivers, but much of our modern life leaves us less connect......一起来看看 《Alone Together》 这本书的介绍吧!
