包含块：指元素最近的祖先块元素(inline-block, block 或 list-item 元素)的内容区。
包含块的影响
元素的尺寸及位置，常常会受它的包含块所影响。
如 width, height, padding, margin，left，right，top，bottom 等属性，当其值为百分比时，元素的这些值，就是通过包含块计算得出。
如何确定元素的包含块？
确定一个元素的包含块的过程完全依赖于这个元素的 position 属性：
如果 position 属性为
static、relative或sticky，包含块可能由它的最近的祖先块元素的内容区的边缘组成，也可能会建立格式化上下文。如果 position 属性为
absolute，包含块就是由它的最近的 position 的值不是static（也就是值为fixed,absolute,relative或sticky）的祖先元素的内边距区的边缘组成。如果 position 属性是
fixed，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media) 下的情况下包含块是分页区域(page area)。-
如果 position 属性是
absolute或fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：- transform 或 perspective 的值不是
none - will-change 的值是
transform或perspective - filter 的值不是
none或 will-change 的值是filter(只在 Firefox 下生效). - contain 的值是
paint(例如: contain: paint;)
- transform 或 perspective 的值不是
通过包含块计算元素属性的百分比值
如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：
要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。
要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。
<body>
<section>
<p></p>
</section>
</body>
例 1
section {
display: block;
width: 400px;
height: 160px;
background: lightgray;
}
p {
width: 50%; /* == 400px * .5 = 200px */
height: 25%; /* == 160px * .25 = 40px */
margin: 5%; /* == 400px * .05 = 20px */
padding: 5%; /* == 400px * .05 = 20px */
background: cyan;
}
例 2
section {
display: inline;
background: lightgray;
}
p {
width: 50%; /* == body 宽度的一半 */
height: 200px; /* 使用百分比将会计算为 0 */
background: cyan;
}
例 3
section {
position: absolute;
left: 30px;
top: 30px;
width: 400px;
height: 160px;
padding: 30px 20px;
background: lightgray;
}
p {
position: absolute;
width: 50%; /* == (400px + 20px + 20px) * .5 = 220px */
height: 25%; /* == (160px + 30px + 30px) * .25 = 55px */
margin: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
padding: 5%; /* == (400px + 20px + 20px) * .05 = 22px */
background: cyan;
}
例 4
section {
width: 400px;
height: 480px;
margin: 30px;
padding: 15px;
background: lightgray;
}
p {
position: fixed;
width: 50%; /* == (50vw - (width of vertical scrollbar)) */
height: 50%; /* == (50vh - (height of horizontal scrollbar)) */
margin: 5%; /* == (5vw - (width of vertical scrollbar)) */
padding: 5%; /* == (5vw - (width of vertical scrollbar)) */
background: cyan;
}
例 5
section {
transform: rotate(0deg);
width: 400px;
height: 160px;
background: lightgray;
}
p {
position: absolute;
left: 80px;
top: 30px;
width: 50%; /* == 200px */
height: 25%; /* == 40px */
margin: 5%; /* == 20px */
padding: 5%; /* == 20px */
background: cyan;
}
