CSS中灵活使用:before和:after

这里我们将第一个div和第二个div位置放到一起，方便看z-index的效果。以上代码的样式是紫色的正方形里面有个白色的小正方形。因为小正方形的z-index大于大正方形的z-index，所以能显示出，当我们把.first-div的z-index设置为3，这时候就看不到白色的小正方形了，它被紫色的大正方形无情的挡掉了…

zoom 元素缩放比例

zoom适用于所有元素，用于设置或检索对象的缩放比例，对应的脚本特性为zoom，原比例的值是1。

代码：

CSS Code复制内容到剪贴板

<style>   

    .first-div{   

        width: 100px;   

        height: 100px;   

        background: purple;   

        zoom:1.5;   

        float: left  

    }   

    .second-div{   

        width: 100px;   

        height: 100px;   

        background: black;   

        zoom:1;   

        float:left  

    }   

    .third-div{   

        width: 100px;   

        height: 100px;   

        background: red;   

        zoom:.5;   

        float:left  

    }   

</style>   

<div class="first-div"></div>   

<div class="second-div"></div>   

<div class="third-div"></div>  

以上代码将会展示的依次是紫色-黑色-红色的div，大小分别是100px的1.5倍，1倍，0.5倍。

em 和 rem 是什么

1em等于当前的字体尺寸，数值的改变意味着字体大小的调整。em 有继承这个特性，也就是说，外部父元素定义了字体的em大小，内部子元素会继承这一属性的样式。

rem = root em 。顾名思义，root即根部的，顶部的。也就是根部的em，这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。

代码：

CSS Code复制内容到剪贴板

<style>   

    body{   

      font-size: 12px;     

    }   

    /*html{  

        font-size: 12px;  

    }*/  

    .first-div{   

        width: 200px;   

        height: 100px;   

        font-size: 1em;   

        float: left  

    }   

    .second-div{   

        width: 200px;   

        height: 100px;   

        font-size: 2em;   

        float:left  

    }   

    .third-div{   

        width: 200px;   

        height: 100px;   

        font-size: 1rem;   

        float:left  

    }   

    .fourth-div{   

        width: 200px;   

        height: 100px;   

        font-size: 2rem;   

        float:left  

    }   

</style>   

<div class="first-div">Hello World</div>   

<div class="second-div">Hello World</div>   

<div class="third-div">Hello World</div>   

<div class="fourth-div">Hello World</div>   

以上代码分别展示了不同大小的字体，em和rem的区别可以通过仅仅注释body字体样式和html字体样式来看看他们之间的差别。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!