CSS盒模型理解
CSS 盒模型是CSS最核心的基础知识，理解了这个重要的概念才能更好的排版，才能对页面更好的布局。
- CSS盒模型模型概念
CSS盒模型包括content（元素内容）、padding(内边距)、border(边框）和margin(外边距)。CSS盒模型有两种：content-box和border-box。content-box width=内容宽度，border-box width=内容宽度+padding+border。具体如图：
2.CSS外边距合并
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。如图：
3.如何阻止父子margin合并
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有三个：
- 给父元素加边框border
- 给父元素设置padding值
- 父元素添加 overflow：hidden
