你可能還不知的 7 個 CSS 好用的屬性

做者：Mustapha Aouas 譯者：前端小智來源：devcss

點贊再看，養成習慣html

本文 GitHub github.com/qq449245884… 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。前端

學習CSS是構建好看網頁的一種方式。可是，在學習過程當中，咱們傾向於（大部分時間）限制本身，一遍又一遍地使用相同的屬性。畢竟，咱們是一種習慣性的動物，咱們會使用本身習慣且熟悉的東西。git

所以，在這篇文章中，向你介紹7個比較少見且好用的 CSS 屬性，但願對你有所幫助。github

1. vertical-align

CSS 的屬性 vertical-align 用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。面試

baseline: 使元素的基線與父元素的基線對齊。HTML規範沒有詳細說明部分可替換元素的基線，如<textarea> ，這意味着這些元素使用此值的表現因瀏覽器而異。微信

**sub：**使元素的基線與父元素的下標基線對齊。markdown

**super：**使元素的基線與父元素的上標基線對齊。編輯器

**text-top：**使元素的基線與父元素的上標基線對齊。

**text-bottom：**使元素的底部與父元素的字體底部對齊。

**middle：**使元素的中部與父元素的基線加上父元素x-height（譯註：x高度）的一半對齊。

注意 vertical-align 只對行內元素、表格單元格元素生效：不能用它垂直對齊塊級元素。

資源:MDN。

2. writing-mode

writing-mode 屬性定義了文本水平或垂直排布以及在塊級元素中文本的行進方向。爲整個文檔設置書時，應在根元素上設置它（對於 HTML 文檔應該在 html 元素上設置）。它採用如下值之一horizontal-tb (default) | vertical-rl | vertical-lr。

**horizontal-tb：**對於左對齊(ltr)腳本，內容從左到右水平流動。對於右對齊(rtr)腳本，內容從右到左水平流動。下一水平行位於上一行下方。

**vertical-rl：**對於左對齊(ltr)腳本，內容從上到下垂直流動，下一垂直行位於上一行左側。對於右對齊(rtr)腳本，內容從下到上垂直流動，下一垂直行位於上一行右側。

**vertical-lr：**對於左對齊(ltr)腳本，內容從上到下垂直流動，下一垂直行位於上一行右側。對於右對齊(rtr)腳本，內容從下到上垂直流動，下一垂直行位於上一行左側。

資源:MDN。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

3. font-variant-numeric

font-variant-numeric CSS屬性控制數字，分數和序號標記的替代字形的使用。

此屬性對於設置數字樣式頗有用。根據狀況，你可能但願顯示老式的數字或帶有斜槓的零，對於這些狀況，font-feature-settings頗有用。

請注意，font-variant-numeric是font-feature-settings組屬性的一部分。諸如font-variant-caps或font-variant-ligatures之類的屬性也屬於該組。還要注意，像全部font-feature-settings屬性同樣，你的字體須要實現上述功能才能正常工做。我使用的字體是Fira Sans。

資源:MDN。

4. user-select

每當咱們有不想讓用戶選擇的文本，或者相反，若是發生了雙擊或上下文單擊，但願選擇全部文本時，user-select屬性將很是有用。

此屬性採用如下值之一：none | auto | text | all。

**none：**元素及其子元素的文本不可選中。請注意這個Selection 對象能夠包含這些元素。從Firefox 21開始， none 表現的像 -moz-none，所以可使用 -moz-user-select: text 在子元素上從新啓用選擇。

auto auto 的具體取值取決於一系列條件，具體以下：

在 ::before 和 ::after 僞元素上，採用的屬性值是 none
若是元素是可編輯元素，則採用的屬性值是 contain
不然，若是此元素的父元素的 user-select 採用的屬性值爲 all，則該元素採用的屬性值也爲 all
不然，若是此元素的父元素的 user-select 採用的屬性值爲none，則該元素採用的屬性值也爲 none
不然，採用的屬性值爲text

**text：**用戶能夠選擇文本。 **all：**在一個HTML編輯器中，當雙擊子元素或者上下文時，那麼包含該子元素的最頂層元素也會被選中。

資源:MDN。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

5. clip-path

clip-path CSS 屬性能夠建立一個只有元素的部分區域能夠顯示的剪切區域。區域內的部分顯示，區域外的隱藏。剪切區域是被引用內嵌的URL定義的路徑或者外部svg的路徑，或者做爲一個形狀例如circle()。clip-path屬性代替瞭如今已經棄用的剪切 clip屬性。

此屬性採用如下值之一:circle() | ellipse() | polygon() | path() | url()。

因爲這是對該屬性的介紹，所以，這裏不會深刻研究每一個值。

我使用最多的兩個值是circle和polygon。circle(radius at pair)值有兩個參數，第一個參數是圓的半徑，第二個參數是表示圓心的點。polygon(pair, pair, pair ...)值取3個或更多的點，表示一個三角形、一個矩形等等。

6. shape-outside

shape-outside的CSS 屬性定義了一個能夠是非矩形的形狀，相鄰的內聯內容應圍繞該形狀進行包裝。默認狀況下，內聯內容包圍其邊距框; shape-outside提供了一種自定義此包裝的方法，能夠將文本包裝在複雜對象周圍而不是簡單的框中。它採用與clip-path相同的值。

clip-path定義用戶如何查看元素，shape-outside定義其餘HTML元素如何查看元素。

資源:MDN。

7. background-clip

最後，backgroundclip CSS屬性設置元素的背景是否擴展到其border 、padding 或content 框之下。

此屬性採用如下值之一：border-box (default) | padding-box | content-box | text

資源:MDN。

總結

下圖是結合上面 7 個屬性實現的佈局，讓你們加深一下印象。

若是你還知道一些新奇的屬性，歡迎留言。

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：dev.to/mustapha/7-…

交流

文章每週持續更新，能夠微信搜索「大遷世界」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub github.com/qq449245884… 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。