被低估的 CSS 核心！盒子模型如何撑起万亿级网页？

揭秘网页布局的基石：深入理解 CSS 盒子模型

在网页开发的世界里，每一个交互流畅的页面背后，都离不开 CSS 盒子模型这一核心概念。它就像搭建网页这座大厦的基础砖块，决定着页面元素如何排列、显示以及相互之间的关系。

页面中每个元素最终展示是由文档流（行块） + 页面布局（弹性、浮动..）+ 盒模型（标准，怪异）来决定。

一、文档流

文档流是网页元素在页面中默认的排列方式，遵循 "从上到下，从左到右" 的规则，就像一条无形的河流，承载着网页元素按照既定顺序流动。在这条 "河流" 中：

块级元素：如同体积庞大的船只，独占一行。
行内元素：则像小巧的鱼儿，在同一行中游弋，宽度由自身内容决定。

这种默认的排列方式，为网页布局奠定了基础，规定了元素的基本排列顺序和位置，以及它们之间的关系。

以简单的博客文章页面为例：

段落（p 标签，块级元素）会各自占据一行，依次向下排列。
段落中的文字、图片等行内元素，则会在一行中紧密排列，共同组成丰富的内容展示。

二、脱离文档流

脱离文档流是指元素不再遵循正常的文档流排列规则（元素飘了）

如下所示，在container 中有两个盒子 box1与box2，在文档流的情况下box1与box2应该各自独占一行，但box1设置了position: absolute; 而box2没有。box1脱离的文档流不占据原空间，后续元素box2便填补其空间。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        .box1 {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2 {
            text-align: end;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        container
    </div>
</body>
</html>

1. 脱离文档流的触发条件

通过 position 属性设置以下值会使元素脱离文档流：

absolute（绝对定位）

元素完全脱离文档流，不占据原空间

相对于最近的定位祖先元素（position不为static）定位

若无定位祖先，则相对于初始包含块（通常是或视口）定位
fixed（固定定位）

元素完全脱离文档流，不占据原空间

始终相对于浏览器视口定位

页面滚动时位置保持不变

2. 特性

空间释放 ：元素原位置不再保留，后续元素会填补其空间
层级提升 ：脱离文档流的元素会默认显示在普通元素上方（层叠现象）
尺寸变化 ：默认情况下，宽度由内容决定（类似inline-block）
布局独立 ：不再受父元素的内边距、外边距等影响（漂起来了）

3. 应用场景

导航菜单、下拉框、图标、标签、提示信息、悬浮广告等

4. 导致的问题

脱离文档流的元素可能导致 内容重叠 ，可以通过z-index来进行管理层级

二、盒子模型

盒子模型是 CSS 布局的基础，是 HTML 元素在页面中呈现的矩形框模型。每个 HTML 元素都可视为一个的盒子，它包含以下四个部分，且每一部分都能通过 CSS 样式进行调整和定制：

内容（content）：盒子的核心，存放网页的文本、图片等实际信息。
内边距（padding）：内容与边框之间的空白区域，如同给内容添加的装饰边框，用于分隔内容和边框，使内容更加突出。
边框（border）：盒子的轮廓，起到界定盒子范围的作用。
外边距（margin）：盒子与其他盒子之间的空白区域，用于控制盒子在页面中的位置和与其他元素的间距。

三、盒子的大小计算：两种模型的差异

盒子的最终大小计算有两种方式，通过**box-sizing属性设置盒子计算模型，分别是标准盒子模型（content-box）和怪异盒子模型（border-box，也称为 IE 模型）**。

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1,
      .box2 {
        width: 200px;
        height: 200px;
        margin-top: 20px;
        border: 20px solid rgb(0, 0, 0);
        padding: 20px;
      }
      .box1 {
        box-sizing: content-box;
        background-color: red;
      }
      .box2 {
        box-sizing: border-box;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

（一）标准盒子模型（content-box）

在该模型中，宽度仅仅指内容（content）的宽度。盒子的最终大小是内容宽度、内边距宽度和边框宽度之和，这三个部分的尺寸都由 CSS 设置决定。

例如，设置一个元素的宽度为 200px，内边距为 20px，边框为 20px 时，这个盒子实际占据的水平空间计算如下：

200px（内容） + 2×20px（内边距） + 2×20px（边框） = 280px

（二）怪异盒子模型（border-box）

在此模型下，设置的宽度值包含了内容宽度、内边距宽度和边框宽度。即盒子的总大小由 CSS 设置的宽度决定，内边距和边框依然通过 CSS 设置，但内容的最终大小会根据总宽度减去内边距和边框宽度自动调整。

例如，同样设置元素宽度为 200px，内边距为 20px，边框为 20px，内容的宽度计算如下：

200px - 2×20px - 2×20px = 120px，而整个盒子的宽度始终保持为 200px。

四、盒子模型与布局

盒子模型与各种布局方式相结合，能创造出丰富多样的网页布局效果，多列式布局、弹性布局等都离不开它的支撑。

以弹性布局（Flex 布局）为例，将父元素设置为display: flex，子元素（一个个盒子）就可以在父容器中灵活地排列和对齐。利用盒子模型的内边距、外边距和边框属性，可轻松控制子元素之间的间距和视觉效果，实现水平居中、垂直居中、自适应宽度等布局需求。无论是响应式网页设计，还是复杂的电商页面布局，盒子模型都发挥着至关重要的作用。

五、盒子模型的重要作用

盒子模型在网页开发中具有不可替代的作用：

实现复杂布局：能够满足设计师多样化的创意需求，实现各种复杂的布局效果。
精准控制元素：可以精准控制元素的大小和位置，确保页面的美观和协调性。
处理元素关系：通过调整内边距和外边距，有效处理元素之间的间距和重叠关系，使页面布局更加合理、舒适，提升用户的浏览体验。