CSS技巧二

作者: tiandashu | 来源:发表于2018-04-09 15:11 被阅读0次

    1.使用:not()选择器来决定表单是否显示边框

    //习惯写法:
    .nav li{
          border-right:1px solid #666;
    }
    .nav li:last-child{
          border-right:none;
    }
    //上面写法不好,可以这么简写(注意::not 不兼容ie8)
    .nav li:not(:last-child){
          border-right:1px solid #666;
    }
    
    

    2.为body的文本元素添加行高

    //不必为每一个p,h,元素逐一添加line-height,直接添加到body元素:
    body {
        line-height:1.5;
    }
    //文本元素可以很容易的继承body的样式
    

    3.使用逗号分隔列表

        ul > li:not(:last-child)::after{
              content:",";
        }
    

    4.使用“形似猫头鹰”的选择器

    //通用选择器(*)和相邻兄弟选择器(+)一起使用,效果非凡:
    * + * {
               margin-top:1.5em;
           }
    //文档流中的所有相邻兄弟元素都将设置margin-top
    

    5.利用flexbox自动设置间距

    *{
                margin: 0;
                padding: 0;
            }
            ul{
                display: flex;
                justify-content: space-between;
                width:500px;
                height:120px;
                border: 1px solid #000;
            }
            ul li{
                list-style: none;
                /*height:100px;*/
                background-color: teal;
                flex-basis: 23%;
            }
    
    <!--justify-content:不兼容IE11+,移动端可用 -->
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
    
        </ul>
    
    

    6.使用选择器:root来控制字体弹性

    //在响应式布局中,字体大小需要根据不同的视口进行调整,你可以计算字体大小根据视口高度的字体大小和高度,这时需要用到:root
    :root {
         font-size
         :calc(1vw+1vh+ .5vmin);
           }
    

    相关文章

      网友评论

        本文标题:CSS技巧二

        本文链接:https://www.haomeiwen.com/subject/bzophftx.html