CSS包含快，块小知识多，大神分享

前端

2023-02-01 19:35:19

CSS包含块：理解布局和定位的基础

CSS包含块是一个你可能听说过但却不熟悉的基础CSS概念。它是理解CSS布局和定位的关键，在构建美观而实用的网页时至关重要。让我们深入了解CSS包含块，揭开其在网页设计中的秘密。

一、CSS包含块：定义

CSS包含块（containing block）是元素内容所占据的区域。它充当元素在页面上布局和定位的基础。包含块可以是元素的父元素、浏览器窗口、根元素或指定包含块属性的元素。

二、CSS包含块：作用

CSS包含块发挥着至关重要的作用：

确定元素尺寸和位置： 包含块设置元素的尺寸和位置，就像一个容纳元素的盒子。
影响元素关系： 包含块影响元素与其他元素之间的关系，包括重叠、定位和间距。
充当定位参考点： 包含块是CSS定位的参考点。绝对定位的元素以包含块的左上角为基准进行定位。

三、设置CSS包含块

你可以使用以下方法设置CSS包含块：

父元素： 子元素的默认包含块是其父元素。
浏览器窗口： 整个页面的包含块是浏览器窗口。
根元素： 整个文档的包含块是根元素（通常是<html>元素）。
自定义包含块： 使用CSS属性“contain”，你可以将一个元素指定为包含块。

四、CSS包含块与盒子模型

CSS包含块是盒子模型的基础，盒子模型是元素内容、内边距、边框和外边距的组合。包含块决定了元素的尺寸和位置，是盒子模型的基石。

五、CSS包含块与CSS定位

CSS包含块是CSS定位的参考点。绝对定位的元素的偏移和定位是相对于其包含块的左上角计算的。

代码示例

/* 使用父元素作为包含块 */
.container {
  width: 500px;
  height: 500px;
}

.element {
  width: 200px;
  height: 200px;
  background-color: red;
}

/* 使用浏览器窗口作为包含块 */
body {
  width: 100vw;
  height: 100vh;
}

.element {
  width: 50%;
  height: 50%;
  background-color: blue;
}

/* 指定包含块 */
.wrapper {
  contain: content;
}

.element {
  width: 250px;
  height: 250px;
  background-color: green;
}