码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-12-30 19:10:23      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:页面   log   image   shadow   body   ali   rgba   阴影   img   

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高级技巧汇总

标签:页面   log   image   shadow   body   ali   rgba   阴影   img   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!