outline, box-shadow,border 三者顺序
#box {
width: 200px;
height: 100px;
background: yellowgreen;
margin: 50px auto;
box-shadow: 0 0 0 10px #665;
outline: 4px solid pink;
border: 27px solid blue;
}
如代码演示：
outline,box-shadow都是用来‘装饰’border的，包裹border用的。outline,box-shadow本身不占用页面空间。两个人是平级的。
多层边框
box-shadow: 0 0 0 10px #665,
0 0 0 20px blue,
0 0 0 30px red;
外边距合并
发生特点： 1. 块级元素（不包括浮动元素和绝对定位元素） 2. 只发生在和当前文档流垂直的方向上（默认情况下文档流是水平的，writing-mode可以修改流方向）。
修复边距合并问题：
1. margin-top合并
1.1. 父元素设置为块状格式化上下文元素（overflow:hidden;float:left;position:absolute;）
1.2. 父元素设置border-top值
1.3. 父元素设置padding-top值
1.4. 父元素和第一个子元素之间添加内联元素进行分割。（对第一个元素添加display:inline-block/inline-flex/inline-table;)
2. margin-bottom合并
2.1. 父元素设置为块状格式化上下文元素
2.2. 父元素设置border-bottom值
2.3. 父元素设置padding-bottom值
2.4. 父元素设置height/min-height/max-height
最后记住边距合并其实对于排版来说其实是有一定的好处的。并不完全不可取。
雪碧图使用
.spite-bg {
width: 54px;
height: 54px;
border-radius: 100%;
background: url("../assets/img/index_spirit.png") no-repeat;
background-size: 54px 216px;
display: inline-block;
margin-bottom: 5px;
}
指定background-size为雪碧图的等比例缩放后的大小，通过background-positon:x y;来调整图片的显示位置，默认情况下坐标原点（图片左上角是 0% 0%。右下角是 100% 100%）
eg:
background-position: 0% 0%;
background-position:
0px 0px;
background-position:
top/center/bottom left/center/right;
