一文彻底搞懂CSS盒子模型

原创已于 2026-05-12 20:56:16 修改 · 207 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #开发语言

于 2026-05-12 20:54:48 首次发布

一、什么是CSS盒子模型

HTML里每一个标签元素，浏览器都会把它渲染成一个矩形盒子。
一个完整盒子由4部分组成：

1. 内容区 content：盒子里面文字、图片等实际内容

2. 内边距 padding：内容与盒子边框之间的距离

3. 边框 border：盒子的轮廓线条

4. 外边距 margin：当前盒子与其他盒子之间的距离

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型基础</title>
    <style>
        #container1 {
            /* 配置盒子的填充色 */
            background-color: aquamarine;
            /* 配置盒子的圆角边框 */
            border-radius: 20px;
            /* 配置盒子的不透明度 */
            opacity: 0.1;

            /* 配置盒子内容区的宽与高 */
            width: 200px;
            height: 100px;

            /* 配置盒子的内边距 */
            padding: 20px;

            /* 配置盒子边框的颜色，厚度，线型 */
            border: red 5px solid ;

            /* 配置盒子的外边距 */
            margin: 10px;
        }

        #container2 {
            /* 配置盒子的填充色 */
            background-color: rosybrown;
            /* 配置盒子内容区的宽与高 */
            width: 200px;
            height: 100px;

            /* 配置盒子的内边距 */
            padding: 20px;

            /* 配置盒子边框的颜色，厚度，线型 */
            border: blue 5px solid ;

            /* 配置盒子的外边距 */
            margin-top: 40px;
        }

        .content {
            /* 配置盒子的填充色 */
            background-color: rosybrown;
            /* 配置盒子内容区的宽与高 */
            width: 200px;
            height: 100px;

            /* 配置盒子的内边距 */
            padding: 20px;

            /* 配置盒子边框的颜色，厚度，线型 */
            border: blue 5px solid ;

            /* 配置盒子的外边距 */
            margin-top: 40px;
        }
    </style>
</head>
<body>
    <div id="container1" class="content">
        我是第1个div盒子的内容哦~
    </div>

    <div id="container2" class="content">
        我是第2个div盒子的内容哦~
    </div>

    <div id="container3" class="content">
        我是第2个div盒子的内容哦~
    </div>

    <div id="container4" class="content">
        我是第2个div盒子的内容哦~
    </div>

    <b>第1个行内元素</b>
    <b>第2个行内元素</b>
    <b>第3个行内元素</b>
    <b>第4个行内元素</b>
    
</body>
</html>

运行结果：

二、盒子四部分详解

1. 内容 content

通过 width、height 设置
只控制内容大小，不包含边框、内外边距

2. 内边距 padding

内容和边框的空白间距
写法：

padding: 上下左右; padding: 上右下左;（顺时针） padding 会撑大整个盒子

3. 边框 border

格式：宽度样式颜色例：border: 1px solid #000; 边框同样会增加盒子整体大小

4. 外边距 margin

盒子与盒子之间的距离水平 margin 会叠加垂直 margin 会重叠合并
margin 不会改变自身盒子大小，只影响位置

示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>布局练习</title>
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    padding: 30px;
}

.txt1 {
    display: inline-block;
    border: 3px solid green;
    background: #999;
    font-weight: bold;
    padding: 6px 12px;
    margin-bottom: 25px;
}
.txt2 {
    display: inline-block;
    border: 3px solid blue;
    background: #999;
    text-decoration: underline;
    padding: 6px 12px;
    margin-bottom: 40px;
}

.wrap {
    display: flex;
    align-items: flex-end;
    gap: 25px;
}


.img-box {
    border: 2px solid red;
    background: #999;
    padding: 10px;
   
    border-radius: 30px 0 30px 0;
    overflow: hidden;
 
    width: 150px;
    height: 150px;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  
    border-radius: 30px 0 30px 0;
}


.img-box:nth-child(1) {
    width: 120px;
    height: 120px;
}
.img-box:nth-child(2) {
    width: 180px;
    height: 180px;
}
.img-box:nth-child(3) {
    width: 240px;
    height: 240px;
}
</style>
</head>
<body>

<div class="txt1">这个课堂练习禁止使用br和hr标签:加粗文本</div><br>

<div class="txt2">这个课堂练习禁止使用br和hr标签:下划线文本</div>

<div class="wrap">
    <div class="img-box"><img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.gnaccG6F07siwL0W7TTNXwHaE8?rs=1&pid=ImgDetMain&o=7&rm=3"></div>
    <div class="img-box"><img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.gnaccG6F07siwL0W7TTNXwHaE8?rs=1&pid=ImgDetMain&o=7&rm=3"></div>
    <div class="img-box"><img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.gnaccG6F07siwL0W7TTNXwHaE8?rs=1&pid=ImgDetMain&o=7&rm=3"></div>
</div>

</body>
</html>

运行结果：

三、两种盒子模式（重点）

1. 默认标准盒 content-box

box-sizing: content-box;
盒子总宽度 = width + padding + border
padding、border 都会把盒子撑大

2. 怪异盒 / 边框盒 border-box

box-sizing: border-box; 盒子总宽度 = width padding 和 border 向内挤压，不改变盒子整体大小
日常开发99%都用这个

四、盒子模型常见问题

1. 父子元素 margin 塌陷：子盒子上边距会传递给父盒子

2. 行内元素无法设置上下 margin、height

3. 块元素独占一行，默认宽度100%

4. 两个相邻垂直外边距，取较大值合并

五、总结

1. 网页万物皆盒子：content + padding + border + margin

2. 布局统一用 border-box，避免尺寸错乱

3. margin管盒子之间，padding管盒子内部

4. 不懂盒子模型，浮动、弹性布局全部学不懂