1、什么是包含块？
元素的尺寸和位置会受到包含块的影响，具体表现为width, height, padding, margin的值设置为百分比的时候相对于谁？position为absolute或者fixed 的偏移值（top、left、bottom、right）相对于谁？
其实就是包含块！！！
2、包含块的规则:
-
如果元素的 positiion 是 relative 或 static（默认的定位方式） ，那么包含块由离它最近的块容器（block container）的内容区域（content area）的边缘建立。
-
如果 position 属性是 fixed，那么包含块由视口建立。
-
如果元素使用了 absolute 定位，则包含块由它的最近的 position 的值不是 static （也就是值为fixed、absolute、relative 或 sticky）的祖先元素的内边距区的边缘组成。
-
如果 position 属性是
absolute或fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：transform或perspective的值不是nonewill-change的值是transform或perspectivefilter的值不是none或will-change的值是filter（只在 Firefox 下生效）。contain的值是layout、paint、strict或content（例如：contain: paint;）backdrop-filter的值不是none（例如：backdrop-filter: blur(10px);）
3. 举个例子
分析下面代码的包含块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>洛克前端</title>
<style>
</style>
</head>
<body id="body">
<div id="div1">
<p id="p1">This is text in the first paragraph...</p>
<p id="p2">
This is text
<em id="em1">
in the
<strong id="strong1">second</strong>
paragraph.
</em>
</p>
</div>
// 单独说一下第四条
<div >
<span></span>
</div>
</body>
</html>
分析一下包含块：
- html : 初始化（视窗）
- body : html
- div1 : body
- p1 : div1
- p2 : div1
- em1 : p2
- strong1 : p2
注意：strong1 的定位是static 它的包含块应该是离他近的块元素。em不是块元素
我们加入以下代码：
.div1{
position:absolute;
}
.strong1{
position:absolute;
}
此时，div1的包含块变为html,strong1 的包含块变为div1
单独说一下第四条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>洛克前端</title>
<style>
.div2{
transform: rotate(0deg);
width: 200px;
height: 200px;
background-color: skyblue;
}
.span1{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: red;
top: 20px;
}
</style>
</head>
<body id="body">
// 单独说一下第四条
<div class="div2">
<span class="span1"></span>
</div>
</body>
</html>
span的包含块是div 而不是html. 也就是说第4条的情况会导致当前元素称为fixwd 和 absolute 的包含块。
参考文献:
