css小技巧（一）

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;
  }

1. 指定background-size为雪碧图的等比例缩放后的大小，
2. 通过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;