css奇技淫巧（1、減小重複的代碼）

引言：
有可能你會在你的css佈局中這麼寫：

.text{
    font-size: 20px;
    line-height: 20px;
    color: #ffffff;
    background: #3397ff;
    margin-top: 40px;
    width: 200px;
    border: 1px solid #3397ff;
 }

<div class="box">
    <p class="text">css3 奇技淫巧</p>
</div>

這種狀況要是 font-size 改變，將會順帶須要改動幾處代碼，line-height，margin-top，width等

一、使用rem或em

em 是相對於父元素的font-size 作出改變的

.box{
        font-size: 20px;
    }
    .text{
        font-size: 1em;
        line-height: 1em;
        color: #ffffff;
        background: #3397ff;
        margin-top: 2em;
        width: 20em;
        border: 1px solid #3397ff;
    }

rem是相對於html的font-size 作出改變的

body,html {
        font-size: 20px;
    }
    .text{
        font-size: 1em;
        line-height: 1em;
        color: #ffffff;
        background: #3397ff;
        margin-top: 2em;
        width: 20em;
        border: 1px solid #3397ff;
    }

二、使用 currentColor

currentColor 能夠說是css的一個變量,會被解析爲 clolor 的一個值,因此下面咱們就能夠給跟
color一樣值使用currentColor，來減小之後代碼變更改動的地方:

.text{
        color: #3397ff;
        border: 1px solid currentColor;
    }

三、使用 inherit

inherit繼承的意思，它會繼承來着父元素的對應值

.box{
        font-size: 20px;
        color: #3397ff;
        background: #333333;
        border: 1px solid currentColor;
    }
    .text{
        line-height: 2em;
        margin-top: 2em;
        width: 20em;
        color:inherit;
        background:inherit;
        border:inherit;
    }

四、使用預處理器

@mixin borderRadius($radius) {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        -ms-border-radius: $radius;
        -o-border-radius: $radius;
        border-radius: $radius;
    }