css_04 | CSS——CSS 值和单位
前言： 本篇也是一篇純基礎(chǔ)、純理論文章，但重要性毋庸置疑：“……在利用 CSS 能做的幾乎所有工作中，其基礎(chǔ)都是“單位”，這是影響所有屬性的“顏色”、“距離”和“大小”的一種元素……如果理解了這里介紹的概念，你就能更快地學(xué)習(xí)和使用 CSS 的余下內(nèi)容”。
1 指定顏色
對于“顏色”的學(xué)習(xí)，讓我們先認(rèn)真復(fù)習(xí)文章：《web_05 | Web 前置知識——用李濤高手之路前3節(jié)課開啟我們光與色的大門》。
在此篇基礎(chǔ)上，我們可以很輕松的認(rèn)識到：一個(gè) Web 創(chuàng)作人員至少可以用 3 種方法來設(shè)置“顏色”。
1.1 按“顏色名”指定顏色
CSS2.1 定義了 17 種顏色名，CSS3 中包含了基于標(biāo)準(zhǔn) X11 RGB 值的 140 種顏色的擴(kuò)展顏色表。如下例，這些顏色可以直接以“名字”的方式拿來用，大多數(shù)瀏覽器都能識別。
h1 {color: red; }h2 {color: green; }h3 {color: maroon; } ? /*褐紅色*/ 復(fù)制代碼但，這種顏色展示方式的弊端就在于，沒辦法指定色譜中任意的顏色。
1.2 函數(shù)式 RGB 指定顏色
如下例，可以用“整數(shù)記法”，也可以用對應(yīng)的“百分?jǐn)?shù)記法”。二者沒有孰優(yōu)孰劣之分，實(shí)際工作中“整數(shù)記法”更常用，更有用。
??百分?jǐn)?shù)是針對“255”來相應(yīng)計(jì)算的，因?yàn)?#xff0c;RGB 三者中的任何一種光都有 0-255 個(gè)顏色的位置（0 是接近無顏色，255 就是很純的紅、綠、藍(lán)）。實(shí)際工作中，沒必要對二者進(jìn)行轉(zhuǎn)換。
h1 {color: rgb(255,0,0); } ? ? ? ? /*紅色*/h3 {color: rgb(50%,0%,0%); } ? ? ? /*褐紅色*/h3 {color: rgb(128,0,0); } ? ? ? ? /*褐紅色*/ 復(fù)制代碼1.3 十六進(jìn)制 RGB 指定顏色：
h1 {color: #CC6600; } 復(fù)制代碼??上例代碼中，#CC6600 就是一個(gè)十六進(jìn)制碼。格式為：
- 以 # 開頭
- 按順序分別用兩位數(shù)字指定紅、綠、藍(lán)的分量
- CC 為“紅”的分量、66 為“綠”的分量、00 為“藍(lán)”的分量
十六進(jìn)制碼并不是基于 0-9 這 10 個(gè)數(shù)字，而是基于 0-F 這 16 個(gè)數(shù)字：0、1、2、3、4、5、6、7、8、9、A（對應(yīng) 10）、B（對應(yīng) 11）、C（對應(yīng) 12）、D（對應(yīng) 13）、E（對應(yīng) 14）、F（對應(yīng) 15）。
把“十六進(jìn)制碼” #CC6600 轉(zhuǎn)化為“十進(jìn)制”：
-
將十六進(jìn)制顏色分解為“紅”、“綠”、“藍(lán)”份量：
紅：CC
綠：66
藍(lán)：00 -
以 CC 為例，我們知道，十進(jìn)制用兩位數(shù)最大只能表示 99 ，而十六進(jìn)制是想通過用兩位數(shù)來表示 0-255 這所有 256 個(gè)值。
那意思就是，十進(jìn)制是逢十進(jìn)一，而十六進(jìn)制是逢十六進(jìn)一。
那同為兩位數(shù) CC ，在十進(jìn)制下，是十位的 C 個(gè)十、個(gè)位的 C 個(gè) 1；而十六進(jìn)制下，就是十六位下的 C 個(gè)十六、個(gè)位的 C 個(gè) 1。
故：十六進(jìn)制下的 CC 轉(zhuǎn)化為十進(jìn)制為：12 ??16+12 ??1=204。 -
同理得 66：6 ??16+6 ??1=102； 00 ：0 ??16+0 ??1=0。
即：
等同于：
h1 {color: rgb(204,102,0); } 復(fù)制代碼也等同于：
h1 {color: rgb(80%,40%,0%); } 復(fù)制代碼?當(dāng)然，要把 RGB 十進(jìn)制轉(zhuǎn)化為十六進(jìn)制則是：用十進(jìn)制數(shù)字?16，所得數(shù)字小數(shù)點(diǎn)前的整數(shù)部分為“十六位”；再將小數(shù)點(diǎn)后的數(shù)乘以 16，所得的數(shù)為個(gè)位。
2 絕對長度單位
描述現(xiàn)實(shí)世界的長度單位有很多。
厘米（cm）、毫米（mm）、英寸（in）、點(diǎn)（pt）、派卡（pc）等都屬于絕對長度單位。“點(diǎn)”和“派卡”是印刷術(shù)語，用作印刷的度量單位。
- 1 英寸=2.54 厘米
- 1 厘米=0.394 英寸
- 1 英寸=72 點(diǎn)
- 1 英寸=6 派卡
- 1 派卡=12 點(diǎn)
為什么我們要使用這么多的單位？可以簡單理解成不同地區(qū)對長度單位的定義不同，有各種各樣的歷史遺留問題。
我們在現(xiàn)實(shí)世界中描繪的長度，是一維空間（點(diǎn)到點(diǎn)的長度表示的內(nèi)容）的度量，是客觀存在且固定的物理距離，只是人們會用不同的單位去表達(dá)。而對于電子屏幕，使用的長度單位和方式，和一維世界是不同的。
對于當(dāng)今的編程語言來說，長度是一個(gè)相對的概念。
3 相對長度單位
3.1 px
顯示器成像是由無數(shù)個(gè)可以發(fā)出單一色彩的顯像管組成，而這個(gè)最小的成像單位和長度，我們就稱為——像素。而一臺顯示器，包含的有效像素，即稱為——分辨率，通常使用寬、高的像素?cái)?shù)量進(jìn)行標(biāo)示。理論上越大的分辨率，可以容納的畫面內(nèi)容就越多（顯示的內(nèi)容更多、更清晰）。
px 被定義為相對單位，是因?yàn)樗Q于顯示器的分辨率。一旦分辨率確定，設(shè)置為 px 的尺寸就成為固定尺寸，不會自動縮放。
但，關(guān)于 px 我們還有以下信息需要掌握：
如果我們同時(shí)使用分辨率為 1920*1080 的兩個(gè)屏幕，尺寸不一樣，那么就出現(xiàn)了新的概念—— PPI ，即“每英寸包含的像素?cái)?shù)量”（像素的密度單位，PPI 值越高，畫面的細(xì)節(jié)就會越豐富）。
DPI ——是指輸出分辨，針對輸出設(shè)備而言的，每英寸包含的墨點(diǎn)數(shù)量。
??所以，像素（px）在真實(shí)世界中的大小是不固定的。曾經(jīng)，普通的顯示器里，我們用像素就可以描述大多數(shù)的情況。但是，“視網(wǎng)膜屏幕 retina”誕生后，舊有平臺的圖像如果根據(jù)其實(shí)際像素在視網(wǎng)膜屏幕中顯示時(shí)，字體、圖標(biāo)等就會變得特別小：
為了適應(yīng)實(shí)際使用體驗(yàn)和兼容性，廠商發(fā)展出了“像素合并技術(shù)”（輸出來的圖像、文字比以前更細(xì)膩，因?yàn)榭梢燥@示的細(xì)節(jié)更多），過去 1px 的面積包含了更多的像素單位：
所以，很多時(shí)候直接使用 px 作為長度單位已經(jīng)無法滿足日常的需求，需要依具體情況而定。
?_在以后學(xué)習(xí)的移動端前端開發(fā)中，_ iOS 和安卓沒有“像素”這個(gè)單位，我們用 PT/DP 來描繪在一個(gè)屏幕中各個(gè)元素的大小。
3.2 em
1em 被定義為一種給定字體的 font-size 值。
如下例，當(dāng) em 用于設(shè)置元素的 font-size 屬性本身時(shí)，em 的值會相對于父元素的字體大小改變。
<body>回答問好<div class="div1">fine<div class="div2">thank you?<div class="div3">and you?</div></div></div> </body> 復(fù)制代碼div {font-size: 1.5em; } 復(fù)制代碼計(jì)算關(guān)系是這樣的：
回答問好?的 font-size 是繼承自跟元素 html，html 的尺寸是瀏覽器默認(rèn)尺寸 14px ；
fine?的 font-size=1.5 ??14px = 21px ；
thank you?的 font-size=1.5 ??21px = 31.5px ；
and you??的 font-size=1.5 ??31.5px = 47.25px?；
如果手動設(shè)置 thank you?的 font-size 為 40px ，那么 and you??的 font-size 應(yīng)該為 1.5 ??40px = 60px 。
但，由于 em 的值會隨元素的不同而發(fā)生變化，這給計(jì)算帶來極大的困難。于是，就產(chǎn)生了 rem 這個(gè)相對單位。
3.3 rem
rem——root em 是相對于根元素 <html> 的字體大小單位。
例如還是上面的 html 代碼，添加如下樣式：
此時(shí) and you??的 font-size = 1.5 ??14px = 21px = 1.5 ??html 的 font-size 。
3.4 ex
ex 是一個(gè)相對長度單位，1ex 被定義為一種給定字體的小寫字母 “x” 的高度。因此，這個(gè)值會隨字體的不同而變化。
然而，很多瀏覽器都沒有內(nèi)置 ex 高度值，只是簡單的取 em 的值，再取其一半作為 ex 的值。所以，一般不推薦使用 ex 這個(gè)長度單位。
3.5 視口單位 vw、vh、vmin、vmax
3.5.1 vw
視口寬度的1/100 。
3.5.2 vh
視口高度的1/100 。
例如，桌面端瀏覽器視口尺寸為 650px，那么 1vw = 650 * (1/100) = 6.5px (這是理論推算得出，一般瀏覽器不支持 0.5px，那么實(shí)際渲染結(jié)果可能是 7px)。
3.5.3 vmin
vw 和 vh 中的最小值。
3.5.4 vmax
vw 和 vh 中的最大值。
例如，瀏覽器的寬度設(shè)置為 1200px，高度設(shè)置為 800px， 1vmax = 1200/100px = 12px， 1vmin = 800/100px = 8px。如果寬度設(shè)置為 600px，高度設(shè)置為 1080px，1vmin 就等于 6px，1vmax 則為 10.8px。
后記： CSS 值和單位包含的面很廣，細(xì)小的知識點(diǎn)還有很多，且各個(gè)單位也各有優(yōu)缺點(diǎn)，需要在具體情況下酌情使用。不必一蹴而就，慢慢來，慢慢地把各個(gè)知識點(diǎn)擊破。
加油！
轉(zhuǎn)載于:https://juejin.im/post/5cb5bdfd6fb9a068b47b6f19
總結(jié)
以上是生活随笔為你收集整理的css_04 | CSS——CSS 值和单位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 借助码云快速安装 golang.org/
- 下一篇： 常用易忘CSS小技巧