【技术专题】CSS3 网页技术 - CSS3 盒模型

大家好，我是Java1234_小锋老师，最近更新 《一天学会 CSS3 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 CSS3简介，CSS3 入门，CSS3 选择器与优先级，CSS3 单位、颜色、字体与文本，CSS3 盒模型 与基础样式，CSS3 布局基础，CSS3 布局进阶，CSS3 视觉 增强，CSS3 变换与动画，CSS3 函数与变量，CSS3 响应式 与移动端适配，CSS3 工程化与最佳实践。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234

提取码：1234

CSS3（在第二阶段目录里）

CSS3 盒模型

CSS 盒模型是浏览器布局时把每个元素抽象成的矩形盒子。标准盒模型 也叫 W3C 盒模型 ，在 CSS3 中默认对应 box-sizing: content-box。

1. 盒模型组成

从内到外由四部分组成：

1. content 内容区：文字、图片等实际内容。
2. padding 内边距：内容区与边框之间的距离。
3. border 边框：盒子的边框。
4. margin 外边距：盒子与其它盒子之间的距离，透明，不属于元素自身背景区域。

2. 标准盒模型的核心规则

在标准盒模型下，width 和 height 只表示 content 内容区的宽高，不包含 padding 和 border。

计算公式：

元素可见宽度 = width + padding-left + padding-right + border-left + border-right
元素占位宽度 = 可见宽度 + margin-left + margin-right

高度同理。

例如：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #000;
  margin: 10px;
  box-sizing: content-box; /* 默认值，标准盒模型 */
}

计算结果：

• content 内容区：200 × 100
• padding 后：240 × 140
• 加 border 后，可见盒子：250 × 150
• 再加 margin，占位空间：270 × 170

也就是说，标准盒模型下写 width: 200px，最终元素可能占 250px 宽，因为 padding 和 border 会额外撑大。

3. CSS3 的 box-sizing

CSS3 标准化了 box-sizing 属性，用来切换盒模型计算方式。

值	含义
content-box	默认，标准盒模型，width/height 只算 content
border-box	替代盒模型，width/height 包含 content + padding + border
padding-box	曾出现，兼容性差，不推荐使用

使用 border-box 时：

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #000;
}

此时：

• 元素可见宽度就是 200px
• content 内容区宽度 = 200 - 20*2 - 5*2 = 150px
• margin 仍然不包含在 width 内

所以：

border-box 下：
width = content + padding + border
占位宽度 = width + margin

4. 标准盒模型与 border-box 的区别

对比项	content-box 标准盒模型	border-box 替代盒模型
width 表示	content 宽度	content + padding + border
padding/border	会额外撑大盒子	包含在 width 内
布局计算	需要额外加 padding、border	更直观，宽度就是最终可见宽
margin	都不包含	都不包含

5. 综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3盒模型演示</title>
  <style>
    body {
      font-family: sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
      /* 清除默认边距以便观察 */
      margin: 0; 
    }

    .container {
      /* 加上边框阻止 body 与第一个盒子发生外边距合并 */
      border-top: 2px solid transparent; 
    }

    .box1 {
      background-color: #93c5fd; /* 蓝色 */
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      
      /* 下方外边距 30px */
      margin-bottom: 30px; 
	  padding: 20px;
    }

    .box2 {
      background-color: #fca5a5; /* 红色 */
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      
      /* 上方外边距 20px */
      margin-top: 20px; 
    }

    .explain {
      margin-top: 50px;
      padding: 15px;
      background-color: #fffbeb;
      border-left: 5px solid #f59e0b;
      color: #92400e;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box1">盒子 1 (margin-bottom: 30px)</div>
    <div class="box2">盒子 2 (margin-top: 20px)</div>
  </div>

  <div class="explain">
    <strong>现象说明：</strong><br>
    盒子1的下边距是 30px，盒子2的上边距是 20px。<br>
    因为发生了<strong>垂直外边距合并（Margin Collapse）</strong>，它们之间的实际间距不是 30 + 20 = 50px，而是取两者中的较大值，即 <strong>30px</strong>。
  </div>
</body>
</html>