css包含块
包含块
出现
在css中一些属性的计算可能超出你的预料，在普遍情况下会认为定位属性和百分比的宽高是根据父元素计算的，但是准确来说他们都是根据元素所在的包含块来计算的，所以掌握包含块的知识是非常关键的。
内容
在CSS中，“包含块”（Containing Block）是一个重要的概念，它决定了元素的定位和尺寸计算的基准。包含块可以是以下元素之一：
-
根元素：对于HTML文档中的根元素（通常是
<html>），其包含块是视口（viewport），即浏览器窗口的大小。 -
定位元素：对于设置了
position: relative;,position: absolute;,position: fixed;或position: sticky;的元素，其包含块是最近的已定位（即设置了position属性且不是static）的祖先元素。 -
行内元素：对于行内元素（如
<span>），其包含块通常是其父元素的内边距（padding）区域。 -
表格单元格：对于表格单元格（
<td>），其包含块是表格行（<tr>）。 -
flex容器：对于flex项目的元素，其包含块是flex容器。
-
grid容器：对于grid项目的元素，其包含块是grid容器。
-
块级元素：对于块级元素（如
<div>），其包含块是最近的块级祖先元素的内边距区域。 -
浮动元素：对于浮动元素（设置了
float属性的元素），其包含块是最近的块级祖先元素。 -
绝对定位元素：对于绝对定位的元素（
position: absolute;），其包含块是最近的已定位的祖先元素。如果没有这样的祖先元素，那么包含块是初始包含块（通常是<html>元素）。 -
固定定位元素：对于固定定位的元素（
position: fixed;），其包含块是视口。 -
sticky元素：对于粘性定位的元素（
position: sticky;），其包含块是最近的已定位的祖先元素，或者是视口，取决于元素的位置。
包含块的概念在进行元素定位和尺寸计算时非常重要，因为它决定了元素的起始位置和大小限制。例如，当你使用position: absolute;定位一个元素时，该元素将相对于其最近的已定位的祖先元素进行定位，这就是包含块的作用。
理解包含块对于编写灵活和可预测的CSS布局至关重要。