包含块是什么
包含块（Containing Block）是CSS中用于计算元素布局和定位的重要概念之一。每个元素都相对于其包含块进行布局和定位。
包含块规则的计算方式
对于根元素（html），其包含块是初始包含块（initial containing block）。初始包含块的尺寸通常等于视口（viewport）的尺寸。
对于其他元素，包含块有以下几种情况：
- 如果元素是定位（position）为
relative、static或sticky的块级元素，那么其包含块是最近的块级（block-level）祖先元素。 - 如果元素是定位为
fixed的，那么其包含块是视口（viewport）。PS：有个例外的情况是当有祖先元素含有filter属性时，那么该fixed定位的元素的包含块是该祖先元素。 - 如果元素是定位为
absolute的，并且其祖先元素存在定位（position）为relative、absolute、fixed或sticky的元素，那么其包含块是最近的祖先定位元素。如果没有找到符合条件的定位元素（即其祖先元素都没有非static的定位属性），那么其包含块将是初始包含块（initial containing block），通常是浏览器的视口（viewport）。 - 如果元素是内联（inline）元素，那么其包含块是包含该内联元素的块级元素。
- 如果元素是内联定位元素（如定位为relative或absolute的内联元素），那么其包含块规则同[2]。
通过理解包含块规则，我们可以更好地理解元素的布局和定位方式，从而更好地控制网页的外观和排版。
动手验证
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>tailwindcss</title>
</head>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
<body>
<!-- <div class="box bg-blue-50 relative m-4 p-4">
<div class="box1 bg-blue-200 relative w-24 h-24 m-24 p-4">
<div class="box2 absolute bg-blue-400 w-full h-6 top-0 left-0"></div>
</div>
</div> -->
<div class="box bg-blue-50 m-4 p-4">
<div class="box1 bg-blue-200 w-24 h-24 m-24 p-4">
<div class="box2 inline absolute bg-blue-400 w-full h-6 top-0 left-0"></div>
</div>
</div>
<!-- <div class="box3 bg-blue-50 m-4 p-4">
<div class="box4 bg-blue-200 w-24 h-24 m-24 p-4">
<div class="box5 bg-blue-400 w-full h-6"></div>
</div>
</div> -->
</body>
</html>绝对定位效果
static效果
细节——定位与百分比的基准
- 正常情况下：是包含块的content区（不包含padding）
- 绝对定位下：是包含块的padding区（padding+content）
小结
- 正常情况下：包含块就是离当前元素最近的祖先元素
- 绝对定位( absolute )的包含块就是离他最近开启了定位的祖先元素，否则就是根元素
其他相关知识
绝对定位
绝对定位的特点
- 开启绝对定位后，不设置偏移量的话元素的位置就不会改变
- 开启后，元素会脱离文档流
- 绝对定位会改变元素的性质，行内变成块元素，块的高度将会被内容撑开
- 会使元素提升一个层级
- 绝对定位元素就是相当于其包含块进行定位的
Comments NOTHING