网页布局必修课：CSS盒模型全面解析

原创已于 2025-06-20 14:39:46 修改 · 1.1k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2025-06-20 14:21:38 首次发布

CSS 必知必会专栏收录该内容

5 篇文章

订阅专栏

一、盒模型的组成部分

盒模型由以下四层组成，从内到外依次为：

内容区域（Content）：
- 元素的实际内容，比如文本、图片等。
- 通过 width 和 height 属性设置内容区域的大小。
内边距（Padding）：
- 内容区域与边框之间的空白区域。
- 通过 padding 属性设置，可以分别设置上、右、下、左四个方向的内边距。
边框（Border）：
- 围绕内容区域和内边距的边框。
- 通过 border 属性设置，可以设置边框的宽度、样式和颜色。
外边距（Margin）：
- 元素与其他元素之间的空白区域。
- 通过 margin 属性设置，可以分别设置上、右、下、左四个方向的外边距。

盒模型的示意图

<!DOCTYPE html>
<html>
<head>
    <style>
        .box {
            width: 200px;
            height: 100px;
            padding: 20px;
            border: 5px solid #ff6b6b;
            margin: 30px;
            background-color: #4ecdc4;
        }
    </style>
</head>
<body>
    <div class="box">盒模型</div>
</body>
</html>

效果说明

内容区域：宽 200px，高 100px，背景色为青色（#4ecdc4）。
内边距：四周各 20px（内容与边框之间的空白）。
边框：5px 宽的红色实线边框（#ff6b6b）。
外边距：四周各 30px（元素与其他元素之间的空白）。

盒模型的属性

内容区域
- width：设置内容区域的宽度。
- height：设置内容区域的高度。
内边距
- padding：简写属性，设置所有方向的内边距。
- padding-top、padding-right、padding-bottom、padding-left：分别设置四个方向的内边距。

padding: 10px; /* 上下左右均为 10px */
padding: 10px 20px; /* 上下 10px，左右 20px */
padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */

边框
- border：简写属性，设置边框的宽度、样式和颜色。
- border-width、border-style、border-color：分别设置边框的宽度、样式和颜色。
- border-top、border-right、border-bottom、border-left：分别设置四个方向的边框。

border: 2px solid black; /* 宽度 2px，实线，黑色 */

外边距
- margin：简写属性，设置所有方向的外边距。
- margin-top、margin-right、margin-bottom、margin-left：分别设置四个方向的外边距。

margin: 10px; /* 上下左右均为 10px */
margin: 10px 20px; /* 上下 10px，左右 20px */
margin: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */

二、盒模型的计算方式

默认情况下，元素的总宽度和总高度由以下公式计算：

总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
总高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

例如：

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

总宽度 = 200px + 10px + 10px + 5px + 5px + 20px + 20px = 270px
总高度 = 200px + 10px + 10px + 5px + 5px + 20px + 20px = 270px

`box-sizing`属性

默认情况下，width 和 height 只设置内容区域的大小。通过 box-sizing 属性，可以改变盒模型的计算方式。

box-sizing: content-box;（默认值）
- width 和 height 只包括内容区域。
- 内边距、边框和外边距会额外增加元素的总大小。

<style>
    .box1 {
        box-sizing: content-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid black;
        background-color: #ffe66d;
    }
</style>
<div class="box1">content-box 总宽度 = 200 + 20*2 + 5*2 = 250px</div>

2. box-sizing: border-box;

width 和 height 包括内容区域、内边距和边框。
外边距仍然会额外增加元素的总大小。

<style>
    .box2 {
        box-sizing: border-box;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 5px solid black;
        background-color: #ff6b6b;
    }
</style>
<div class="box2">border-box 总宽度 = 200px（包括 padding 和 border）</div>

三、外边距折叠（Margin Collapse）

当两个垂直方向的外边距相遇时，它们会折叠成一个外边距，其值为两者中的较大者。
例如：

<style>
    .margin-box {
        width: 200px;
        height: 50px;
        background-color: #4ecdc4;
    }
    .box-a {
        margin-bottom: 30px;
    }
    .box-b {
        margin-top: 20px;
    }
</style>
<div class="margin-box box-a">Box A（margin-bottom: 30px）</div>
<div class="margin-box box-b">Box B（margin-top: 20px）</div>

两个盒子之间的实际外边距是 30px（取 30px 和 20px 的较大值）。

四、复杂布局示例

<style>
    .container {
        width: 400px;
        border: 2px dashed #666;
        padding: 20px;
        margin: 50px auto; /* 水平居中 */
    }
    .header {
        background-color: #ff6b6b;
        padding: 10px;
        margin-bottom: 15px;
    }
    .content {
        background-color: #4ecdc4;
        padding: 20px;
        border: 3px solid #2d3436;
    }
</style>

<div class="container">
    <div class="header">Header</div>
    <div class="content">Content 区域</div>
</div>