在本章中摊阀，我們就來關(guān)注下所有CSS里面的值和單位，這是基礎(chǔ)中的基礎(chǔ)踪蹬。通過學(xué)習(xí)胞此，那么你學(xué)習(xí)后面的內(nèi)容將會更加得心應(yīng)手。

1. 關(guān)鍵詞跃捣，字符串和其他文本數(shù)值

樣式表里基本都是文本漱牵，不過也有不少是數(shù)字或是顏色等，還有URL或是圖片疚漆。

關(guān)鍵詞

有些特定的詞在CSS是有特殊含義的布疙，比如none蚊惯，如果想要去掉html中超鏈接的下劃線，可以這樣做：

a:link, a:visited {text-decoration: none;}

全局關(guān)鍵詞

在CSS3中定義了3個全局的關(guān)鍵詞灵临，其實這里的全局的額意思是通用的意思截型，基本上每個屬性都可以使用。它們是：inherit儒溉， initial和unset宦焦。

inherit：這個關(guān)鍵詞就是希望元素能夠繼承父元素的屬性。一般來說都不用刻意指定顿涣，因為很多屬性是自動繼承的波闹，不過有些情況就不一定了，舉個例子：

  #toolbar {background: blue; color: white;}

<div id="toolbar">
    <a href="one.html">One</a> | <a href="two.html">Two</a> |
    <a href="three.html">Three</a>
    </div>

在上面這個例子中涛碑，雖然div本身會把樣式實現(xiàn)精堕，但是里面的a后代就不會，而是按照瀏覽器默認(rèn)的樣式進行顯示蒲障，這時候就可以使用繼承屬性：

#toolbar a {color: inherit;}

initial: 這個關(guān)鍵詞就是要把屬性的值進行初始化歹篓，比如font-weight的默認(rèn)值為normal。
雖然這開上去顯得比較傻揉阎，不過當(dāng)你明白不是所有值都有初始值的時候想法就會改變庄撮。距離來說color的初始值就完全依賴瀏覽器。這的意思是color一般會從瀏覽器的默認(rèn)偏好設(shè)置中獲取毙籽，雖然很少會有人去改默認(rèn)為黑色的默認(rèn)值洞斯，但萬一出現(xiàn)這種情況，將color設(shè)置為initial就是讓瀏覽器將默認(rèn)值重新設(shè)置回來坑赡。

unset: unset可以同時實現(xiàn)inherit和initial的功能烙如。如果屬性繼承了，那么unset設(shè)置后跟inherit是一樣的毅否；如果屬性沒有被繼承亚铁，那么unset的效果就跟initial一樣。

這些全局的值是所有屬性通用的搀突，但有個屬性只接受全局的關(guān)鍵詞，那就是all：

3_1.png

all代表了除了direction和unicode-bidi的所有屬性熊泵，所以說如果在一個元素上設(shè)置了all：inherit仰迁，那么意思就是讓所有的屬性都從父元素中繼承下來。來看個例子：

section {color: white; background: black; font-weight: bold;} 
#example {all: inherit;}

<section>
  <div id="example">This is a div.</div>
</section>

你可能會想div應(yīng)該繼承了section定義的color顽分，background和font-weight屬性徐许，沒錯，事實確實這樣卒蘸，不過不僅僅是這些雌隅，所有section有關(guān)的屬性都會被繼承翻默。所以有時候這并不是想要的結(jié)果，如果你只是想要繼承section定義的那幾個屬性恰起，那么可以這樣寫：

section {color: white; background: black; font-weight: bold;} 
#example {color: inherit; background: inherit; font-weight: inherit;}

字符串

字符串需要注意的點不多修械，一個是必須以',''這兩種分隔符來包圍，另一個是在字符串中需要引用其他字符時需要轉(zhuǎn)義检盼。例如換行符就是在\A后面直接加：

 "This is a better place \Afor a newline."

而如果只是想在書寫時換行肯污，而在顯示時不換行，則直接在行末用\符號就行了吨枉，在實際顯示時解析器會自動忽略蹦渣，下面兩個字符串是一樣的效果：

 "This is the right place \
    for a newline."
    "This is the right place for a newline."

URL

如果你寫過網(wǎng)頁，一定很熟悉URL了貌亭，統(tǒng)一的格式基本都是：

url(protocol://server/pathname)

這個例子中定義了一個絕對路徑柬唯，絕對路徑到哪都是通用的，而相對路徑相對于的是使用的文檔圃庭，其通用形式為：

url(pathname)

在CSS中锄奢，相對路徑相對的是樣式本身，而不是引用樣式的HTML文檔（很重要）冤议。舉例來說斟薇，如果有個外部樣式import了其他樣式，那么使用一個相對路徑來引用的時候恕酸，這個相對路徑相對的是第一個樣式文件堪滨。
比如一個html文檔的地址為：http://web.waes.org/toppings/ tips.html, 而在文檔中應(yīng)用的樣式為：

<link rel="stylesheet" type="text/css" >

而在basic.css中引入另一個樣式：

@import url(special/toppings.css);

那么猜猜瀏覽器搜尋toppings.css的路徑是什么呢？答案就是http:// web.wa es.org/styles/special/toppings.css,而不是http://web.wa es.org/toppings/ special/toppings.css.

注意在url和括號之間是沒有空格的,如果有空格則整個表達(dá)式會報錯并被忽略：

body {background: url(http://www.pix.web/picture1.jpg);} /* correct */
body {background: url (images/picture2.jpg);} /* INCORRECT */

圖片

圖片的語法是<image>蕊温，它的值就是一個<url>的值袱箱，在高級的瀏覽器中，<image>代表了下面三種特性：

1. <url>: 一個指向外部資源的地址义矛；
2. <image-set>：一系列的圖片來針對不同的設(shè)備及尺寸來顯示不同发笔。截止2016年末，瀏覽器中支持image-set的只有safari凉翻，chrome和桌面版的Opera了讨。
3. <gradient>：定義圖片的漸變，可以是linear線性的或是radial輻射的制轰，將在第九章詳細(xì)介紹前计。

標(biāo)識符

有些屬性可以接受用戶自己定義的某些符號，而最多的就是生成的list counter垃杖。標(biāo)識符(Identifier)本身其實是一些區(qū)分大小寫的單詞男杈，只要不和CSS本身定義的重復(fù)就可以了。

2. 數(shù)值和百分比

這兩類是后面很多值類型的基礎(chǔ)调俘，舉例來說伶棒，font-size就可以用em標(biāo)識符旺垒，前面跟上對應(yīng)的數(shù)值來表示。具體到底有哪些數(shù)值類型肤无，我們一一看下先蒋。

整型

整型是最常見的，前面可以跟+-號來表示正負(fù)舅锄。

通用數(shù)字

這里指的是包括上面整型和浮點型的數(shù)字鞭达，也支持正負(fù)表示。不過有些屬性（像z-index）只接受整型皇忿，而有些數(shù)字只接受浮點型(像flex-grow)畴蹭。

百分比

number后面跟%，百分比都是有一個參考的鳍烁，一般都是元素的父元素叨襟。

分?jǐn)?shù)

分?jǐn)?shù)值后面跟著fr的標(biāo)識，例如一分就是1fr幔荒，這個概念是在Grid布局中提到的糊闽，主要用于在一個未受限的空間中對空間進行分割，我們將在第13章詳細(xì)討論爹梁。

3. 距離

很多的CSS特性都需要用到長度的測量右犹，而在CSS也有多種測量方式。從表達(dá)式來看長度單位基本都是相同的姚垃，正負(fù)號后跟一個單位念链，數(shù)字的話包括整數(shù)，小數(shù)等积糯。有個特例就是0掂墓，不需要跟單位。而所有的值按照布局特點可以分為絕對長度單位和相對的長度單位看成。

絕對長度單位

一共有6種的絕對單位：

1. 英寸(inches, in)
   參照的是美國的英寸計量單位君编，果然美國對CSS的貢獻(xiàn)還是挺大的。
2. 厘米(cm)
   國際標(biāo)準(zhǔn)單位
3. 毫米(m)
   國際標(biāo)準(zhǔn)單位
4. 四分之一毫米(q)
   奇葩的單位川慌，貌似只有Firefox上會使用吃嘿，只能說腦洞真大。
5. 點(Points, pt)
   印刷單位, 一英寸分布72個點梦重。
6. Picas(pc)
   Picas是另一個印刷的單位兑燥，1pc=12pt, 6pc=1in

7.像素(px)
像素本身就代表屏幕上的一個點，不過在CSS里面對像素的定義更加抽象：每英寸上面覆蓋96個像素忍饰。不過很多瀏覽器是不太在意這個定義的贪嫂，在頁面放大縮小或者打印的時候寺庄，會引入一個叫尺寸因子的變量(scaling factor)來調(diào)整實際的顯示像素艾蓝，設(shè)置為100px的元素實際顯示時可能就會有變化力崇。

絕對的單位在打印文檔里面特別有用。

像素長度

像素其實顯示出來就是一個個馬賽克赢织，如果你放大看的話亮靴。

分辨率單位

隨著media query和響應(yīng)式設(shè)計的引入，出現(xiàn)了三種描述顯示分辨率的單位：

1. Dots per inch （dpi）
   定義為每英寸上的顯示dot數(shù)

2. Dots per centimeter（dpcm）
   跟dpi類似于置，只不過長度換成了1厘米茧吊。

3. Dots per pixel unit （dppx）
   每個CSS px單元所顯示的dot數(shù)目。對于CSS3來說八毯，1dppx等于9dpi搓侄。不過很有可能未來的CSS版本中會有所修改。
   截止2017年末话速，上述三個單位還只能用在媒體查詢中讶踪。舉個例子：

@media (min-resolution: 500dpi) { /* rules go here */
}

相對長度單位

之所以稱為相對是因為其數(shù)值是有一個參照值的，因此相對值最終顯示的結(jié)果依賴于多個因素泊交，比如說屏幕的分辨率乳讥，視口的寬度，用戶的偏好設(shè)置等等廓俭。

em和ex單位

首先我們來看看em和ex單位云石，這兩個非常接近。em的定義為相對于一個給定字體的font-size研乒。所以其實你就可以想見每個元素都可以是不一樣的基準(zhǔn)值汹忠，還是距離來說，分別定義h1告嘲，h2, p三個元素的字體大小错维，然后再基于此頂一個通用的margin-left，來看下效果：

h1 {font-size: 24px;}
h2 {font-size: 18px;}
p {font-size: 12px;}
h1, h2, p {margin-left: 1em;} small {font-size: 0.8em;}
<h1>Left margin = <small>24 pixels</small></h1> <h2>Left margin = <small>18 pixels</small></h2> <p>Left margin = <small>12 pixels</small></p>

4-3.png

當(dāng)設(shè)定玩字體大小后橄唬，em的值是相對于父元素的font-size的赋焕。有人會很好奇，這個em的命名是怎么來的仰楚，理論上說這是個印刷術(shù)語隆判，e代表equal， m代表小寫的m僧界，而這個m是一個老的印刷術(shù)語侨嘀。類比下em，那ex的定義是小寫x的高度捂襟。
可能不好理解咬腕，來舉個例子：如果兩個段落的字體大小都是24ex，但每個段落的字體是不相同的葬荷，那么最后顯示的結(jié)果也是不相同的涨共，因為每個字體中對于小寫x的高度都是不一樣的纽帖。

4-4.png

rem單位

就像em單位一樣，rem單位也是基于字體的大小举反。不同的是rem相對的對象是root根元素懊直。在HTML中就是html元素。
來看下面的例子：

<p> This paragraph has the same font size as the root element thanks to inheritance.</p>
<div style="font-size: 30px; background: silver;">
  <p style="font-size: 1em;">This paragraph has the same font size as its parent
element.</p>
  <p style="font-size: 1rem;">This paragraph has the same font size as the root
element.</p> 
</div>

4-5.png

從效果上看rem修正了傳統(tǒng)的從祖先繼承的字體大小火鼻。根元素字體可以這樣設(shè)置：

html {font-size: 13px;}

那如果根元素設(shè)置的是百分比怎么辦室囊？

html {font-size: 75%;}

那其實這個百分比相對的是用戶的默認(rèn)大小。

ch單元

ch單位是CSS3新加入的魁索，代表的是'one character'融撞，CSS3的官方定義為：

Equal to the advance measure of the “0” (ZERO, U+0030) glyph found in the font used to render it.

CSS中將ch對應(yīng)到某個字體中字符0的‘寬度’谓传，這和em的計算方式是很接近的匿情。那么怎么才能直觀的看到ch是基于字符寬度來定義的呢展辞。下面的例子我們給出不同字體時的顯示效果姻采，上面是對應(yīng)的字符個數(shù)炉奴，下面是對應(yīng)的基于img的ch樣式設(shè)置鼠渺，來對比下吧：

img {height: 1em; width: 25ch;}

4-6.png

如果是等寬字體（monospace font）的話提前，所有的字符寬度正好都是1ch崇渗，而在比例字體中（覆蓋絕大部分西文字體）牧挣，字符可能與‘0’的寬度有變化急前，所以不一定是1ch。

跟視口相關(guān)的單位

另一塊在CSS3中引入的單位是3個跟視口相關(guān)的瀑构。那什么是視口的裆针，很多情況下就是你所看到的顯示區(qū)域，對于瀏覽器來說是它的窗口大小寺晌，對于打印設(shè)備來說是它的打印范圍等等世吨。

1. 視口寬度單位（viewport width unit， vw）
   這一單位將視口的寬度進行了100等分呻征，例如如果寬度為937px的話耘婚，那么1vw就是9.37px。

2. 視口高度單位(viewport height unit, vh)
   同上講視口高度100等分陆赋。

3. 視口最小單位（viewport minimum unit沐祷， vmin）
   vmin的取值為同時對視口寬度和高度進行100等分，然后取兩個方向上最小的一分作為其值攒岛。例如對于一個寬度937px赖临，高度650px，那么1vmin就等于6.5.

4. 視口最大單位（viewport maximum）
   跟上面相對取最大值灾锯，例如對于一個寬度937px兢榨，高度650px，那么1vmax就等于9.37px.

來看個具體的例子：

div {width: 50vh; height: 33vw; background: gray;}

4-7.png

上面有沒有發(fā)現(xiàn)，vh和vw其實不是限定在自己的坐標(biāo)軸上的吵聪，width同樣可以用vh的高度單位來設(shè)置誊册。

4. 計算數(shù)值

有時候需要計算相關(guān)的數(shù)值，CSS本身提供了calc()來處理暖璧。在括號里面可以放入簡單的數(shù)學(xué)表達(dá)式，加減乘除和括號都是可以的君旦。
舉個例子澎办，如果想要將寬度設(shè)置為父元素的90%減去2em，就可以這樣寫：

p {width: calc(90% - 2em);}

有沒有發(fā)現(xiàn)calc中的數(shù)值可以有2種方式金砍，其實像長度局蚀，頻率，角度恕稠，時間琅绅，百分比，數(shù)值都是允許的鹅巍。不過如果以為可以隨便亂用的就大錯特錯了千扶，在計算前calc會做檢查來確保數(shù)值的計算兼容性：

1. 加減號的兩邊必須是相同的類型。例如5+2.7是可以的骆捧，而5em+2.7就不允許澎羞，而5em + 20px就是允許的，因為em和px都是長度單位敛苇，而5em和2.7妆绞，前者是長度單位，后者卻不是枫攀。
2. 如果是乘號括饶，那么符號兩邊至少得有一個數(shù)字，比如2.5rem * 2或是2 2.5rem都是可以的来涨，但是2.5rem * 2rem就是不合理的图焰。
3. 如果是除號/，那么右邊的元素必須是數(shù)字.
4. 除號右邊是0也是不允許的蹦掐。

另外一個值得注意的限制就是加減號兩邊都得有一個空格楞泼，而乘除就沒有這個要求，這個要求主要為了區(qū)別負(fù)數(shù)笤闯。
同樣在標(biāo)準(zhǔn)中也規(guī)定了calc中的表達(dá)式的操作數(shù)上限為20個堕阔，如果超過這個限制，也會被認(rèn)為是無效的表達(dá)式颗味。

5. 屬性數(shù)值

在一些css屬性中超陆，還可以吧html元素的屬性獲取到，這要借助attr()表達(dá)式。

p::before {content: "[" attr(id) "]";}

沒怎么見過时呀，沒事张漂，我們將在15章里面詳細(xì)說明。上面這個表達(dá)式的功能就是在p的before位置放置內(nèi)容谨娜，而這個內(nèi)容是由[]加上<p>中的id字段組成的航攒。來看下：

<p id="leadoff">This is the first paragraph.</p> <p>This is the second paragraph.</p>
<p id="conclusion">This is the third paragraph.</p>

4-8.png

理論上來說任何屬性值都可以通過attr()獲取到。

input[type="text"] {width: attr(maxlength em);}

<input type="text" maxlength="10">

同樣是理論上趴梢，上面的input元素的寬度被設(shè)置為10em漠畜。

6. 顏色

學(xué)習(xí)css的第一個問題很可能是怎么設(shè)置我頁面上的顏色，而一般有兩種選擇：一是使用一定數(shù)量的預(yù)先定義好的顏色名稱坞靶，比如red憔狞，purple等；二是使用16進制的顏色來表示彰阴。

有名稱的顏色

最早由16種基本的顏色瘾敢，這些顏色是在HTML 4.01定義的：

t4-1.png

還是舉個例子吧：

h1 {color: silver;} 
h2 {color: fuchsia;} 
h3 {color: navy;}

4-9.png

截止到2017年年底，最新的CSS顏色已經(jīng)擴展到了148中尿这，全部的列表會在附錄C中列出簇抵。這些都是由CSS的Color Module Level 4定義的。

RGB和RGBa

很多人都知道RGB射众，但是不知道哦括號中除了正整數(shù)還可以傳百分比正压，0%~100%， 整數(shù)范圍0~255.
比如下面用百分比定義了黑白色：

 rgb(100%,100%,100%)
 rgb(0%,0%,0%)

再用整數(shù)實現(xiàn)一遍：

rgb(255,255,255)
rgb(0,0,0)

不過請記住责球，不要混用百分比和數(shù)值焦履。例如像這樣的表達(dá)式是明顯錯誤的：rgb(255,66.67%,50%).為了更好的顯示rgb的顏色變化，我們來挨個遍歷下：

p.one {color: rgb(0%,0%,0%);} 
p.two {color: rgb(20%,20%,20%);} 
p.three {color: rgb(40%,40%,40%);} 
p.four {color: rgb(60%,60%,60%);} 
p.five {color: rgb(80%,80%,80%);} 
p.six {color: rgb(0,0,0);} 
p.seven {color: rgb(51,51,51);}
p.eight {color: rgb(102,102,102);} 
p.nine {color: rgb(153,153,153);} 
p.ten {color: rgb(204,204,204);}

4-10.png

另外雏逾，rgb中分?jǐn)?shù)的百分比也是支持的

h2 {color: rgb(25.5%,40%,98.6%);}

如果給定數(shù)值超出了范圍嘉裤，那么瀏覽器就會自動修正到最接近的值：

P.one {color: rgb(300%,4200%,110%);} /* 100%,100%,100% */ 
P.two {color: rgb(0%,-40%,-5000%);} /* 0%,0%,0% */ 
p.three {color: rgb(42,444,-13);} /* 42,255,0 */

rgba 顏色

在CSS3中，rgba在rgb三通道的前提下新增了alpha透明度通道栖博，如果想要半透明效果屑宠，則可以：

 rgba(255,255,255,0.5)
 rgba(100%,100%,100%,0.5)

alpha通道設(shè)定的范圍為[0,1]，0代表完全透明仇让，1代表完全不透明典奉。所以說 rgb(0,0,0) 和 rgba(0,0,0,1) 是完全一樣的。來看幾個簡單的例子：

p.one {color: rgba(0,0,0,1);} 
p.two {color: rgba(0%,0%,0%,0.8);} 
p.three {color: rgba(0,0,0,0.6);} 
p.four {color: rgba(0%,0%,0%,0.4);} 
p.five {color: rgba(0,0,0,0.2);}

4-11.png

跟上面一樣丧叽，你可以可以超出范圍卫玖，不過系統(tǒng)會自動修正，因為是0到1范圍的值踊淳，所以用百分比也是可以的假瞬。

16進制的rbg顏色

16進制顏色長啥樣呢：

h1 {color: #FF0000;}  /* set H1s to red */
h2 {color: #903BC0;}  /* set H2s to a dusky purple */
h3 {color: #000000;}  /* set H3s to black */
h4 {color: #808080;} /* set H4s to medium gray */

16進制顏色在web設(shè)計上已經(jīng)有悠久的歷史了，最早是在HTML，后面CSS也引進過來脱茉。組成也很簡單剪芥，對應(yīng)于rgb的三個通道，這里用范圍[00, FF]的值來表示一個通道琴许，然后再把三個通道連在一起税肪，因此想rgb(255,255,255)就等價于#FFFFFF.其本質(zhì)都是用1個字節(jié)的數(shù)據(jù)來表示一個通道的顏色值。
16進制中每個通道相同的數(shù)值可以簡寫：

h1 {color: #000;}  /* set H1s to black */
h2 {color: #666;}  /* set H2s to dark gray */
h3 {color: #FFF;} /* set H3s to white */

那么瀏覽器是怎么實現(xiàn)的呢榜田？其實當(dāng)檢測到是3位的時候益兄，瀏覽器讀取每一位，然后將其替換一下串慰。比如#6FA替換為#66FFAA。

16進制的rgba顏色

截止到2017年底唱蒸，為16進制顏色引入了第4個16進制的值邦鲫，來對應(yīng)rgba的alpha通道。來看下例子吧：

p.one {color: #000000FF;} 
p.two {color: #000000CC;} 
p.three {color: #00000099;} 
p.four {color: #00000066;} 
p.five {color: #00000033;}

4-12.png

第4位同樣享受之前說的縮進神汹，#663399AA 可以寫成#639A庆捺。所以說綜上其實16進制的#后面可以跟3位，4位屁魏，6位滔以，8位共4種長度的數(shù)值。

HSL和HSLa 顏色

CSS3中引入了HSL顏色氓拼，三個字母分別代表Hue（色調(diào)）你画，Saturation（飽和度），Lightness（亮度）桃漾。這是描述顏色的新的3個維度坏匪。其中色調(diào)的范圍是[0,360]的角度值，飽和度的范圍是[0, 100]的百分?jǐn)?shù)值撬统，亮度也是[0, 100]
的數(shù)值适滓。色調(diào)在展示的時候是一個彩色的圓環(huán)，紅色為0度恋追，就像下面這張圖：

4-13.png

色調(diào)可能還好理解凭迹，但是飽和度和亮度可能有點難度。飽和度其實表現(xiàn)的是顏色的密度苦囱。如果飽和度設(shè)為0%那么就是一片灰嗅绸，無論色調(diào)設(shè)置為啥都是一樣的，而飽和度設(shè)置為100%則會在給定亮度下覆蓋全部的顏色區(qū)域撕彤。同理朽砰，亮度表現(xiàn)的是顏色的亮暗，如果亮度等于0%就變成黑色，而如果設(shè)置為100%就會變成白色瞧柔。具體的來看幾個例子吧：

p.one {color: hsl(0,0%,0%);} 
p.two{color: hsl(60,0%,25%);} 
p.three {color: hsl(120,0%,50%);} 
p.four {color: hsl(180,0%,75%);} 
p.five {color: hsl(240,0%,0%);} 
p.six {color: hsl(300,0%,25%);} 
p.seven {color: hsl(360,0%,50%);}

4-15.png

我們可以把之前說的16個命名的顏色映射到圖上漆弄，看下他們的位置：

4-16.png

就像rgb有rgba一樣，hsl也有hsla造锅，alpha的范圍還是[0, 1]：

p.one {color: hsla(0,0%,0%,1);} 
p.two {color: hsla(0,0%,0%,0.8);} 
p.three {color: hsla(0,0%,0%,0.6);} 
p.four {color: hsla(0,0%,0%,0.4);} 
p.five {color: hsla(0,0%,0%,0.2);}

顏色的關(guān)鍵詞

對于顏色來說有兩個比較重要的關(guān)鍵詞: transparent和currentColor撼唾。基本上能用到顏色的地方都可以使用哥蔚。
transparent顧名思義就是把顏色設(shè)置為透明倒谷，等同于rgba(0,0,0,0)。雖然在設(shè)置文本顏色的時候很少使用糙箍，不過像元素的背景默認(rèn)色渤愁，漸變等都是非常常見的。

而curentColor就有點意思了深夯，它有點像個顏色的提取器抖格，將本元素的color屬性值提取出來作為參數(shù)值。舉個例子：

main {color: gray; border-color: currentColor;}

這就把gray復(fù)制到了border-color咕晋。

7. 角度

我們剛剛討論到了HSL顏色里面H就是用角度來設(shè)置的雹拄，那這個角度到底怎么表示呢？在文章中我們?nèi)€代號<angle>掌呜，數(shù)值的組成就是數(shù)字加個后綴滓玖，后綴有下面4種：

1. deg: 跟數(shù)學(xué)上一樣，360度一圈
2. grad： 用的比較少质蕉，400grad環(huán)繞一圈,英文中還有專門的術(shù)語grades或是gons
3. rad： 這就比較熟悉了势篡，2π 環(huán)繞一周
4. turn：相當(dāng)于一圈，這個單位特別在動畫旋轉(zhuǎn)的時候很有用模暗，因為有時候你需要讓某個元素旋轉(zhuǎn)幾圈殊霞。

值得注意的是，角度單位大多是用在2D和3D的tranform中汰蓉，尤其在HSL顏色中绷蹲，角度單位是不能用的，因為色調(diào)的角度數(shù)值默認(rèn)就是deg顾孽。

8. 時間和頻率

為了表述一段時間祝钢，引入了時間的單位，組成的話由數(shù)字和后面的單位組成若厚。單位只有兩種：s（秒）和ms（毫秒）拦英。時間的單位大多是也是用在過渡和動畫中，舉個例子：

a[href] {transition-duration: 2.4s;} 
a[href] {transition-duration: 2400ms;}

接著介紹下頻率單位测秸，有赫茲hz和千赫mhz疤估，單位大小寫是不敏感的灾常，也來兩個例子：

h1 {pitch: 128hz;} 
h1 {pitch: 0.128khz;}

9. 位置

位置單位主要用于在背景范圍內(nèi)如何擺放元素，不過其語法還是有點復(fù)雜的：

t4-2.png

如果你只定義了一個值铃拇，那么第二個值center是默認(rèn)帶上的钞瀑，例如left等于left center。而且在值得設(shè)置上慷荔，如果給了2個值雕什，例如25% 25px， 那么前者默認(rèn)是表示水平方向显晶，后者默認(rèn)是表示垂直方向贷岸。所以像25% left的這種表達(dá)式都是不合理的。但是另一方面磷雇，如果你給的2個值雖然順序反了偿警，但是正好覆蓋了水平和垂直方向，也是可以的唯笙。比如：right 35px螟蒸。

接下來考慮4個值的情況，那么規(guī)則是第2和第4個值作為水平和垂直方向的偏離值睁本，例如right 10px bottom 30px就表示從右邊起10px的位置和從底部起30px的位置尿庐。

有人會問忠怖，那傳入3個值怎么辦呢堰，那么規(guī)則對標(biāo)4個值的情況，只不過第4個值默認(rèn)是0.

10. 自定義數(shù)值

本書是在2017年底寫成的凡泣，而截至到這時候枉疼，正好CSS有新的特性添加，稱為custom properties鞋拟÷钗可以稱為自定義屬性吧，不過它們的主要用途其實就是創(chuàng)建css的變量贺纲，來看個例子：

html {
--base-color: #639; --highlight-color: #AEA;
}
h1 {color: var(--base-color);}
h2 {color: var(--highlight-color);}

4-17.png

注意聲明css變量的語法航闺，前面有兩個橫杠--，變量是大小寫敏感的猴誊，所以這兩個值--main-color 和 --Main-color是不一樣的潦刃。
雖然這些值很容易被稱為CSS變量，不過不要真把它們當(dāng)成變量了懈叹，它們其實更像是宏乖杠，定義完后會把對應(yīng)的位置做一個替換。

另一個有意思的關(guān)于自定義屬性的特點就是它們其實是有上下文的澄成，來看個例子：

html {
--base-color: #639;
} aside {
--base-color: #F60; }
h1 {color: var(--base-color);} <body>
<h1>Heading 1</h1><p>Main text.</p>
<aside>
<h1>Heading 1</h1><p>An aside.</p>
</aside>
<h1>Heading 1</h1><p>Main text.</p> </body>

4-18.png

如果害怕有兼容性問題胧洒，可以采取下面的方式來進行兼容：

@supports (color: var(--custom)) {
/* variable-dependent styles go here */
}
@supports (--custom: value) {
        /* alternate query pattern */
}