者：vivo 互聯網前端團隊 - Zhang Jiqi

本文主要講述了CSS中的級聯層（CSS@layer），討論了級聯以及級聯層的創建、嵌套、排序和瀏覽器支持情況。級聯層可以用于避免樣式沖突，提高代碼可讀性和可維護性。

一、什么是級聯層(Cascade Layers)？

1.1 級聯層的官方定義

我們參看Cascading and Inheritance Level 5（13 January 2022） 中6.4節所述：

級聯層提供了一種結構化的方式來組織和平衡單個起源中的問題。單個級聯層內的規則級聯在一起，不與層外的樣式規則交錯。

開發者可以創建層來表現元素默認值、第三方庫、主題、組件、覆蓋和其他樣式問題，并且能夠以顯式方式重新排序層級，而無需更改每個層內的選擇器或特異性，或依賴源順序來解決跨層的沖突。

單純看官方定義和概括可能比較晦澀，下面我們會結合案例來說清楚。

1.2 級聯層為了解決什么問題？

簡而言之：級聯層的出現就是為了使 CSS 開發者可以更簡單直接地控制級聯。

我們來假設日常開發中的一個場景，從場景去理解級聯層在解決什么問題。

如下圖：

我們原來的'display'文案是紅色，當我們引入了一個第三方組件庫，第三方庫中有以下樣式。

/* 開發者樣式 */
  .item {
    color: red;
  }
 
/* 第三方庫 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

就會導致'display'文案變成綠色。

我們想要將'display'文案的顏色由綠色改成紅色一般的手段是增加選擇器特異性（優先級）。比如在開發頁面中對開發者樣式進行修改：

 /* 開發者樣式 */
  #app div.item {
    color: red;
  }
 /* 第三方庫 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }

或者借助級聯中出場順序對優先級的影響在用戶頁面中重寫

 /* 第三方庫 */
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
 /* 開發者樣式 */
  #app .item {
    color: red;
  }

效果如下：

再舉個例子：

比如有可能第三方組件寫了

a { color: blue; }

那項目開發中由于引入這個第三方組件 就會導致樣式污染，因為第三方庫的樣式往往都在項目設置的通用樣式比如common.css后加載。

如果后面想在代碼中覆蓋某些屬性，使用高特異性選擇器的語句就可能會導致問題。然后因為有問題就會選擇更高特異性的擇器的語句或使用!important，這會使代碼變得冗長也可能會帶來副作用。低特異性選擇器的語句很容易被后面出現在代碼中的語句覆蓋。在自己的代碼之后加載第三方 CSS 時特別會出現這種問題。

所以級聯層就是為了解決以上場景出現的，級聯層在級聯中的的位置是在內聯樣式和選擇器特異性之間。當有些css聲明就是設置要低優先級且不受選擇器特異性影響那么使用級聯層再合適不過。

運用級聯層解決第一個日常開發場景痛點的css代碼如下：

/* 排序層 */
@layer reset, lib;
/* 通用樣式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方庫樣式 */
/*我們將第三方庫的樣式全部放到lib層*/
/*這里一般使用@import導入的方式*/
/*為了示例簡單我們簡化了操作*/


@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 開發者樣式 */
.item {
  color: red;
}

為了知道為什么上面的css代碼能解決沖突問題，更好地理解級聯層的作用，理解一些現象背后的根因，了解級聯層和級聯的關系，我們繼續往下看。

二、理解級聯層的前提——級聯(cascade)

2.1 什么是級聯？

CSS中有兩個重要的基礎規則，一個是繼承，一個是級聯。

繼承

指的是類似 color，font-family，font-size，line-height 等屬性父元素設置后，子元素會繼承的特性。

級聯

可以簡單理解為是CSS 用來解決要應用于元素的具體樣式的算法。也就是基于一些優先級排序輸出給給定元素上屬性值一個級聯值。級聯值是級聯的結果。

2.2 當前級聯的排序標準

我們參看Cascading and Inheritance Level 5（13 January 2022） 中6.1節，

相比于Cascading and Inheritance Level 4（14 January 2016） 中的定義有明顯變化。

最重要的變化就是增加了級聯層。由此級聯排序變成：

1. 起源和重要性（Origin and Importance）
2. 上下文（Context）
3. 樣式屬性（Element-Attached Styles）
4. 層（Layers）
5. 特異性（Specificity）
6. 出場順序（又名源代碼順序）（Order of Appearance）

瀏覽器在確定最終元素樣式呈現的時候，會依據這些準則按照優先權從高到低排序，并且會一個一個的檢查，直到確定最終樣式。

2.3 級聯起源（Cascading Origins）

2.3.1 三個核心起源

css中每個樣式規則有三個核心起源，它決定了它進入級聯的位置，理解起源優先級是理解級聯的關鍵。

• 用戶代理來源（瀏覽器內置樣式）
• 用戶來源（瀏覽器的用戶設置 ）
• 作者來源（Web開發者）

2.3.2 起源的優先級

Css聲明的起源取決于它來自哪里，重要性在于它是否用!important聲明。

各種起源的優先級按降序排列：

1. 過渡
2. 重要的用戶代理
3. 重要用戶
4. 重要作者
5. 動畫
6. 普通作者
7. 普通用戶
8. 普通用戶代理

越靠前來源的聲明優先級越高。過渡和動畫我們可以暫時忽略。

2.4 熟悉又陌生的 !important

通常作為開發者，!important會被我們視為一種增加特異性的方法，用以覆蓋內聯樣式或特異性較高的選擇器。

但是!important設計出來的初衷是作為整體級聯中的一個特性，來平衡開發者、用戶設置和瀏覽器內置之間對css優先級的影響能力。

默認情況下三者的優先級是：作者來源> 用戶來源>用戶代理來源（可以參看上文起源優先級中6-8的排序）。但是當css聲明添加!important之后會使它們的優先順序顛倒（參看上文起源優先級中2-4的排序）。

如果站在瀏覽器和用戶的角度看!important提供了在必要時重獲優先級控制權的能力，而非只是簡單的增加特異性。

舉個例子：

瀏覽器默認樣式表包含我們開發者無法覆蓋的重要樣式。

瀏覽器對具有'hidden'類型的input輸入框設置了默認的展示屬性并且將其聲明為重要。

input[type=hidden i] { display: none !important; }

看下面兩張圖例：

第一張可以看出我們對具有'hidden'類型的input輸入框的展示屬性設置成了顯示并且聲明為重要

第二張是樣式最終計算結果：隱藏

從上面的瀏覽器表現可以看到我們作為開發者在作者樣式表中設置的規則沒能覆蓋用戶代理樣式表中的相同規則。

這驗證了上面說的：在級聯中!important會顛倒三大核心起源默認優先順序。

驗證的過程中還發現了一個chrome控制臺這邊的bug，看上面的第一張圖例：沒生效的規則不劃刪除線，生效的反而劃刪除線了。

再看一個官方文檔的例子加強一下理解：

圖片來源：w3.org

font-size的值最終是‘12pt ’。

因為作者樣式表中添加!important的規則優先權高于用戶樣式表中普通規則。

text-indent的值最終是‘1em’。

因為雖然兩個樣式表都標注了!important，但是標注!important用戶聲明優先級大于標注!important作者聲明。

2.5 一張圖帶你理解級聯

下圖可以幫助我們直觀的理解級聯以及級聯層在級聯中的位置：

圖片來源：css-tricks

我們會發現平時操作最多的選擇器特異性（selector specificity）只是級聯中的一小部分。也輕松地理解了為什么內聯樣式優先級天然高。同時我們會發現!important在級聯中有特殊地位。他穿插在級聯規則的各個階段并能顛倒優先級。

三、級聯層(CSS@layer) 使用探索

3.1 @layer 是什么？

我們來看MDN上的定義：

The @layer CSS at-rule is used to declare a cascade layer and can also be used to define the order of precedence in case of multiple cascade layers.

也就是說 @layer 這個at-rule（AT規則） 用于聲明級聯層（cascade layer），也能用于定義多個級聯層的優先級。

At-rules 是什么？

At-rules是指導 CSS 如何表現的CSS 語句。它們以 at 符號 ' @' ( U+0040 COMMERCIAL AT) 開頭，后跟一個標識符，包括下一個分號 ' ;' ( U+003B SEMICOLON) 或下一個CSS 塊之前的所有內容。

我們開發常見的at-rule有@charset、@media、@font-face 、@keyframes 等。

3.2 @layer的句法規則

@layer的句法如下：

@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}

3.3 如何創建級聯層

可以通過多種方式創建級聯層。

第一種方法是：創建命名的級聯層，其中包含該層的 CSS 規則，如下所示：

@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
 
@layer special {
  .item {
    color: rebeccapurple;
  }
}

第二種方法是：創建一個命名的級聯層而不分配任何樣式。這可以是單層，如下所示：

@layer green;

可以一次定義多個層，如下：

@layer green, special

一次定義多個層有什么好處呢？

因為聲明層的初始順序決定了層的優先級。與聲明一樣，如果在多個層中找到聲明，最后定義的層聲明將最終生效。看下面代碼：

@layer green,special;
 
@layer green {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}
@layer special {
  .item {
    color: rebeccapurple;
  }
}

效果如下圖：

special層中item樣式規則將被應用即使它的特異性低于 green層中的規則。這是因為一旦層順序定義完成，就會忽略選擇器特異性。

同樣也會忽略出現的順序：

我們聲明層名稱并設置它們的順序后，可以通過重新聲明名稱來將 CSS 規則添加到圖層。然后將樣式附加到層，并且層順序不會更改。比如如下代碼雖然@layer green重新聲明了并在文件后方但是由于順序一開始已經設置所以字體顏色還是紫色：

@layer green,special;
 
@layer special {
  .item {
    color: rebeccapurple;
  }
}
 
@layer green {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
    width: 120px;
  }
}

效果如下：

忽略選擇器特異性和代碼出現順序可以讓我們創建更簡單的 CSS 選擇器，并使代碼優雅，因為不必確保選擇器具有足夠高的特異性來覆蓋其他css規則，只需要確保它出現在后面的層中。

第三種方法是：創建一個沒有名稱的級聯層。例如：

@layer {
  .item {
    color: black;
  }
}

這將創建一個匿名級聯層，該層功能與命名層相同。但是使用匿名層有如下缺點:

1. 可讀性較差：匿名層沒有名稱，會導致樣式表不易閱讀和理解。特別是在大型項目中，可能會出現樣式不斷增加，難以跟蹤和管理的問題。
2. 難以擴展：如果稍后想要更改特定樣式或組合，也會很難找到特定的代碼塊。
3. 不可復用性：匿名層中的樣式不能在其他地方重復使用或引用。這樣會使樣式表更難以管理和維護。

平時我們盡量避免使用匿名層。但當我們是樣式庫的作者，并想將某些css代碼不被使用者修改可以借助匿名層做到這一點。

第四種方法是：使用@import。CSS 原生支持 @import 導入其他 CSS 文件。

@import url(index.css) layer(index);

同時，也支持匿名引入，例如：

@import url(index.css) layer;

我們在使用@import時候需要放在除@charset之外的樣式規則前，否則無法導入。

可能的第五種方式仍在討論中：通過元素上的屬性。請參閱[css-cascade] Provide an attribute for assigning ato a cascade layer #5853。

3.4 層的嵌套規則

圖層可以嵌套。例如：

@layer base {
  p { max-width: 70ch; }
}
 
@layer framework {
  @layer base {
    p { margin-block: 0.75em; }
  }
 
  @layer theme {
    p { color: #222; }
  }
}

生成的層可以表示為一棵樹：

1.base

• framework
• base

2.theme

或可以用扁平列表表示

1. base
2. framework.base
3. framework.theme

要將樣式附加到嵌套層，您需要使用以下全名來引用它：

@layer framework {
  @layer default {
     p { margin-block: 0.75em; }
  }
 
  @layer theme {
    p { color: #222; }
  }
}
 
@layer framework.theme {
  /* 這些樣式會被添加到framework層里面的theme層 */
  blockquote { color: rebeccapurple; }
}

看效果：

3.5 層的排序規則

級聯層按照它們聲明的順序排序。第一層優先級最低，最后一層優先級最高。但是，未分層的樣式具有最高優先級：

/* 未分層 */a { color: green; }
@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 { a { color: yellow; } }

優先級順序如下：

1. 未分層樣式
2. layer-3
3. layer-2
4. layer-1

看下圖示例：

層可以在一個地方被定義圖層（以建立圖層順序），然后在任何地方添加樣式

/* 定義在一個地方 */
@layer my-layer;
/* 其他樣式*/
...
/* 在某個地方添加樣式 */
@layer my-layer { a { color: red; } }

3.6 加上!important之后的排序規則

/* 未分層 */ a { color: green !important; }
@layer layer-1 { a { color: red !important; } }
@layer layer-2 { a { color: orange !important; } }
@layer layer-3 { a { color: yellow !important; } }

任何加上重要聲明的樣式都以相反的順序應用

優先級順序如下：

1. !important layer-1
2. !important layer-2
3. !important layer-3
4. !important 未分層樣式

看下圖示例：

這里我們看到對應規則在chrome瀏覽器的顯示是正確的。但是在開發者控制臺中的樣式一欄規則顯示有問題。應該是chrome瀏覽器開發者控制臺的bug。

3.7 嵌套層的排序規則

@layer layer-1 { a { color: red; } }
@layer layer-2 { a { color: orange; } }
@layer layer-3 {
  @layer sub-layer-1 { a { color: yellow; } }
  @layer sub-layer-2 { a { color: green; } }
  /* 未嵌套 */ a { color: blue; }
}
/* 未分層 樣式 */ a { color: black; }

優先級順序如下：

1. 未分層 樣式
2. layer-3
3. -layer-3 未嵌套
4. -layer-3 sub-layer-2
5. -layer-3 sub-layer-1
6. layer-2
7. layer-1

3.8 媒體查詢對層排序的影響

以下層順序將取決于匹配的媒體條件：

例如：

@media (min-width: 600px) {
   @layer layout {
     .item {
       font-size: x-large;
     }
   }
 }
 
@media (prefers-color-scheme: dark) {
  @layer theme {
     .item {
        color: red;
     }
   }
}

如果兩個媒體查詢的規則中匹配一個那么對應的級聯層生效。如果兩者都匹配，那么圖層順序將為layout, theme都生效。如果兩個都不匹配則不定義層。下圖是兩者都匹配的場景。

四、現在就能使用級聯層嗎？

4.1 目前瀏覽器支持程度

圖片來源：developer.mozilla.org

目前所有現代瀏覽器均已經支持 @layer 規則。所有瀏覽器廠商都支持的特性未來一定比較實用。

4.2 W3C 鼓勵可以作為日常使用

SS 的標準化流程由 W3C Cascading Style Sheets Working Group (CSSWG)——W3C層疊樣式列表小組以及獨立CSS專家組成。W3C 本身并不制定標準，而是作為一個論壇式的平臺，接收來自小組成員的提交，并通過會議來商討制定標準，所有的提交以及討論都是公開透明的，可以在 W3C 網站上看到會議的記錄，可以簡單分為4個大階段：

• 工作草案( WD )
• 候選人推薦( CR )
• 提議的建議( PR )
• W3C 推薦( REC )

下圖可以幫助理解：

圖片來源：w3.org

W3C 通過狀態碼表示規范的成熟度。成熟度從低到高排序如下圖。

圖片來源：w3.org

再看下圖：包含layer概念的標準討論已經到達CR階段。

圖片來源：w3.org

W3C 鼓勵從 CR階段的標準 開始可以作為日常使用。

五、總結

最后，我們回到通過級聯層如何解決“引入了一個第三方組件庫導致樣式覆蓋“的問題上。

css代碼如下：

/* 排序層 */
@layer reset, lib;
/* 通用樣式 */
@layer reset {
  #app .item {
    color: black;
    width: 100px;
    padding: 1em;
  }
}
/* 第三方庫樣式 */
/*我們將第三方庫的樣式全部放到lib層，這里一般使用@import導入的方式，為了示例簡單我們簡化了操作*/
@layer lib {
  #app .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    width: 130px;
  }
}
/* 開發者樣式 */
.item {
  color: red;
}

我們將第三方庫的樣式全部放到lib層，將需要重置的一些樣式放到reset層，自己開發的樣式不放入層中（當然你也可以放入到一層然后排序在最后）。由此我們實現了樣式的分層解決了第三方組件庫導致樣式覆蓋的問題，而且做到開發者樣式簡單不冗長。

效果如下：

級聯層（CSS@layer）已經歷概念提出到到瀏覽器全面支持的階段。也許在不久的將來大家都會普遍使用它，期望本文能給大家帶來一定幫助。

參考資料：

1. CSS Cascading and Inheritance Level 5
2. A Complete Guide to CSS Cascade Layers
3. The Future of CSS: Cascade Layers (CSS @layer)
4. CSS必學基礎：理解CSS中的級聯規則
5. 詳解日后定會大規模使用的CSS @layer 規則
6. W3C Process Document
7. Cascade Layers Explainer

作者:Zhang Jiqi

來源:微信公眾號:vivo互聯網技術

出處:https://mp.weixin.qq.com/s/4M-RvnTq8rJuKDC3VZOONQ

過CSS文本裝飾可以為文本添加裝飾線、為裝飾線設置顏色、為裝飾線指定風格、為裝飾線設置厚度等效果。

為文本添加裝飾線通過 text-decoration-line 屬性實現，可以結合一個以上的值，如上劃線和下劃線，來顯示文本上方和下方的線條。具體的值有三個：

overline，在文本上方添加線條修飾。

line-through，在文本中間添加線條修飾，實現了刪除線的效果。

underline，在文本下方添加線條修飾，實現了下劃線的效果。

我們來做個例子。

打開編輯器，在 005 文件夾下創建 decoration.html 文件，構建好基本代碼。

添加 h1，h2，h3，p 四個元素。分別填入一些文本。

在 005 文件夾下再創建一個 mystyle-3.css 文件，

定義 h1 選擇器，聲明樣式屬性 text-decoration-line，值為 overline。

定義 h2 選擇器，也聲明樣式屬性 text-decoration-line，值為 line-through。

定義 h3 選擇器，再聲明樣式屬性 text-decoration-line，值為 underline。

回到頁面，通過 link 元素引入 mystyle-3.css 這個外部樣式。

在瀏覽器上預覽效果，我們看：上邊線、刪除線和下劃線就做好了！

實際上，可以同時給文本添加多個線條，實現方法是給 text-decoration-line

[?dek??re??n】屬性設置多個值，每個值通過空格分開。

在 mystyle-3.css 再定義一個 p 選擇器，聲明樣式屬性 text-decoration-line，值寫為 overline underline （讀作overline 空格 underline ）。

看一下效果，段落被添加了兩條裝飾線。

有的小伙伴還記得，給文本添加鏈接后，瀏覽器會默認給這個文本添加一個下劃線。所以，添加了鏈接的文本就不要使用 underline 下劃線裝飾了。

為文本設置裝飾線的顏色通過 text-decoration-color 屬性實現，屬性值為任意合法的顏色值。

給 h1 元素設置 text-decoration-color 屬性，顏色值設置為 red。再快速的給 h2，h3，p 元素設置 text-decoration-color 屬性，值分別為 blue，green，purple。

我們看，線條都有了顏色。

為裝飾線指定風格通過 text-decoration-style 屬性實現，屬性值有五個：

solid，實線。

double，雙實線。

dotted，圓點線。

dashed[d??t]，虛線。

wavy[?we?vi]，波浪線。

為了演示方便，在 html 中再添加一個標題 h4，填入一些文本，在 css 中將全部元素的 text-decoration-line 樣式屬性都設置為 underline。再定義一個 h4 選擇器，聲明樣式 text-decoration-line: underline。

給 h1， h2，h3，h4，p 全部添加 text-decoration-style 屬性，值分別為 solid，double，dotted，dashed[d??t]，wavy。

這樣，各種線條的風格就設置好了！

通過 text-decoration-thickness 屬性為線條設置厚度，也就是線條的粗細。屬性值有三種設置方法：

auto， 默認值，這個值是不確定的，和所修飾的文字大小有關系。

px，像素大小，是一個絕對值。比如 5px。

%，是一個相對值，根據修飾文字的高度計算出來。比如 25%。

在 h1 元素上聲明樣式屬性 text-decoration-thickness，值為 auto。在 h2，h3 上也聲明這個樣式屬性，值分別為 5px，50%。

在瀏覽器里仔細觀察，h1 上的下劃線厚度是瀏覽器給的默認值。h2 上的下劃線厚度是 5px。h3 上的下劃線厚度為文字高度的一半。

回到樣式表代碼，我們分析一下：每個文本修飾的屬性名，均為三個單詞連接起來的，這樣寫起來比較啰嗦，能不能簡化一下呢？可以的！

h1 {

/* text-decoration-line: overline; */

text-decoration-line: underline;

text-decoration-color: red;

text-decoration-style: solid;

text-decoration-thickness: auto;

}

素的顯示與隱藏

使用CSS讓元素不可見的方法很多，剪裁、定位到屏幕外、透明度變化等都是可以的。雖然它們都是肉眼看不見，但背后卻在多個維度上都有差別

下面是總結的一些比較好的隱藏實踐，大家一起來根據實際開發場景來選擇合適的使用

比較好的隱藏實踐

不占空間，資源可以加載，DOM可訪問 使用display:none

不占空間，隱藏顯示時有transition效果

占空間，不能點擊 visibility: hidden

不占空間，不能點擊，鍵盤能訪問 clip裁切

占空間，不能點擊，鍵盤能訪問 relative

占空間，可以點擊 opacity

隱藏文字 使用text-indent

根據實際的隱藏場景選擇合適的隱藏方法，這里就不再多說了，接著往下看吧

display與元素的顯隱

我們都知道display如果值為none，則該元素以及所有后代元素都隱藏，反之如果值是非none的情況，則都為顯示了

display可以說是web顯隱交互中出場頻率最高的一種隱藏方式，是真正意義上的隱藏，干凈利落，不留痕跡

none做到了無法點擊、無法使用屏幕閱讀器等輔助設備訪問，不占空間，其實不僅僅是這樣，更應該知道的是

me: 我有酒，那么別說你沒有故事

我知道display:none你才不是一個沒有故事的女同學

display: none的元素的background-image圖片根據不同瀏覽器的情況加載情況不一

在Firefox瀏覽器下，display:none的background-image圖片不加載，包括父元素display:none也是如此在Chrome和Safari瀏覽器，則根據父元素是否是否為none來影響圖片加載情況，父元素帶有display:none，圖片不加載。

父元素不帶有display:none,而自身有背景圖元素帶的話，那也照樣加載

3.在IE瀏覽器下，無論怎么搞都會請求圖片資源，就是這么任性

因此，在實際開發的時候，例如頭圖輪播切換效果

那些默認需要隱藏的圖片作為背景圖藏在display:none元素的子元素上，這樣的細小改動就可以明顯提升頁面的加載體驗，也是非常實用的小技巧

whatever

上面說的興致盎然，但實際中不可能全部都是背景圖去加載圖片資源的

還有另外一個好朋友，img元素，然并卵的是，上面說了一大堆加載不加載的情況，對img來說沒個鳥用，人家不管你none不none的，依舊帶著勇闖天涯的氣概去請求著資源

活久見

都說display:none做事最純粹，最干凈，不能被點擊，觸碰到，然而下面這種情況又是什么鬼？

出來解釋解釋，我們都是文明人是絕對不會動武的！

隱藏的按鈕會觸發click,觸發表單提交，此現象出現在時髦的瀏覽器中(IE9+，現代標準瀏覽器中）

既然有這種例外情況那加了display:none的意義又是什么呢？

很多都是純天然的

HTML中有很多標簽和屬性天然自帶display:none

HTML5中新增了hidden這個布爾屬性，可以讓元素天生隱藏起來

既然說到了visibility了，那么就趕緊邀請visibility閃亮登場吧

visibility與元素的顯隱

visibility要為自己正名，不僅僅是保留空間這么簡單

看點多多：

繼承性(最有意思的一個特點，不是我說的)

2. 與css計數器

visibility:hidden雖然讓元素不可見了，但是不影響其計數效果，不會重新計算結果

3. 與transition

設置了visibility:hidden的元素，可以很好的展現transition過渡效果

這是因為transition支持的css屬性中有visibility(果然是兄弟)，而并沒有display屬性

4.與JS

visibility:hidden除了對transition友好外，對js來說也很友好

在實際開發中，需要對隱藏元素進行尺寸和位置的獲取，來實現布局精確定位的交互

此時，就建議使用visibility:hidden

好了以上內容要告一段落了，我們繼續開始新的征程吧，哈哈

用戶界面樣式

用戶界面樣式指的是CSS世界中用來幫助用戶進行界面交互的一些CSS樣式，主要有outline和cursor等屬性

和border形似的outline屬性

outline表示元素的輪廓，語法也和border一樣，分為寬度、類型和顏色三個值

樣式表示上相同，但是設計的初衷卻是不太相同的，這一點天地日月可鑒

outline是一個和用戶體驗密切相關的屬性，與focus狀態以及鍵盤訪問密切相關

對于按鈕或鏈接，通常的鍵盤操作是：Tab鍵按次序不斷focus控件元素(鏈接、按鈕、輸入框等表單元素)，或者focus設置了tabindex的普通元素，然后按Shift+Tab是反向訪問

重點來了！

默認狀態下，對于處于focus狀態的元素，瀏覽器會通過發光or虛框的形式進行區分和提示，這是友好的用戶體驗，很有必要，不然用戶很難知道自己當前聚焦在了哪個元素上面，會迷失自我

元素如果聚焦到了a鏈接上，按下回車鍵就會跳轉到相應鏈接，以上的交互都是基于鍵盤訪問的，這就是為什么outline和鍵盤訪問如此親密了

不專業的行為

很多時候直接在reset樣式的時候，寫成如下形式是非常不可取的

這樣直接一竿子打死一群鴨子的做法是不對的，更多的時候是因為瀏覽器內置的focus效果和設計風格格格不入，才需要重置，而且要使用專門的類名

最后再強調一遍：萬萬不可在全局設置outline: 0 none;

這樣的操作會造成鍵盤訪問的時候用戶找不到當前焦點，容易產生困擾的，為了大家好，收斂一下吧

下面來點干貨: 在實際開發中，有時候需要讓普通元素代替表單控件元素有outline效果

舉個栗子：submit按鈕來完成UI設計是非常麻煩的，所以使用label元素來移花接木，通過for屬性和這些原生的表單控件相關聯

真正的不占據空間的outline及其應用

outline是一個真正意義上不占任何空間的屬性，Amazing

頭像剪裁的矩形鏤空效果

先來看個效果圖

上圖就是矩形鏤空效果，那么下面直接上代碼，滿滿的干貨

用一個大大的outline來實現周圍半透明的黑色遮罩，因為outline無論設置多么多么大，都不會占據空間影響布局，至于超出的部分，直接給父元素設置一個overflow:hidden就搞定了 注意：

自動填滿屏幕剩余空間的應用技巧

開發中很多時候，由于頁面內容不夠多，導致底部footer會出現尷尬的剩余空間，解決方法往往也有很多種，在此我們還是依然利用outline的功能來完美實現一下

關鍵的css就是設置一個超大輪廓范圍的outline屬性，如給個9999px，保證無論屏幕多高，輪廓顏色都能覆蓋

值得注意的是，outline無法指定方位，它是直接向四周發散的，所以需要配合clip剪裁來進行處理,以左邊和上邊為邊界進行裁剪

光標屬性

光標屬性cursor我們真的是最熟悉的陌生人啊

為什么這么說呢，因為在眾多的屬性值面前，我們似乎只用到了pointer(手形)(最常用的，沒有之一)，move(移動)，default(系統默認)這幾樣

在cursor的世界里，遠比我們想象的要豐富很多，下面按照功能特性來對其進行分類吧

琳瑯滿目的cursor屬性值

友情不友情的小提示：☆（表示常用）

鏈接和狀態

cursor: progress; 進行中

選擇

拖拽都是CSS3新增的光標類型

以上內容就介紹完了用戶界面樣式的全部內容了，還有最后一章的冷知識，大家不要方，繼續看下去，了解一下，了解一下，了解一下

流向的改變

說出來你可能不信，direction可以改變水平流向，盡管知道或者使用過的人少之又少，但并不妨礙它的發光發熱

而且屬性簡單好記，值少，兼容極好ie6支持，可以來挖掘一下它的神奇功效

direction

僅僅兩個值：

direction: rtl;

當然看到這里你可能會感覺，這些說起來都沒什么鳥用，因為大招是不輕易放出的，而真正有用的地方在于改變網頁布局的時候

direction屬性默認有一個特性

可以改變替換元素(img,input,textarea,select)或inline-block/inline-table元素的水平呈現順序

舉個例子：顛倒順序

再舉個例子：

比如制作彈窗組件的時候，確認和取消按鈕有的時候會根據用戶的使用行為會顯示在不同的位置

下面來看看這種特性的表現在實際開發中的作用

windows用戶看到的樣子

好了，direction的話題就告一段落，接下來介紹最后一個知識了，堅持住，快休息了

writing-mode

改變CSS世界縱橫規則的writing-mode，如此強大的功能，居然沒有被大家發掘和廣發應用起來，實屬遺憾了，話不多說，往下看

writing-mode作用及真正需要關注的屬性值

writing-mode可以改變排版，變成垂直流，如下圖所示

在使用語法上，也是需要記兩套的，一套是IE私有屬性，一套是CSS3規范屬性

CSS3語法：

IE語法：

針對實戰版來整理一份writing-mode是這樣的

對于垂直排版來說，實際開發是很少會遇到的，不過還是要說說writing-mode帶來的改變

水平方向也能margin合并

我們都知道兩個相鄰的元素垂直的margin會合并，當元素變為垂直流的時候，水平的margin也會合并

普通塊元素可以使用margin: auto實現垂直居中

text-align:center實現圖片垂直居中(同上實現的效果）

實現全兼容的icon fonts圖標旋轉效果

老IE下讓小圖標旋轉很麻煩，writing-mode把文檔變成垂直流的時候，英文、數字和字符號都天然的轉了90°

@font-face的兼容性很好IE5.5就支持了，所以就算是IE6和IE7也沒問題

好了，這就是《CSS世界》里最后三章的全部內容了，終于寫完了，哈哈，希望大家有收獲一些冷知識。

簡單說兩句

做個個人的小總結吧：

css有很多奇妙的地方，在某些特性當初被設計出來的時候可能只是為了某些圖文排版而生

但是我們可以利用它們帶來的特性發揮自己的創造力，實現其他很多意想不到的效果，因此，上面所講述的所有知識點，盡管很多內容都有點奇技淫巧以悅婦孺的過程

但這也給我們開發的過程中，提供了一些很出奇的妙招，值得我們好好學習領悟

感謝個位的觀看了，再見了，哈哈