CSS盒模型

标准盒模型，默认浏览器会使用标准模型

• Content : 这个区域是用来显示内容，大小可以通过设置 width 和 height.
• Padding : 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
• Border : 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
• Margin : 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

浅理解一下，标准盒模型就像一个快递，content就是你买的物品，padding就是物品外面的泡沫，border就是你的快递盒子，margin就是快递盒子上的透明胶带。 

所以盒子的大小=content+padding+border

---

举个栗子

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}

盒子的宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)