CSS特征之一：層疊性

解CSS特征之一：層疊性

通常在剛剛開始學習CSS時，我們都會提到CSS的繼承性、層疊性、優先級，本文只對CSS的層疊性做詳細的解讀。

CSS層疊性的概念：

有多個選擇器或一個選擇器對某個或某幾個標簽中的多條樣式進行選擇，如果多個選擇器都賦給某個或某幾個標簽相同屬性，樣式的作用范圍發生了重疊

CSS層疊性的體現：

1：樣式無沖突

/* 多個選擇器選擇同一個元素，樣式并無沖突時 */
.box_one{
    width:100px;
    height:100px;  
}
.box_two{
    background:red;
}
?
<body>
     <div class="box_one box_two"></div>
</body>

以上代碼中，樣式代碼并無沖突，兩個選擇器中的所有樣式都疊加到了元素div上，div最終呈現的是一個紅色的，寬高度大小為100px的容器。

2：樣式有沖突
樣式有沖突，同一級別不受優先級影響時

 .box_one{
   width:100px;
   height:100px;
 }
.box_two{
    width:200px;
    background:red;
}

<body>
    <div class="box_one box_two"></div>
</body>

以上代碼中，在同級別時（同個元素，同是class定義選擇器名稱），樣式代碼出現沖突，兩個選擇器中出現同一條width屬性，則以CSS代碼中最后出現的那條樣式為準，div最終呈現的是一個width為200px，height為100px,紅色的容器。

樣式有沖突，不同級別受優先級（權重）的影響時

CSS規定基本選擇器的優先級從低到高排序為：元素（標記）樣式 < 類別（class）樣式 < ID樣式 < 行內樣式 < !important。

2-1：類別（class）樣式 VS 元素（標記）樣式

.box_one{
    width:200px;
    background:red;
} 
div{
   width:100px;
   height:100px;
 }

<body>
    <div class="box_one"></div>
</body>

以上代碼中，class樣式的優先級大于元素樣式的優先級，即使div設置的width寫在后面，最終呈現的是一個width：200px，height：100px；背景色為紅色的容器。

2-2：ID樣式 VS 類別（class）樣式

#box{
    width:200px;
    background:yellow;
} 
.box_one{
   width:100px;
   height:100px;
   background:red;
}

<body>
    <div class="box_one" id="box"></div>
</body>

以上代碼中，ID樣式的優先級大于class樣式的優先級，最終呈現的是一個width：200px，height：100px；背景色為黃色的容器。

2-3：行內樣式 VS ID樣式

#box{
    width:200px;
    background:yellow;
} 
.box_one{
   width:100px;
   height:100px;
   background:red;
}

<body>
    <div class="box_one" id="box" style="background:pink"></div>
</body>

以上代碼中，CSS行內樣式優先于ID的樣式，div最終呈現的是一個寬度為200px，高度100px，背景顏色為粉色的容器。

2-4： !important VS 行內樣式

.box_one{
   width:100px!important;
   height:100px;
   background:red!important;
}
#box{
    width:200px;
}

<body>
    <div class="box_one" id="box" style="background:pink"></div>
</body>

在CSS中，!important具有最高優先級，并且可以寫在任意一條有沖突樣式的后面。在以上代碼中，div在行內樣式表設置背景色為粉色，ID樣式中width為200px；但是在class樣式中，width：100px及背景色為red的后面都添加了!important，因此，最終呈現的是一個寬度為100px，高度為100px，背景色為紅色的容器。

象描述

真正意義上的inline-block水平呈現的元素間，換行顯示或空格分隔的情況下會有間距，很簡單的個例子：

兩個相鄰的radio之間總是多那么一點點的間距，不是margin也不是padding，但是設計妹紙不干了！！！

我們使用CSS更改非inline-block水平元素為inline-block水平，也會有該問題：

.space a {
 display: inline-block;
 padding: .5em 1em;
 background-color: #cad5eb;
}
<div class="space">
 <a href="##">惆悵</a>
 <a href="##">淡定</a>
 <a href="##">熱血</a>
</div>

這種表現是符合規范的應該有的表現

不過，這類間距有時會對我們布局，或是兼容性處理產生影響，需要去掉它，該怎么辦呢？以下展示N種方法（歡迎補充）！

二、方法之移除空格

元素間留白間距出現的原因就是標簽段之間的空格，因此，去掉HTML中的空格，自然間距就木有了。考慮到代碼可讀性，顯然連成一行的寫法是不可取的，我們可以：

<div class="space">
 <a href="##">
 惆悵</a><a href="##">
 淡定</a><a href="##">
 熱血</a>
</div>

或者是：

<div class="space">
 <a href="##">惆悵</a
 ><a href="##">淡定</a
 ><a href="##">熱血</a>
</div>

或者是借助HTML注釋：

<div class="space">
 <a href="##">惆悵</a><!--
 --><a href="##">淡定</a><!--
 --><a href="##">熱血</a>
</div>

三、使用margin負值

.space a {
 display: inline-block;
 margin-right: -3px;
}

margin負值的大小與上下文的字體和文字大小相關，其中，間距對應大小值可以參見我之前“基于display:inline-block的列表布局”一文part 6的統計表格：

例如，對于12像素大小的上下文，Arial字體的margin負值為-3像素，Tahoma和Verdana就是-4像素，而Geneva為-6像素。

由于外部環境的不確定性，以及最后一個元素多出的父margin值等問題，這個方法不適合大規模使用。

四、讓閉合標簽吃膠囊

如下處理：

<div class="space">
 <a href="##">惆悵
 <a href="##">淡定
 <a href="##">熱血</a>
</div>

注意，為了向下兼容IE6/IE7等喝蒙牛長大的瀏覽器，最后一個列表的標簽的結束（閉合）標簽不能丟。

在HTML5中，我們直接：

<div class="space">
 <a href="##">惆悵
 <a href="##">淡定
 <a href="##">熱血
</div>

好吧，雖然感覺上有點怪怪的，但是，這是OK的。

您可以狠狠地點擊這里：無閉合標簽去除inline-block元素間距demo

五、使用font-size:0

類似下面的代碼：

.space {
 font-size: 0;
}
.space a {
 font-size: 12px;
}

這個方法，基本上可以解決大部分瀏覽器下inline-block元素之間的間距(IE7等瀏覽器有時候會有1像素的間距)。不過有個瀏覽器，就是Chrome, 其默認有最小字體大小限制，因為，考慮到兼容性，我們還需要添加：

類似下面的代碼：

.space {
 font-size: 0;
 -webkit-text-size-adjust:none;
}

您可以狠狠地點擊這里（去年制作的一個簡單demo）：font-size:0清除換行符間隙demo

補充：根據小杜在評論中中的說法，目前Chrome瀏覽器已經取消了最小字體限制。因此，上面的-webkit-text-size-adjust:none;代碼估計時日不多了。

六、使用letter-spacing

類似下面的代碼：

.space {
 letter-spacing: -3px;
}
.space a {
 letter-spacing: 0;
}

根據我去年的測試，該方法可以搞定基本上所有瀏覽器，包括吃“東鞋”、“西毒(膠囊)”、“南地(溝油)”、“北鈣(三鹿)”的IE6/IE7瀏覽器，不過Opera瀏覽器下有蛋疼的問題：最小間距1像素，然后，letter-spacing再小就還原了。

七、使用word-spacing

類似下面代碼：

.space {
 word-spacing: -6px;
}
.space a {
 word-spacing: 0;
}

一個是字符間距(letter-spacing)一個是單詞間距(word-spacing)，大同小異。據我測試，word-spacing的負值只要大到一定程度，其兼容性上的差異就可以被忽略。因為，貌似，word-spacing即使負值很大，也不會發生重疊。

您可以狠狠地點擊這里：word-spacing與元素間距去除demo

與上面demo一樣的效果，這里就不截圖展示了。如果您使用Chrome瀏覽器，可能看到的是間距依舊存在。確實是有該問題，原因我是不清楚，不過我知道，可以添加display: table;或display:inline-table;讓Chrome瀏覽器也變得乖巧。

.space {
 display: inline-table;
 word-spacing: -6px;
}

八、其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格柵單元見間隔方法（注意，其針對的是block水平的元素，因此對IE8-瀏覽器做了hack處理）：

.yui3-g {
 letter-spacing: -0.31em; /* webkit */
 *letter-spacing: normal; /* IE < 8 重置 */
 word-spacing: -0.43em; /* IE < 8 && gecko */
}
.yui3-u {
 display: inline-block;
 zoom: 1; *display: inline; /* IE < 8: 偽造 inline-block */
 letter-spacing: normal;
 word-spacing: normal;
 vertical-align: top;
}

以下是一個名叫RayM的人提供的方法：

li {
 display:inline-block;
 background: orange;
 padding:10px;
 word-spacing:0;
 }
ul {
 width:100%;
 display:table; /* 調教webkit*/
 word-spacing:-1em;
}
.nav li { *display:inline;}

也就是上面一系列CSS方法的組組合合。

結語

其他去除間距的方法肯定還有，歡迎大家通過評論方式進行補充。上文部分方法可能有測試不周全之處，因此，部分細節上可能會有紕漏，歡迎指正。

最后，推薦幾本書

寫CSS的常用套路（下篇）...

點擊觀看——我寫CSS的常用套路（上篇）...

box-shadow

為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會使陰影更加絲滑

本demo地址：Pagination

內發光

注意到box-shadow還有個inset，用于盒子內部發光

利用這個特性我們可以在盒子內部的某個范圍內設定顏色，做出一個新月形

再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！

注意到它散發著淡淡的紅光，其實就是2個偽元素應用了模糊濾鏡所產生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本陰影，本質上和box-shadow相同，只不過是相對于文本而言，常用于文本發光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果

發光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

偽3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本

本demo地址：Menu Hover Fill Text

gradient

漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光

linear-gradient

線性漸變是筆者最常用的漸變

這個作品用到了HTML的dialog標簽，線性漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)

本demo地址：Confirm Modal

radial-gradient

徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個橢圓形的徑向漸變

此外，由于背景可以疊加，我們可以疊加多個不同位置大小的徑向漸變來生成圓點群，再加上動畫就產生了一種微粒效果，無需多余的div元素

本demo地址：Particle Button

conic-gradient

圓錐漸變可以用于制作餅圖

用一個偽元素疊在餅圖上面，并將content設為某個值（這個值通過CSS變量計算出來），就能制作出度量計的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的濾鏡，blur最常用

融合效果

當blur濾鏡和contrast濾鏡一起使用時，會產生一種融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

對背景應用濾鏡，產生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用濾色模式（screen）實現文本視頻蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各種不規則形狀。如果和動畫結合也會相當有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以將多個文字疊在一起，并按比例裁切成多分，再應用交錯動畫，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分

鏤空效果

雖然clip-path能裁切出形狀，但它無法鏤空，因為形狀的里面它管不著

可能有人（包括我）會用偽元素來“模擬”鏤空（通過設置同樣的背景色），但這樣并非真的鏤空，換了個背景或浮在圖片上就會暴露出來，這時我們就要求助于遮罩了

假設，你想制作一個空心的圓環，那么你只需將一個徑向漸變作為元素的遮罩，并且第一個color-stop設置為透明，其他的color-stop設置為其他顏色即可，因為遮罩的定義就是只顯示遮罩圖片非透明的部分

注意：為了消除鋸齒，這個徑向漸變的中間需要有一個額外的color-stop用于緩沖，長度設置為原長度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，適合立體感強的作品

本demo地址：Card Flip Reflection

web animations

雖然這并不是一個CSS特性，但是它經常用于完成那些CSS所做不到的事情

那么何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了

跟蹤鼠標的位置

目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行

通過查閱相關的DOM API，發現在監聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置

既然能夠獲取鼠標的位置，那么跟蹤鼠標的位置也就不是什么難事了：通過監聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，并用此坐標來當作鼠標的位移距離，監聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此坐標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能

讓漸變動起來

目前來說，我們無法直接給漸變添加動畫，因為瀏覽器不理解要改變的值是什么類型

這時，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對顏色應用插值方法來進行動畫

還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變為100%，餅圖就會順時針旋轉出現

利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設置不同的顏色，應用交錯動畫，就有了下面這個炫麗的效果

本demo地址：Mawaru

彩蛋

將交錯動畫和偽類偽元素結合起來寫出來的慎重勇者風格的菜單

本demo地址：Shinchou Menu

在線咨詢

上一篇：JavaScript Frame對象
下一篇：Allavsoft for Mac(Mac視頻下載器

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS特征之一：層疊性

解CSS特征之一：層疊性

CSS層疊性的概念：

CSS層疊性的體現：

2：樣式有沖突樣式有沖突，同一級別不受優先級影響時

2-1：類別（class）樣式 VS 元素（標記）樣式

2-2：ID樣式 VS 類別（class）樣式

2-3：行內樣式 VS ID樣式

2-4： !important VS 行內樣式

二、方法之移除空格

三、使用margin負值

四、讓閉合標簽吃膠囊

五、使用font-size:0

六、使用letter-spacing

七、使用word-spacing

八、其他成品方法

box-shadow

內發光

text-shadow

發光文本

霓虹文本

偽3D文本

background-clip:text

gradient

linear-gradient

radial-gradient

conic-gradient

filter

融合效果

backdrop-filter

mix-blend-mode

clip-path

故障效果

mask

鏤空效果

-webkit-box-reflect

web animations

跟蹤鼠標的位置

CSS Houdini

讓漸變動起來

彩蛋

您的項目需求

2：樣式有沖突
樣式有沖突，同一級別不受優先級影響時