博客站

盒模型（Box Model）是 CSS 中用于描述元素布局的基本概念。每个元素都被视为一个矩形盒子，这个盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。

盒模型的组成部分

1. 内容（Content）：元素的实际内容，如文本、图片等。
2. 内边距（Padding）：内容与边框之间的空间。
3. 边框（Border）：围绕内容和内边距的边框。
4. 外边距（Margin）：边框外的透明区域，用于控制元素与其他元素之间的距离。

标准盒模型（W3C Box Model）

在标准盒模型中，元素的宽度和高度仅包括内容区域。内边距、边框和外边距是额外添加的。

• 总宽度 = 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

怪异盒模型（IE Box Model）

在怪异盒模型（也称为 IE 盒模型）中，元素的宽度和高度包括内容、内边距和边框。外边距仍然是额外的。

• 总宽度 = width（包括 padding 和 border） + margin-left + margin-right
• 总高度 = height（包括 padding 和 border） + margin-top + margin-bottom

如何切换盒模型

CSS 提供了 box-sizing 属性来控制盒模型的计算方式。

• box-sizing: content-box;：标准盒模型（默认）。

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

  总宽度 = 200px (内容) + 20px (内边距) + 10px (边框) + 40px (外边距) = 270px

• box-sizing: border-box;：怪异盒模型。

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

  总宽度 = 200px (包括内容和内边距和边框) + 40px (外边距) = 240px

总结

• 标准盒模型：width 和 height 仅包括内容区域，内边距和边框是额外添加的。
• 怪异盒模型：width 和 height 包括内容、内边距和边框。
• box-sizing 属性：用于控制盒模型的计算方式，content-box 为标准盒模型，border-box 为怪异盒模型。

理解盒模型及其差异对于精确控制页面布局非常重要。