CSS中比較少見(jiàn)且好用的七個(gè)屬性-創(chuàng)新互聯(lián)

學(xué)習(xí)CSS是構(gòu)建好看網(wǎng)頁(yè)的一種方式。 但是，在學(xué)習(xí)過(guò)程中，我們傾向于（大部分時(shí)間）限制自己，一遍又一遍地使用相同的屬性。 畢竟，我們是一種習(xí)慣性的動(dòng)物，我們會(huì)使用自己習(xí)慣且熟悉的東西。

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的安仁網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

因此，在這篇文章中，向你介紹7個(gè) 比較少見(jiàn)且好用的 CSS 屬性，希望對(duì)你有所幫助。

1. vertical-align

CSS 的屬性 vertical-align 用來(lái)指定行內(nèi)元素（inline）或表格單元格（table-cell）元素的垂直對(duì)齊方式。

就像定義說(shuō)的，這個(gè)屬性允許你垂直對(duì)齊文本。它對(duì)于順序指示器(st, nd等)、需要的輸入星號(hào)(*)或沒(méi)有正確居中的圖標(biāo)特別有用。vertical-align取其中一個(gè)值:super | top | middle | bottom | baseline (default) | sub | text-top | text-bottom，或從基線(xiàn)開(kāi)始的長(zhǎng)度(px，%， em, rem等等)。

baseline: 使元素的基線(xiàn)與父元素的基線(xiàn)對(duì)齊。HTML規(guī)范沒(méi)有詳細(xì)說(shuō)明部分可替換元素的基線(xiàn)，如<textarea> ，這意味著這些元素使用此值的表現(xiàn)因?yàn)g覽器而異。

**sub：**使元素的基線(xiàn)與父元素的下標(biāo)基線(xiàn)對(duì)齊。

**super：**使元素的基線(xiàn)與父元素的上標(biāo)基線(xiàn)對(duì)齊。

**text-top：**使元素的基線(xiàn)與父元素的上標(biāo)基線(xiàn)對(duì)齊。

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

**middle：**使元素的中部與父元素的基線(xiàn)加上父元素x-height（譯注：x高度）的一半對(duì)齊。

注意 vertical-align 只對(duì)行內(nèi)元素、表格單元格元素生效：不能用它垂直對(duì)齊塊級(jí)元素。

2. writing-mode

writing-mode 屬性定義了文本水平或垂直排布以及在塊級(jí)元素中文本的行進(jìn)方向。為整個(gè)文檔設(shè)置書(shū)時(shí)，應(yīng)在根元素上設(shè)置它（對(duì)于 HTML 文檔應(yīng)該在 html 元素上設(shè)置）。 它采用以下值之一horizontal-tb (default) | vertical-rl | vertical-lr。

**horizontal-tb：**對(duì)于左對(duì)齊(ltr)腳本，內(nèi)容從左到右水平流動(dòng)。對(duì)于右對(duì)齊(rtr)腳本，內(nèi)容從右到左水平流動(dòng)。下一水平行位于上一行下方。

**vertical-rl：**對(duì)于左對(duì)齊(ltr)腳本，內(nèi)容從上到下垂直流動(dòng)，下一垂直行位于上一行左側(cè)。對(duì)于右對(duì)齊(rtr)腳本，內(nèi)容從下到上垂直流動(dòng)，下一垂直行位于上一行右側(cè)。

**vertical-lr：**對(duì)于左對(duì)齊(ltr)腳本，內(nèi)容從上到下垂直流動(dòng)，下一垂直行位于上一行右側(cè)。對(duì)于右對(duì)齊(rtr)腳本，內(nèi)容從下到上垂直流動(dòng)，下一垂直行位于上一行左側(cè)。

3. font-variant-numeric

font-variant-numeric CSS屬性控制數(shù)字，分?jǐn)?shù)和序號(hào)標(biāo)記的替代字形的使用。

它采用以下這些值之一： normal | ordinal | slashed-zero | lining-nums | oldstyle-nums | proportional-nums | tabular-nums | diagonal-fractions | stacked-fractions。

此屬性對(duì)于設(shè)置數(shù)字樣式很有用。 根據(jù)情況，你可能希望顯示老式的數(shù)字或帶有斜杠的零，對(duì)于這些情況，font-feature-settings很有用。

請(qǐng)注意，font-variant-numeric是font-feature-settings組屬性的一部分。 諸如font-variant-caps或font-variant-ligatures之類(lèi)的屬性也屬于該組。

4. user-select

每當(dāng)我們有不想讓用戶(hù)選擇的文本，或者相反，如果發(fā)生了雙擊或上下文單擊，希望選擇所有文本時(shí)，user-select屬性將非常有用。

此屬性采用以下值之一：none | auto | text | all。

**none：**元素及其子元素的文本不可選中。 請(qǐng)注意這個(gè)Selection 對(duì)象可以包含這些元素。 從Firefox 21開(kāi)始， none 表現(xiàn)的像 -moz-none，因此可以使用 -moz-user-select: text 在子元素上重新啟用選擇。

auto

auto 的具體取值取決于一系列條件，具體如下：

在 ::before 和 ::after 偽元素上，采用的屬性值是 none

如果元素是可編輯元素，則采用的屬性值是 contain

否則，如果此元素的父元素的 user-select 采用的屬性值為 all，則該元素采用的屬性值也為 all

否則，如果此元素的父元素的 user-select 采用的屬性值為none，則該元素采用的屬性值也為 none

否則，采用的屬性值為text

**text：**用戶(hù)可以選擇文本。

**all：**在一個(gè)HTML編輯器中，當(dāng)雙擊子元素或者上下文時(shí)，那么包含該子元素的最頂層元素也會(huì)被選中。

5. clip-path

clip-path CSS 屬性可以創(chuàng)建一個(gè)只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。剪切區(qū)域是被引用內(nèi)嵌的URL定義的路徑或者外部svg的路徑，或者作為一個(gè)形狀例如circle()。clip-path屬性代替了現(xiàn)在已經(jīng)棄用的剪切 clip屬性。

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

由于這是對(duì)該屬性的介紹，因此，這里不會(huì)深入研究每個(gè)值。

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

6. shape-outside

shape-outside的CSS 屬性定義了一個(gè)可以是非矩形的形狀，相鄰的內(nèi)聯(lián)內(nèi)容應(yīng)圍繞該形狀進(jìn)行包裝。 默認(rèn)情況下，內(nèi)聯(lián)內(nèi)容包圍其邊距框; shape-outside提供了一種自定義此包裝的方法，可以將文本包裝在復(fù)雜對(duì)象周?chē)皇呛?jiǎn)單的框中。它采用與clip-path相同的值。

clip-path定義用戶(hù)如何查看元素，shape-outside定義其他HTML元素如何查看元素。

7. background-clip

最后，backgroundclip CSS屬性設(shè)置元素的背景是否擴(kuò)展到其border 、padding 或content 框之下。

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

以上就是CSS中7個(gè)你必須知道屬性的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！

文章名稱(chēng)：CSS中比較少見(jiàn)且好用的七個(gè)屬性-創(chuàng)新互聯(lián)
標(biāo)題URL：http://muchs.cn/article26/csjjjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、企業(yè)網(wǎng)站制作、企業(yè)建站、云服務(wù)器、網(wǎng)站改版、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)