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

Posted 2020-10-19 qianboy

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;

    }

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