前端開發須要知道的 10 個 CSS 技巧

我的以爲 CSS 是每一個前端開發人員都必須掌握的基礎，以完成相應的交互和終端設備的響應。在項目開發中，有些容易被忽略的小問題帶來項目後期的膠水代碼。本文總結一些項目開發中CSS的10個小技巧。css

1.使用相對單位

一般咱們在項目開發中，使用px做爲尺寸的單位，而不是使用相對單位，如：rem、em等。在萬物互聯的時代，最好的方式是相對單位rem、vh、vw等現代 CSS 佈局（如 flexbox 和 grid）方式，最大限度的支持各類終端設備。html

絕對單位

px ：是一個絕對單位，主要是由於它是固定的，不會根據任何其餘元素的測量而改變。

相對單位

vw（viewpoint width）：相對於視口的寬度
vh（viewpoint height）：相對於視口的高度
rem（font size of the root element）：相對於根 ( ) 元素 (默認字體大小一般爲 16px )
em（font size of the element）：相對於父元素
% ：相對於父元素

/* 不提倡 */
.wrap {
    font-size: 14px;
    margin: 10px;
    line-height: 24px;
}
/* 建議 */
.wrap {
    font-size: 1.2rem;
    margin: 0.5rem;
    line-height: 1.6em;
}
複製代碼

2. 代碼複用

不少開發人員在談到CSS時都以爲代碼重複性很高，在項目開發中這不是一個好的作法。好在如今有CSS預處理器（sass/scss、less、stylus、Turbine），可以讓咱們能夠更好的規劃CSS代碼，提升其複用性。前端

固然須要提升代碼複用，仍是須要必定的CSS的基礎，來設計好代碼結構，以下：git

/* 不提倡 */
.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;
}
複製代碼

3.CSS重置

每一個瀏覽器都有本身的默認樣式，所以，當網頁不包含CSS時，瀏覽器會爲文本添加一些基本的默認樣式、填充、邊距等。github

能夠經過使用通用選擇器 * 重置 padding、margin、box-sizing 和 font-family 來實現這一點。web

像這樣：瀏覽器

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
ul,
li {
    list-style: none;
}
複製代碼

不過這些問題如今基本都被框架解決了，對於初學者建議能夠模仿但不建議一開始就上框架。sass

4.不使用顏色名稱

不要使用red、blue等顏色名稱，相反，建議使用顏色的十六進制值。框架

爲何呢？由於當使用像 red 這樣的顏色名稱時，在不一樣的瀏覽器或者設備中顯示會有所不一樣。less

/* 不提倡 */
.container {
    background-color: red;
}

/* 建議 */
.container {
    background-color: #ff0000;
}
複製代碼

5.使用簡寫屬性

在CSS中，多用簡寫屬性，少用單獨屬性，具體哪些是簡寫屬性，哪些是單獨屬性，下面列舉一下常見的一些屬性，是以一般項目爲原則。

簡寫屬性

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

單獨屬性

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;
}
複製代碼

6.文本截取

在項目開發中，有些列表只須要顯示一行文字，有些列表須要顯示固定函數的文字，過去經過字符截取的方式來實現，但存在截取不統一（文本內容不一樣英文、中文、標點符號等），再加上如今各類終端的適配，不足就被放大了。

如今最佳的方式是經過CSS來實現，在文本最後增長省略號（…）。

單行截取

元素必須是 block 或 inline-block，若是溢出被隱藏，則文本溢出不起做用，而且元素必須具備定義的寬度或最大寬度集。

p {
    display: inline-block;
    max-width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
複製代碼

多行截取

p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 須要顯示的行數 */
    overflow: hidden;
}
複製代碼

7.垂直居中

垂直居中是一個很常見的需求，有不少實現方式，在伸縮容器內的任何東西垂直居中：

.flex-vertically-center {
    display: flex;
    align-items: center;
}
複製代碼

inline、inline-block、table-cell 塊垂直對齊：

img {
    /* 只對block有效 */
    display: inline-block;
    vertical-align: middle;
}
複製代碼

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

.container {
    position: relative;
}
.sub-container {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
複製代碼

8.水平居中

與垂直對齊相似，不過水平居中更容易一點。

塊居中

.block-element {
    display: block;
    margin: 0 auto;
}
複製代碼

內聯或內聯塊文本居中

.container {
    text-align: center;
}
複製代碼

在相對容器內水平居中絕對元素：

.container {
    position: relative;
}
.sub-container {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
}
複製代碼

flex 容器內的任何內容水平居中：

.flex-vertically-center {
    display: flex;
    justify-content: center;
}
複製代碼

9.設置下一個或上一個兄弟元素樣式

對元素前面和後面的元素進行樣式設置，在項目開發中頗有用。例如10個按鈕，當前按鈕下一個及下一個的兄弟元素設置不一樣的顏色。

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>
複製代碼

css代碼：

.current ~ button {
    background-color: #000;
    color: #ffffff;
}
.current {
    background-color: #ff0000;
}
.current + button {
    background-color: #333;
}
複製代碼

效果以下：

接下來設置當前按鈕前面樣式，css代碼以下：

button {
    padding: 10px 15px;
    border: 1px solid #444444;
    font-size: 12px;
    background-color: #ff0000;
    color: #000;
}
.current {
    background-color: #000;
    color: #fff;
}
.current ~ button {
    background: initial;
}
.container {
    width: 1000px;
    margin: 50px auto;
    text-align: center;
}
複製代碼

效果以下：

10.寬高比

若是想讓盒子容器有必定的寬高比，如視頻播放器尺寸，能夠用幾種方法來實現，其中有一種方法最直觀。可使用 calc 函數設置頂部填充 (height * width) / 100%。

以下，建立一個 720px 寬的 16 x 9 矩形：

html代碼：

<div class="container">
    <div class="box"></div>
</div>
複製代碼

css代碼：

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

效果以下

還可使用 after 僞元素來建立比例大小。

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

上面的方案會致使裏面全部的元素都必須向上移動或須要使用絕對定位。不過好消息是，CSS增長了aspect-ratio屬性。

aspect-ratio 爲box容器規定了一個期待的縱橫比，這個縱橫比能夠用來計算自動尺寸以及爲其餘佈局函數服務。

總結

CSS 既有趣又強大，並且還在不斷地成長和改進。

若是以上文章對您有幫助，請給咱們的開源項目點點star： http://github.crmeb.net/u/defu 不勝感激！

來自「開源世界」，連接：https://ym.baisou.ltd/post/727.html，如需轉載，請註明出處，不然將追究法律責任。