盒模型
CSS模型分为两种：一种是内容盒content-box（内容就是盒子边界），还有一种就是边框盒border-box（边框才是盒子边界）。
内容盒（content-box）
边框盒（border-box）
他们的区别是：content-box只包含content，而border-box包含到border，即多包含了border、内边距和内容。
简而言之，就是：
content-box width = 内容宽度
border-box width = 内容宽度 + padding + border
推荐使用border-box，因为这更符合直觉。
margin合并原则
margin合并原则，即外边距合并原则。
margin合并一共有两种情况：
1. 父子合并
如何阻止父子合并
- 设置
padding或border挡住 - 用
overflow:hidden挡住 - 用
display:flex
2. 兄弟合并
如何解决兄弟合并
- 兄弟合并其实是符合预期的
- 用
inling-block消除
