持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情
1.盒子模型
HTML中的每一个元素都可以看做是一个盒子，如下图所示，可以具备这4个属性：
内容(content)
元素的内容width/height
内边距(padding)
元素和内容之间的间距
边框(border)
元素自己的边框
外边距(margin)
元素和其他元素之间的间距
2.盒子模型的四边
因为盒子有四边,所以margin/padding/border都包括top/right/bottom/left四个边:
（1）内容---宽度和高度
设置内容是通过宽度和高度设置的：
宽度设置:width
高度设置: height
注意:对于行内级非替换元素来说,设置宽高是无效的!
另外我们还可以设置如下属性:
min-width:最小宽度，无论内容多少，宽度都大于或等于min-width
max-width:最大宽度，无论内容多少，宽度都小于或等于max-width
移动端适配时，可以设置最大宽度和最小宽度;
下面两个属性不常用:
min-height:最小高度，无论内容多少，高度都大于或等于min-height
max-height:最大高度，无论内容多少，高度都小于或等于max-height
（2）内边距---padding
padding属性用于设置盒子的内边距,通常用于设置边框和内容之间的间距;
padding包括四个方向,所以有如下的取值:
padding-top: 上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
padding单独编写是一个缩写属性:
padding-top、 padding-right. padding-bottom. padding-left的简写属性
padding缩写属性是从零点钟方向开始,沿着顺时针转动的,也就是上右下左;
padding并非必须是四个值,也可以有其他值;
（3）边框---border
设置边框的方式
边框宽度
border-top-width、border-right-width、border-bottom-width、border-left-width
border-width是上面4个属性的简写属性
边框颜色
border-top-color、border-right-color、border-bottom-color、border-left-color
border-color是上面4个属性的简写属性
边框样式
border-top-style、border-right-style、border-bottom-style、border-left-style
border-style是上面4个属性的简写属性
边框的样式设置值
边框的样式有很多,我们可以了解如下的几个:
groove:凹槽,沟槽,边框看上去好象是雕刻在画布之内
ridge:山脊,和grove相反，边框看上去好象是从画布中凸出来
（4）外边距---margin
-0上下margin的传递
margin-top传递
如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题?
给父元素设置padding-top\padding-bottom
给父元素设置border
触发BFC:设置overflow为auto
-1.上下margin的折叠
垂直方向上相邻的2个margin (margin-top、margin-bottom)有可能会合并为1个margin，这种现象叫做collapse(折叠)
水平方向上的margin (margin-left、margin-right)永远不会collapse
折叠后最终值的计算规则
两个值进行比较，取较大的值
如何防止margin collapse?
只设置其中一个元素的margin
