盒模型
盒模型分为两种:
content-box:内容盒——内容是盒子的边界
border-box:边框盒——边框是盒子的边界
我们通过代码来查看这两者的区别:
首先是content-box,content-box的width就是内容的宽度,通过下图可以验证这点。
border-box的width是:内容宽度+padding+border,下图中的width是这么算的:
width+左右padding+左右border=100+10+10+5+5=130。
外边距合并
外边距合并只在垂直方向有效，合并后的高度等于两个值中的最大值。 常见的合并情况是:
1.相邻兄弟合并
2.父子元素合并
相邻兄弟元素
两个兄弟元素之间，外边距会取两个元素外边距的最大值
上图的外边距是20px
父子元素
父子元素可分为:
- 第一个子元素的上外边距和父元素的上外边距进行合并
- 最后一个子元素的下外边距和父元素的下外边距进行合并
这两种情况，最终显示出来的结果都是取二者中的最大值。
