✨CSS 盒模型 👌

1. 概述

1.1 盒模型定义

盒模型（Box Model） 是 CSS 布局的基础概念，描述了 HTML 元素在页面中如何占据空间。每个元素都会在页面中生成一个矩形区域（盒子），这个盒子由多个部分组成，从内到外分别是：内容区、内边距、边框和外边距。

2. 盒子类型

2.1 基本分类

CSS 中的盒子主要分为两种类型：

盒子类型	display 值	特征	常见元素
行盒（Inline Box）	`inline`	不换行，宽高由内容决定	`span`、`a`、`strong`、`em`、`img`
块盒（Block Box）	`block`	独占一行，可设置宽高	`div`、`p`、`h1-h6`、`section`
行块盒（Inline-Block Box）	`inline-block`	不换行，可设置宽高	`input`、`button`

2.2 详细对比

css

/* 行盒特征 */
.inline-box {
  display: inline;
  /* 以下属性对行盒无效或部分有效 */
  width: 200px; /* 无效 */
  height: 100px; /* 无效 */
  margin-top: 20px; /* 无效 */
  margin-bottom: 20px; /* 无效 */
  padding-top: 10px; /* 视觉有效，但不影响行高 */
  padding-bottom: 10px; /* 视觉有效，但不影响行高 */
}

/* 块盒特征 */
.block-box {
  display: block;
  width: 200px; /* 有效 */
  height: 100px; /* 有效 */
  margin: 20px; /* 完全有效 */
  padding: 10px; /* 完全有效 */
}

在线对比

3. 盒子的组成部分

3.1 整体结构

盒模型由四个主要部分组成，从内到外依次是：

┌─────────────────────────────────────┐
│              margin                 │  外边距
│  ┌───────────────────────────────┐  │
│  │            border             │  │  边框
│  │  ┌─────────────────────────┐  │  │
│  │  │        padding          │  │  │  内边距
│  │  │  ┌───────────────────┐  │  │  │
│  │  │  │      content      │  │  │  │  内容区
│  │  │  └───────────────────┘  │  │  │
│  │  └─────────────────────────┘  │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

3.2 内容区（Content）

内容区是盒子的核心部分，用于显示元素的实际内容（文本、图片等）。

3.2.1 相关属性

css

.content-example {
  /* 设置内容区的尺寸 */
  width: 300px; /* 内容区宽度 */
  height: 200px; /* 内容区高度 */

  /* 尺寸限制 */
  min-width: 200px; /* 最小宽度 */
  max-width: 500px; /* 最大宽度 */
  min-height: 100px; /* 最小高度 */
  max-height: 400px; /* 最大高度 */

  /* 内容溢出处理 */
  overflow: hidden; /* 隐藏溢出内容 */
  overflow: scroll; /* 显示滚动条 */
  overflow: auto; /* 自动显示滚动条 */
}

3.2.2 重要概念

内容盒（content-box）：仅包含内容区的盒子
width 和 height 默认设置的是内容区的尺寸
内容区的实际显示受 overflow 属性影响

3.3 内边距（Padding）

内边距是内容区与边框之间的空白区域，用于控制内容与边框的距离。

3.3.1 基本语法

css

.padding-example {
  /* 单独设置各边内边距 */
  padding-top: 10px; /* 上内边距 */
  padding-right: 15px; /* 右内边距 */
  padding-bottom: 10px; /* 下内边距 */
  padding-left: 15px; /* 左内边距 */

  /* 简写属性 - 四个值 */
  padding: 10px 15px 10px 15px; /* 上 右 下 左 */

  /* 简写属性 - 三个值 */
  padding: 10px 15px 20px; /* 上 左右 下 */

  /* 简写属性 - 两个值 */
  padding: 10px 15px; /* 上下 左右 */

  /* 简写属性 - 一个值 */
  padding: 10px; /* 四边相同 */
}

3.3.2 特殊值和单位

css

.padding-units {
  /* 绝对单位 */
  padding: 10px; /* 像素 */
  padding: 1em; /* 相对于字体大小 */
  padding: 1rem; /* 相对于根元素字体大小 */

  /* 百分比（相对于包含块宽度） */
  padding: 5%; /* 相对于包含块宽度 */

  /* 特殊值 */
  padding: 0; /* 无内边距 */
  padding: auto; /* 浏览器计算（很少使用） */
}

3.3.3 重要概念

填充盒（padding-box）：内容区 + 内边距
内边距不能为负值
百分比内边距相对于包含块的宽度计算（包括上下内边距）

3.4 边框（Border）

边框围绕在内边距外围，由三个属性组成：样式、宽度和颜色。

3.4.1 边框三要素

css

.border-example {
  /* 边框样式（必需，否则边框不显示） */
  border-style: solid; /* 实线 */
  border-style: dashed; /* 虚线 */
  border-style: dotted; /* 点线 */
  border-style: double; /* 双线 */
  border-style: groove; /* 凹槽 */
  border-style: ridge; /* 凸起 */
  border-style: inset; /* 内嵌 */
  border-style: outset; /* 外凸 */
  border-style: none; /* 无边框 */
  border-style: hidden; /* 隐藏边框 */

  /* 边框宽度 */
  border-width: 1px; /* 具体数值 */
  border-width: thin; /* 细边框 */
  border-width: medium; /* 中等边框 */
  border-width: thick; /* 粗边框 */

  /* 边框颜色 */
  border-color: #333; /* 十六进制 */
  border-color: red; /* 颜色名 */
  border-color: rgb(255, 0, 0); /* RGB */
  border-color: rgba(255, 0, 0, 0.5); /* RGBA */
  border-color: transparent; /* 透明 */
}

3.4.2 简写属性

css

.border-shorthand {
  /* 完整简写：宽度 样式 颜色 */
  border: 2px solid #333;

  /* 单边设置 */
  border-top: 1px solid red;
  border-right: 2px dashed blue;
  border-bottom: 3px dotted green;
  border-left: 4px double orange;

  /* 分别设置各边的各属性 */
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: red;

  /* 统一设置某一属性 */
  border-width: 1px 2px 3px 4px; /* 上 右 下 左 */
  border-style: solid dashed; /* 上下 左右 */
  border-color: red blue green; /* 上 左右 下 */
}

3.4.3 重要概念

边框盒（border-box）：内容区 + 内边距 + 边框
边框样式是必需的，否则边框不会显示
边框会增加元素的实际占用空间

3.5 外边距（Margin）

外边距是边框外围的空白区域，用于控制元素与其他元素之间的距离。

3.5.1 基本语法

css

.margin-example {
  /* 单独设置各边外边距 */
  margin-top: 10px; /* 上外边距 */
  margin-right: 15px; /* 右外边距 */
  margin-bottom: 10px; /* 下外边距 */
  margin-left: 15px; /* 左外边距 */

  /* 简写属性（语法同padding） */
  margin: 10px 15px 10px 15px; /* 上 右 下 左 */
  margin: 10px 15px 20px; /* 上 左右 下 */
  margin: 10px 15px; /* 上下 左右 */
  margin: 10px; /* 四边相同 */
}

3.5.2 特殊值

css

.margin-special {
  /* 负值外边距 */
  margin-top: -10px; /* 向上移动 */
  margin-left: -20px; /* 向左移动 */

  /* 自动外边距（水平居中） */
  margin: 0 auto; /* 上下0，左右自动吸收包含块剩余空间 */
  margin-left: auto;
  margin-right: auto;

  /* 百分比外边距 */
  margin: 5%; /* 相对于包含块宽度 */
}

4. 盒模型计算

4.1 box-sizing 属性

box-sizing 属性决定了 width 和 height 的计算方式。

4.1.1 content-box（默认值）

css

.content-box {
  box-sizing: content-box; /* 默认值 */
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;

  /* 实际占用空间计算：
     * 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
     * 总宽度 = 200 + 20 + 20 + 5 + 5 + 10 + 10 = 270px
     * 
     * 元素盒子宽度 = width + padding-left + padding-right + border-left + border-right
     * 元素盒子宽度 = 200 + 20 + 20 + 5 + 5 = 250px
     */
}

4.1.2 border-box

css

.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;

  /* 实际占用空间计算：
     * 总宽度 = width + margin-left + margin-right
     * 总宽度 = 200 + 10 + 10 = 220px
     * 
     * 内容区宽度 = width - padding-left - padding-right - border-left - border-right
     * 内容区宽度 = 200 - 20 - 20 - 5 - 5 = 150px
     */
}

4.1.3 全局设置

css

/* 推荐的全局设置 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 或者更保守的设置 */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

5. 最佳实践

5.1 盒模型选择

css

/* 推荐：全局使用border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 优点：
 * 1. 更直观的尺寸控制
 * 2. 更容易实现响应式布局
 * 3. 避免宽度计算错误
 * 4. 更符合设计师的思维模式
 */

/* 特殊情况下使用content-box */
.special-content {
  box-sizing: content-box;
  /* 当需要内容区域有固定尺寸时 */
}

✨CSS 盒模型 👌 ​

1. 概述 ​

1.1 盒模型定义 ​

2. 盒子类型 ​

2.1 基本分类 ​

2.2 详细对比 ​

3. 盒子的组成部分 ​

3.1 整体结构 ​

3.2 内容区（Content） ​

3.2.1 相关属性 ​

3.2.2 重要概念 ​

3.3 内边距（Padding） ​

3.3.1 基本语法 ​

3.3.2 特殊值和单位 ​

3.3.3 重要概念 ​

3.4 边框（Border） ​

3.4.1 边框三要素 ​

3.4.2 简写属性 ​

3.4.3 重要概念 ​

3.5 外边距（Margin） ​

3.5.1 基本语法 ​

3.5.2 特殊值 ​

4. 盒模型计算 ​

4.1 box-sizing 属性 ​

4.1.1 content-box（默认值） ​

4.1.2 border-box ​

4.1.3 全局设置 ​

5. 最佳实践 ​

5.1 盒模型选择 ​