2017年总结的前端文章——CSS高级技巧汇总

1. 页面顶部阴影

body:before{
content: "";
position: fixed;
top:-10px;
left: 0;
width: 100%;
height: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,.8);
z-index: 100;
}

2. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

body {

line-height: 1;

}

line-height:1; 的意思是 根据该元素本身的字体大小 设置行高 比如该元素字体是15px line-height:1; 的行高就是15px; 

3. 所有一切都垂直居中

html, body {

height: 100%;

margin: 0;

}

body {

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-flex;

display: flex;

}

看情况而定，不是很实用；