前端学习笔记：深入解析包含块

最新推荐文章于 2024-06-16 13:16:08 发布

undefined&&懒洋洋

最新推荐文章于 2024-06-16 13:16:08 发布

阅读量406

点赞数 5

文章标签：前端学习笔记

本文链接：https://blog.csdn.net/lzhlzhlzh_lzh/article/details/137443121

版权

前端学习笔记：深入解析包含块

在前端的学习中，元素尺寸和定位是不可或缺的一部分。我曾以为元素的with、height、top、left等属性使用百分比单位时是相对于其父元素计算的，但深入学习后才发现，这其实是一个常见的误区。元素的宽高百分比其实是相对于其“包含块”来计算的。那么，什么是包含块？如何确定一个元素的包含块呢？接下来，我们就来一起探讨这个问题。

首先，我们需要明确什么是包含块。在CSS中，包含块是定义元素尺寸和位置的一个参照系。它决定了元素如何相对于其定位，以及元素百分比尺寸的计算基础。

接下来，我们来看如何确定一个元素的包含块：

1.子元素为相对定位或静态定位：如果一个元素的定位是相对的（position: relative;）或者默认的静态定位（position: static;），那么它的包含块就是其块级父元素的内容区域。这意味着，该元素的宽高百分比是相对于其最近的块级父元素的尺寸来计算的。

如下面这种情况son的包含块是parent

<body>
   <div id="parent">
       <div id="son"></div>
   </div>
</body>

#parent {
   width: 800px;
   height: 800px;
   background: #000;
}
#son {
   width: 50%;
   height: 50%;
   background: #ff0000;
   /* position: static; */
   position: relative;
}

如果将parent修改为行盒，则son的包含块不在是parent，而是body。

body{
   width: 100vw;
   height: 100vh;
}
#parent {
   width: 800px;
   height: 800px;
   background: #000;
   /* 修改为行盒 */
   display: inline;
}
#son {
   width: 50%;
   height: 50%;
   background: #ff0000;
   /* position: static; */
   position: relative;
}

2. 子元素为绝对定位：如果一个元素的定位是绝对的（position: absolute;），那么它的包含块会发生变化。在这种情况下，元素的包含块是其第一个定位不为static的祖先元素的内边距区域。换句话说，它会向上查找父元素，直到找到一个定位不是static的元素，然后该元素的内边距区域就成为绝对定位子元素的包含块。

如下面这种情况grandson的包含块不是son，而是parent

```html
<div id="parent">
    <div id="son">
        <div id="grandson"></div>
    </div>
</div>
```

```css
*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
}
#parent {
    width: 800px;
    height: 800px;
    background: #000;
    position: relative;
}
#son {
    width: 70%;
    height: 70%;
    background: #ff0000;
}
#grandson{
    width: 50%;
    height: 50%;
    background: #00ff00;
    position: absolute;
}
```

子元素为固定定位：对于固定定位（position: fixed;）的元素，其包含块是视口区域，也就是浏览器窗口的可见部分。这意味着，固定定位的元素会相对于浏览器窗口进行定位，即使页面滚动，它们也会保持在相同的位置。同时，元素宽高还会根据视口大小自动调整。

<div id="parent">
    <div id="son">
        <div id="grandson"></div>
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100vw;
    height: 100vh;
}
#parent {
    width: 800px;
    height: 800px;
    background: #000;
    position: relative;
}
#son {
    width: 70%;
    height: 70%;
    background: #ff0000;
}
#grandson{
    width: 50%;
    height: 50%;
    background: #00ff00;
    position: fixed;
}