CSS盒模型概念

CSS盒模型（Box Model）是CSS布局的核心概念，每个元素都被视为一个矩形盒子。

组成部分

+------------------------------------------+
|                margin                    |
|   +----------------------------------+   |
|   |            border                |   |
|   |   +--------------------------+   |   |
|   |   |        padding           |   |   |
|   |   |   +------------------+   |   |   |
|   |   |   |    content       |   |   |   |
|   |   |   +------------------+   |   |   |
|   |   +--------------------------+   |   |
|   +----------------------------------+   |
+------------------------------------------+

四个区域

尺寸计算

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

/* 标准盒模型（content-box）实际占用空间 */
/* 宽度 = 200 + 20*2 + 5*2 + 10*2 = 270px */
/* 高度 = 100 + 20*2 + 5*2 + 10*2 = 170px */

盒模型类型

/* 标准盒模型（默认） */
.box {
  box-sizing: content-box;
  /* width/height = content */
}

/* IE盒模型（替代盒模型） */
.box {
  box-sizing: border-box;
  /* width/height = content + padding + border */
}

可视化盒模型属性

/* 查看元素盒模型 */
* {
  outline: 1px solid red;
}

注意：outline 不占用空间，不影响布局，适合调试。

要点总结

• 盒模型由 content、padding、border、margin 组成
• box-sizing 决定宽高计算方式
• 标准盒模型的 width/height 仅指内容区
• margin 在盒模型外部，不参与宽高计算

存放路径：articles/CSS/入门/CSS盒模型/CSS盒模型概念.md