CSS之盒模型

盒模型概念

浏览器盒模型（Box Model）是CSS中的基本概念，它描述了元素在布局过程中如何占据空间。盒模型由内容（content）、内边距（padding）、边框（border）、和外边距（margin）四个部分组成。分为标准盒模型 和 IE盒模型 。

• 标准盒模型（W3C盒模型）：在这个模型中，元素的总宽度等于左右margin + 左右border + 左右padding + width，总高度等同于上下margin + 上下border + 上下padding + height的和。

  盒宽度=内容宽度（content）+ border + padding + margin

• IE盒模型：在这个模型中，宽度和高度不仅包括内容的尺寸，还包括内边距和边框。这意味着，元素的实际宽度等于width（内容宽度 + 左右内边距 + 左右边框），高度同理。

  盒宽度=内容宽度（content+border+padding）+ margin

盒模型设置

通过CSS的box-sizing属性，可以在标准盒模型与IE盒模型之间进行切换。

• content-box（默认值）：应用标准盒模型，元素的宽度和高度只包括内容区域。
• border-box：应用IE盒模型，元素的宽度和高度还包括内边距和边框。

举个例子

css代码示例

 <body>
    <div class="content-box base-box"></div>
    <div class="border-box base-box"></div>
  </body>
  <style>
    .base-box {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 2px solid red;
      margin: 5px;
    }

    .content-box {
      box-sizing: content-box;
    }

    .border-box {
      box-sizing: border-box;
    }
  </style>

渲染示例

设置为content-box时，元素宽度：100 + 10 x 2 + 2 x 2 = 124；设置为100最终是124。

设置为border-box时，元素宽度：76 + 10 x 2 + 2 x 2 = 100；设置为100就是100。