两种盒模型

content-box 内容盒：内容就是盒子的边界
border-box 边框盒：边框才是盒子的边界

举例说明：

  <div class="content-box">
    内容盒
  </div>
  <div class="border-box">
    边框盒
  </div>

 .content-box {
  margin:25px;
  border: 5px solid red;
  padding: 10px;
  box-sizing: content-box;
  width: 100px;
}

.border-box {
  margin:25px;
  border: 5px solid red;
  padding: 10px;
  box-sizing: border-box;
  width:100px;
}

效果图：

虽然都设置了相同的宽度为100Px，但可以看到两种盒模型的宽度是不同的

内容盒的盒模型：只有内容宽度是100px,

边框盒的盒模型：padding + border + content = 100px

综上可得出公式：

content-box： width = 内容宽度
border-box： width = 内容宽度 + padding + border

请简述 CSS 盒模型是什么

CSS 盒模型有两种，一种是 content-box 一种是 border-box。
content-box 的宽度 width 表示内容区的宽度，不包含 padding 和 border；
border-box 的宽度 width 表示内容区 + padding + border 的总和。
一般优先使用border-box。