學習CSS是構建好看網頁的一種方式。 但是,在學習過程中,我們傾向於(大部分時間)限制自己,一遍又一遍地使用相同的屬性。 畢竟,我們是一種習慣性的動物,我們會使用自己習慣且熟悉的東西。
因此,在這篇文章中,向你介紹7
個 比較少見且好用的 CSS 屬性,希望對你有所幫助。
1. vertical-align
CSS 的屬性 vertical-align
用來指定行內元素(inline)或表格單元格(table-cell)元素的垂直對齊方式。
就像定義說的,這個屬性允許你垂直對齊文本。它對於順序指示器(st
, nd
等)、需要的輸入星號(*
)或沒有正確居中的圖標特別有用。vertical-align
取其中一個值:super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom
,或從基線開始的長度(px
,%
, em
, rem
等等)。
baseline: 使元素的基線與父元素的基線對齊。HTML規範沒有詳細說明部分可替換元素的基線,如<textarea>
,這意味着這些元素使用此值的表現因瀏覽器而異。
**sub:**使元素的基線與父元素的下標基線對齊。
**super:**使元素的基線與父元素的上標基線對齊。
**text-top:**使元素的基線與父元素的上標基線對齊。
**text-bottom:**使元素的底部與父元素的字體底部對齊。
**middle:**使元素的中部與父元素的基線加上父元素x-height
(譯註:x高度)的一半對齊。
注意 vertical-align
只對行內元素、表格單元格元素生效:不能用它垂直對齊塊級元素。
資源:MDN。
2. writing-mode
前端10K面試準備,最完整面試真題分享(含答案)!
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屬性控制數字,分數和序號標記的替代字形的使用。
它採用以下這些值之一: normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions
。
此屬性對於設置數字樣式很有用。 根據情況,你可能希望顯示老式的數字或帶有斜槓的零,對於這些情況,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 個屬性實現的佈局,讓大家加深一下印象。
如果你還知道一些新奇的屬性,歡迎留言。