首页 > Web开发 > 详细

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

时间:2017-12-30 18:55:03      阅读:205      评论:0      收藏:0      [点我收藏+]

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;

    }

看情况而定,不是很实用;

 

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

原文:https://www.cnblogs.com/QianBoy/p/8150671.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!