什么是盒模型？

---

盒模型：box model。div和span是最常见的两个盒子。图片、表单元素等这些可以看做文本，它们并不是盒子。

---

1.盒子中的区域

一个盒子主要的属性有5个：width、height、margin、padding、border。

• width 内容的宽（标准盒模型下，不是盒子的宽）。
• height 内容的高 （标准盒模型下，不是盒子的高）。
• margin 外边距。
• padding 内边距。
• border 边框。

2.宽高

标准盒模型下，我们设置的宽和高，是内容的宽和高，并不包含边框、内边距和外边距。

• 盒子占有的宽=内容的宽+左右内边距+左右边框。
• 盒子占有的高=内容的高+上下内边距+上下边框。
  假如：一个盒子的宽为500px、边框为1px、内边距为20px， 则内容的宽为：500-40-2=458px。

【注意点】

• 盒子的宽如果不设置的话，默认为父盒子的100%。
• 盒子的高如果不设置的话，默认为内容的高度。
• 一些情况下（盒子中的内容）不确定的时候，不需要给盒子设置高度，而是用内容去撑开高度。

未完 待更新…