個(gè)人覺(jué)得 CSS 是每個(gè)前端開(kāi)發(fā)人員都必須掌握的基礎(chǔ)，以完成相應(yīng)的交互和終端設(shè)備的響應(yīng)。在項(xiàng)目開(kāi)發(fā)中，有些容易被忽略的小問(wèn)題帶來(lái)項(xiàng)目后期的膠水代碼。本文總結(jié)一些項(xiàng)目開(kāi)發(fā)中 CSS 的 10 個(gè)小技巧。

1. 使用相對(duì)單位

通常我們?cè)陧?xiàng)目開(kāi)發(fā)中，使用 px 作為尺寸的單位，而不是使用相對(duì)單位，如：rem、em 等。在萬(wàn)物互聯(lián)的時(shí)代，最好的方式是相對(duì)單位 rem、vh、vw 等現(xiàn)代 CSS 布局（如 flexbox 和 grid）方式，最大限度的支持各種終端設(shè)備。

絕對(duì)單位

• px ：是一個(gè)絕對(duì)單位，主要是因?yàn)樗枪潭ǖ模粫?huì)根據(jù)任何其他元素的測(cè)量而改變。

相對(duì)單位

• vw（viewpoint width）：相對(duì)于視口的寬度

• vh（viewpoint height）：相對(duì)于視口的高度

• rem（font size of the root element）：相對(duì)于根 () 元素 (默認(rèn)字體大小通常為 16px)

• em（font size of the element）：相對(duì)于父元素

• % ：相對(duì)于父元素

/* 不提倡 */.wrap {    font-size: 14px;    margin: 10px;    line-height: 24px;
}/* 建議 */.wrap {    font-size: 1.2rem;    margin: 0.5rem;    line-height: 1.6em;
}復(fù)制代碼

2. 代碼復(fù)用

很多開(kāi)發(fā)人員在談到 CSS 時(shí)都覺(jué)得代碼重復(fù)性很高，在項(xiàng)目開(kāi)發(fā)中這不是一個(gè)好的做法。好在現(xiàn)在有 CSS 預(yù)處理器（sass/scss、less、stylus、Turbine），能夠讓我們可以更好的規(guī)劃 CSS 代碼，提高其復(fù)用性。

當(dāng)然需要提高代碼復(fù)用，還是需要一定的 CSS 的基礎(chǔ)，來(lái)設(shè)計(jì)好代碼結(jié)構(gòu)，如下：

/* 不提倡 */.container {    background-color: #efefef;    border-radius: 0.5rem;
}.sidebar {    background-color: #efefef;    border-radius: 0.5rem;
}/* 建議 */.container,.sidebar {    background-color: #efefef;    border-radius: 0.5rem;
}復(fù)制代碼

3.CSS 重置

每個(gè)瀏覽器都有自己的默認(rèn)樣式，因此，當(dāng)網(wǎng)頁(yè)不包含 CSS 時(shí)，瀏覽器會(huì)為文本添加一些基本的默認(rèn)樣式、填充、邊距等。

可以通過(guò)使用通用選擇器 * 重置 padding、margin、box-sizing 和 font-family 來(lái)實(shí)現(xiàn)這一點(diǎn)。

像這樣：

* {    padding: 0;    margin: 0;    box-sizing: border-box;    font-family: Arial, Helvetica, sans-serif;
}ul,li {    list-style: none;
}復(fù)制代碼

不過(guò)這些問(wèn)題現(xiàn)在基本都被框架解決了，對(duì)于初學(xué)者建議可以模仿但不建議一開(kāi)始就上框架。

4. 不使用顏色名稱

不要使用 red、blue 等顏色名稱，相反，建議使用顏色的十六進(jìn)制值。

為什么呢？因?yàn)楫?dāng)使用像 red 這樣的顏色名稱時(shí)，在不同的瀏覽器或者設(shè)備中顯示會(huì)有所不同。

/* 不提倡 */.container {    background-color: red;
}/* 建議 */.container {    background-color: #ff0000;
}復(fù)制代碼

5. 使用簡(jiǎn)寫屬性

在 CSS 中，多用簡(jiǎn)寫屬性，少用單獨(dú)屬性，具體哪些是簡(jiǎn)寫屬性，哪些是單獨(dú)屬性，下面列舉一下常見(jiàn)的一些屬性，是以通常項(xiàng)目為原則。

簡(jiǎn)寫屬性

background、font、 margin、padding、 border、 transition、 transform、 list-style、 border-radius

單獨(dú)屬性

rotate、scale、background-color、background-image、background-position、padding-left、padding-right、padding-top、padding-bottom、margin-left、margin-top、margin-right、margin-bottom、border-top、 border-right、 border-bottom、 border-left、 border-width、 border-color、 border-style、

/* 不提倡 */.container {    background-image: url(bg.png);    background-repeat: no-repeat;    background-position: center;
}/* 建議 */.container {    background: url(bg.png) no-repeat center;
}復(fù)制代碼

6. 文本截取

在項(xiàng)目開(kāi)發(fā)中，有些列表只需要顯示一行文字，有些列表需要顯示固定函數(shù)的文字，過(guò)去通過(guò)字符截取的方式來(lái)實(shí)現(xiàn)，但存在截取不統(tǒng)一（文本內(nèi)容不同英文、中文、標(biāo)點(diǎn)符號(hào)等），再加上現(xiàn)在各種終端的適配，不足就被放大了。

現(xiàn)在最佳的方式是通過(guò) CSS 來(lái)實(shí)現(xiàn)，在文本最后增加省略號(hào)（…）。

單行截取

元素必須是 block 或 inline-block，如果溢出被隱藏，則文本溢出不起作用，并且元素必須具有定義的寬度或最大寬度集。

p {    display: inline-block;    max-width: 300px;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;
}復(fù)制代碼

多行截取

p {    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 3; /* 需要顯示的行數(shù) */
    overflow: hidden;
}復(fù)制代碼

7. 垂直居中

垂直居中是一個(gè)很常見(jiàn)的需求，有很多實(shí)現(xiàn)方式，在伸縮容器內(nèi)的任何東西垂直居中：

.flex-vertically-center {    display: flex;    align-items: center;
}復(fù)制代碼

inline、inline-block、table-cell 塊垂直對(duì)齊：

img {    /* 只對(duì)block有效 */
    display: inline-block;    vertical-align: middle;
}復(fù)制代碼

相對(duì)容器中垂直居中的絕對(duì)元素，下面代碼是.sub-container 在.container 垂直居中：

.container {    position: relative;
}.sub-container {    position: absolute;    top: 50%;    transform: translateY(-50%);
}復(fù)制代碼

8. 水平居中

與垂直對(duì)齊類似，不過(guò)水平居中更容易一點(diǎn)。

塊居中

.block-element {    display: block;    margin: 0 auto;
}復(fù)制代碼

內(nèi)聯(lián)或內(nèi)聯(lián)塊文本居中

.container {    text-align: center;
}復(fù)制代碼

在相對(duì)容器內(nèi)水平居中絕對(duì)元素：

.container {    position: relative;
}.sub-container {    position: absolute;    top: 50%;    transform: translateX(-50%);
}復(fù)制代碼

flex 容器內(nèi)的任何內(nèi)容水平居中：

.flex-vertically-center {    display: flex;    justify-content: center;
}復(fù)制代碼

9. 設(shè)置下一個(gè)或上一個(gè)兄弟元素樣式

對(duì)元素前面和后面的元素進(jìn)行樣式設(shè)置，在項(xiàng)目開(kāi)發(fā)中很有用。例如 10 個(gè)按鈕，當(dāng)前按鈕下一個(gè)及下一個(gè)的兄弟元素設(shè)置不同的顏色。

html 代碼如下：

<div>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button class="current">current</button>
    <button>+ button</button>
    <button>~ button</button>
    <button>~ button</button>
    <button>~ button</button>
    <button>~ button</button></div>復(fù)制代碼

css 代碼：

.current ~ button {    background-color: #000;    color: #ffffff;
}.current {    background-color: #ff0000;
}.current + button {    background-color: #333;
}復(fù)制代碼

效果如下：

接下來(lái)設(shè)置當(dāng)前按鈕前面樣式，css 代碼如下：

button {    padding: 10px 15px;    border: 1px solid #444444;    font-size: 14px;    background-color: #ff0000;    color: #000;
}.current {    background-color: #000;    color: #fff;
}.current ~ button {    background: initial;
}.container {    width: 1000px;    margin: 50px auto;    text-align: center;
}復(fù)制代碼

效果如下：

10. 寬高比

如果想讓盒子容器有一定的寬高比，如視頻播放器尺寸，可以用幾種方法來(lái)實(shí)現(xiàn)，其中有一種方法最直觀。可以使用 calc 函數(shù)設(shè)置頂部填充 (height * width) / 100%。

如下，創(chuàng)建一個(gè) 720px 寬的 16 x 9 矩形：

html 代碼：

<div class="container">    <div class="box"></div></div>復(fù)制代碼

css 代碼：

.container {    width: 720px;
}.box {    padding-top: calc((9 / 16) * 100%);    background: #efefef;
}復(fù)制代碼

效果如下

還可以使用 after 偽元素來(lái)創(chuàng)建比例大小。

.box::after {    content: "";    display: block;    padding-top: calc((9 / 16) * 100%);    background: #eee;
}復(fù)制代碼

上面的方案會(huì)導(dǎo)致里面所有的元素都必須向上移動(dòng)或需要使用絕對(duì)定位。不過(guò)好消息是，CSS 增加了 aspect-ratio 屬性。

aspect-ratio 為 box 容器規(guī)定了一個(gè)期待的縱橫比，這個(gè)縱橫比可以用來(lái)計(jì)算自動(dòng)尺寸以及為其他布局函數(shù)服務(wù)。