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