持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第30天，点击查看活动详情
上下margin的传递
margin-top传递：如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素。
margin-bottom传递：如果块级元素的底部线和父元素的底部线重写，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素。
如何防止出现传递问题？
- 给父元素设置padding-top\padding-bottom
- 给父元素设置border
- 触发BFC: 设置overflow为auto
margin一般是用来设置兄弟元素之间的间距。padding一般是用来设置父子元素之间的间距。
上下margin的折叠
垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）。水平方向上的margin（margin-left、margin-right）永远不会collapse。折叠后最终值的计算规则，两个值进行比较，取较大的值。那么如何防止margin collapse呢？只设置其中一个元素的margin。
外轮廓 - outline
outline表示元素的外轮廓，不占用空间，默认显示在border的外面。
outline相关属性有：
- outline-width: 外轮廓的宽度
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color: 外轮廓的颜色
- outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似
盒子阴影 – box-shadow
box-shadow属性可以设置一个或者多个阴影。每个阴影用<shadow>表示，多个阴影之间用逗号,隔开，从前到后叠加。
<shadow>的常见格式如下：
- 第1个
<length>：offset-x, 水平方向的偏移，正数往右偏移 - 第2个
<length>：offset-y, 垂直方向的偏移，正数往下偏移 - 第3个
<length>：blur-radius, 模糊半径 - 第4个
<length>：spread-radius, 延伸半径 <color>：阴影的颜色，如果没有设置，就跟随color属性的颜色- inset：外框阴影变成内框阴影
CSS属性 - box-sizing
box-sizing用来设置盒子模型中宽高的行为。
- content-box：padding、border都布置在width、height外边
- border-box：padding、border都布置在width、height里边
box-sizing: content-box
元素的实际占用宽度 = border + padding + width
元素的实际占用高度 = border + padding + height
box-sizing: border-box
元素的实际占用宽度 = width
元素的实际占用高度 = height
元素的水平居中方案
在一些需求中，需要元素在父元素中水平居中显示（父元素一般都是块级元素、inline-block）。
行内级元素(包括inline-block元素)：水平居中：在父元素中设置text-align: center。
块级元素：水平居中：margin: 0 auto
