css小技巧

1.尽量使用padding代替margin

    所有毗邻的两个或多个盒元素的margin将会合并为一个margin共享

    毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或者border分隔

2.position:fixed降级问题

    如果父元素中有使用transform,fixed的效果会降级为absolute

     使用fixed的直接父元素的高度和屏幕的高度相同时fixed和absolute的表现效果是一样的，如果父

    元素存在滚动的情况，就加上overflow-y:auto

3. 合理使用 px | em | rem | % 等单位

       px : 比较小的图案  rem 转 px 会存在精度丢失问题  

       em

       rem  CSS3 新增的一个相对单位（root em），相对 HTML 根元素的字体大小的值

                 字体大小

         em  相对当前元素的字体大小 line-height 建议使用 em   首行缩进两个字符

    视口单位 vw | vh

          vw: 1vw = 视口宽度的 1%

           vh: 1vh = 视口高度的 1%

4. 1px方案

      使用伪类 + transform （这个方案在一些版本较低的机型也是会出现粗细不均、细线消失断裂的兼容性问题）    

border_bottom {

overflow: hidden;

position: relative;

border: none!important;

}

.border_bottom:after {

content: ".";

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 1px;

background-color: #d4d6d7;

-webkit-transform-origin: 0 0;

transform-origin: 0 0;

-webkit-transform: scaleY(0.5);

transform: scaleY(0.5);

}

使用 box-shadow 模拟（这个方案基本可以满足所有场景，不过有个缺点也就是颜色会变浅）

border_bottom {

box-shadow: inset 0px -1px 1px -1px #d4d6d7;

}

 

5.  从 html 元素继承 box-sizing               

html {

box-sizing: border-box;

}

*, *:before, *:after {

box-sizing: inherit;

}