?
論CSS常用單位的前世今生
?
目錄：
一、---------------------------淺析CSS的組成
二、----------------------------淺析CSS的值
三、----------------------------CSS的單位
3.1---------------------------css單位概括
3.2---------------------------絕對(duì)單位
3.2.1---------------------css像素單位：px
3.2.2---------------------pt、pc
3.2.3---------------------pt、pc
3.3---------------------------相對(duì)單位
3.3.1---------------------em和rem
3.3.2---------------------ex和 ch
3.3.3---------------------視窗相對(duì)單位
3.3.2---------------------角度單位
3.3.3---------------------百分比單位
3.3.2---------------------時(shí)間單位
3.3.3---------------------頻率單位
?
?
?
?
?
[if !supportLists]一、[endif]淺析CSS的組成
事實(shí)上CSS 是一門非常神奇的學(xué)科。我們?cè)诼暶魅魏我粋€(gè) CSS 的規(guī)則都可能會(huì)包括：
[if !supportLists]·?[endif]a：CSS 的選擇器
b：CSS屬性
?c：CSS的值
? d：CSS的單位
試?yán)鐖D：
而CSS 的值和單位是 CSS 相關(guān)的另一個(gè)獨(dú)立功能模塊，到目前為止，該模塊已到了 Level 4 階段（CSS Values and Units Module Level 4）。今天我們就來聊聊這個(gè)模塊里的內(nèi)容。
[if !supportLists]二、[endif]淺析CSS的值
事實(shí)上，CSS 不是每個(gè)規(guī)則都會(huì)同時(shí)包含 CSS 的屬性值和單位，因?yàn)楹芏鄬傩缘闹凳侵痪哂兄?，不具有單位的。比如上圖的color屬性，他的值就不帶單位，但可以是關(guān)鍵詞、字符串、函數(shù)等。你在寫 CSS 的時(shí)候可能會(huì)涉及到的 CSS 的值會(huì)有：
a：數(shù)值：長度值<length>，用于指定例如元素width、border-width、font-size等屬性的值，這些 值可能帶有單位，也可能不帶任何單位
b：百分比：可以用于指定尺寸或長度，例如取決于父容器的width、height或默認(rèn)的font-size
c：顏色：用于指定background-color、color等
d：坐標(biāo)位置：以屏幕的左上角為坐標(biāo)原點(diǎn)定位元素的位置，比如常見的background-position、top、 right、bottom和left等屬性
e：關(guān)鍵字：用于指定特定屬性的樣式，比如position、display等
f：函數(shù)：用于指定背景圖片或背景圖片的漸變，比如：
ps：還有其它類型這里不過多贅述。
[if !supportLists]三、[endif]CSS的單位
1、css單位概括
CSS 的單位對(duì)于 CSS 的值有是一個(gè)直接影響的。因?yàn)?CSS 的單位直接對(duì) CSS 的值的計(jì)算是有直接影響的，在 CSS 中單位的之間有一個(gè)關(guān)系圖，如下所示：
為了便于大家更好的理解和記住CSS 中單位相關(guān)的知識(shí)點(diǎn)，下圖是根據(jù) W3C 規(guī)范重新做的劃分：
那么在這篇文章中，我們主要圍繞著CSS 中常用單位來展開。介紹這些 CSS 單位使用的場景和使用細(xì)節(jié)著作權(quán)歸作者所有。
[if !supportLists]2、[endif]絕對(duì)單位：
不受任何屏幕大小或字體的影響。這些單位的顯示可能會(huì)根據(jù)不同的屏幕分辨率而有所不同，因?yàn)樗鼈內(nèi)Q于屏幕的DPI（每英寸上的點(diǎn)數(shù)）。絕對(duì)單位常用于一些物理測量上。在環(huán)境輸出已知的情形下非常有用。
a：css像素單位：px
根據(jù)維基百科解釋：它是圖像顯示的基本單元，既不是一個(gè)確定的物理量，也不是一個(gè)點(diǎn)或者小方塊，而是一個(gè)抽象概念。很多時(shí)候，px也常被稱為 CSS 像素。
像素單位被認(rèn)為是許多其他單位的測量基礎(chǔ)。實(shí)際上px是一個(gè)按角度度量的單位，即像素角度。
像素角度：1個(gè)參考像素即為從一臂之遙看解析度為96DPI的設(shè)備輸出（即1英寸96點(diǎn)）時(shí)，1點(diǎn)（即1/96英寸）的視角。它并不是1/96 英寸長度，而是從一臂之遙的距離處看解析度為96DPI的設(shè)備輸出一單位（即1/96英寸）時(shí)視線與水平線的夾角。通常認(rèn)為常人臂長為28英寸，所以它的視角是：(1/96)in?/ (28in?* 2 * PI）/ 360deg= 0.0213度圖解如下:
Ps:建議是電視機(jī)屏幕對(duì)角線的2.5到3倍長
px是一個(gè)絕對(duì)單位，但是由于各種設(shè)備的dpi不同，所以px也有其相對(duì)性
》在同一樣的設(shè)備上，每1個(gè) CSS 像素所代表的物理像素是可以變化的。
》在不同的設(shè)備之間，每1個(gè) CSS 像素所代表的物理像素是可以變化的。
因此，px雖然是絕對(duì)單位，（在96dpi下 ?1px=1/96in），但是由于其相對(duì)性。
b：pt、pc
pt：點(diǎn)(Point)，指設(shè)備能控制顯示的最小物理單位，意指顯示器上一個(gè)個(gè)的點(diǎn)。從屏幕在工廠生產(chǎn)出的那天起，它上面設(shè)備像素點(diǎn)就固定不變了，和屏幕尺寸大小有關(guān)。
pc：派卡(Pica)，絕對(duì)長度單位。相當(dāng)于我國新四號(hào)鉛字的尺寸。
Ps：css絕對(duì)單位的換算關(guān)系
1in = 96px
1cm = 37.8px
1mm = 3.78px
1in = 72pt
1in = 6pc
1in = 96px = 72pt，那么1px = 72 / 96 = 0.75pt（標(biāo)準(zhǔn)情況下）
1in = 96px = 6pc，那么1px = 6 / 96 = 0.0625pc
由于不同的物理設(shè)備的物理像素的大小是不一樣的，所以CSS認(rèn)為瀏覽器應(yīng)該對(duì) CSS 中的像素進(jìn)行調(diào)節(jié)，使得瀏覽器中1個(gè) CSS 像素的大小在不同物理設(shè)備上看上去大小總是差不多 ，目的是為了保證閱讀體驗(yàn)一致。為了達(dá)到這一點(diǎn)瀏覽器可以直接按照設(shè)備的物理像素大小進(jìn)行換算，而CSS 規(guī)范中使用"參考像素"來進(jìn)行換算。
[if !supportLists]3、[endif]絕對(duì)單位：
a：em和rem
em：
在CSS 中，如果沒有任何 CSS 規(guī)則影響的前提之下，通常情況下：
1em的長度是：1em =?16px =?0.17in =?12pt =?1pc =?4.mm =?0.42cm
<body style=“font-size:1.5em”>
<h3 style=“font-size:1.5em”>哈哈哈<h3>
<body>
從上面的簡單示例，我們可以得知，隨著DOM 元素的嵌套加深，同時(shí)不同層級(jí)都顯式設(shè)置font-size的值為em，那將會(huì)增加em計(jì)算和轉(zhuǎn)換的復(fù)雜度。像這樣：
所以：1 ÷ 父元素的font-size × 需要轉(zhuǎn)換的像素值 = em值
如果在非font-size的屬性上使用em做為<length>值的單位時(shí)，將會(huì)受元素font-size的影響。在眾多開發(fā)者中有一個(gè)比較普遍的語解，認(rèn)為em單位是相對(duì)于父元素的font-size。而事實(shí)上呢？它們是相對(duì)于使用em單位元素的font-size。父元素的font-size可以影響em值，但這種情況的發(fā)生，純粹是因?yàn)槔^承。
em單位除了應(yīng)用于font-size屬性之外，還可以運(yùn)用于可以使用<length>值的其他屬性，比如width、margin、padding、border-width和text-shadow等等。
rem：rem相對(duì)于em而言沒有那么復(fù)雜，他僅僅是相對(duì)于根元素<html>的font-size計(jì)算
任何值為1rem的元素都等于16px，當(dāng)然，其前提是瀏覽器默認(rèn)的font-size沒有被用戶重置，或者未顯式的給html元素設(shè)置font-size值；另外，rem可以不管它的父元素的font-size如何！
Ps:適合的才是最好的
·??rem和em在客戶端中計(jì)算出來的樣式值都會(huì)以px顯式
·??rem相對(duì)于根元素html的font-size計(jì)算，em相對(duì)于元素font-size計(jì)算
·??rem可以從瀏覽器字體設(shè)置中繼承font-size值，em可能受任何繼承過來的父元素font-size的影響
·??使用em應(yīng)該根據(jù)組件的font-size來定，而不是根元素的font-size來定
·??在不需要使用em單位，并且需要根據(jù)瀏覽器的font-size設(shè)置縮放時(shí)，應(yīng)該使用rem
b：ex 和 ch
ex和ch是排版單取決于元素的font-family，也就是說元素的font-family樣式對(duì)ex和ch單位值的計(jì)算有直接關(guān)系和影響，因此，它們要求瀏覽器在計(jì)算值和應(yīng)用樣式之前要確定好引用的font-family，但是，這也是ex和ch單位比其它絕對(duì)單位更靈活的地方。
ex：
ex單位的值來自它們所計(jì)算的字體上下文的x高度,x高度由兩個(gè)因素決定：font-family和font-size。換句話說，它們等于特定字體在特定font-size下的x高。實(shí)例如下圖：
備注：W3C中介紹，如果在文檔中沒有x出現(xiàn)，一種可能的啟發(fā)方法是查看小寫“o”的字形延伸到基線以下的距離，并從其邊界框的頂部減去該值。在無法確定x-height的情況下，必須假設(shè)值為0.5em。
ch：
從字體的0字形寬度中提取它們的值，它還隨字體而變化。如此一來，就有點(diǎn)隨意，而0的寬度通常是對(duì)字體的平均字符寬度，這是一個(gè)估計(jì)值，所以會(huì)有點(diǎn)糟糕.實(shí)例如下：
備注：由于ch單位是一個(gè)近似等寬的一個(gè)單元，因此在設(shè)置容器的寬度是特別的有用。比如說，你想讓容器顯示特定數(shù)量的字符串時(shí)，就可以使用ch單位。
ex和ch簡單可以用下圖理解：
c:視窗相對(duì)單位
在PC 端，視窗指的是瀏覽器的可視區(qū)域，而在移動(dòng)端中相對(duì)來說更為復(fù)雜一些，它包括三個(gè)視窗：布局視窗（Layout Viewport）、視覺視窗（Visual Viewport）和理想視窗（Ideal Viewport）：
而我們要說的視窗單位中的視窗指的是：PC 端指的是瀏覽器可視區(qū)域，移動(dòng)端的是布局視窗（Layout Viewport）
·??vw：視窗寬度的百分比
·??vh：視窗高度的百分比
·??vmin：當(dāng)前較小的vw和vh
·??vmax：當(dāng)前較大的vw和vh
簡單的來看看視窗單位是如何進(jìn)行計(jì)算的。例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。vh和vw總是與視窗的高度和寬度有關(guān)，與之不同的，vmin和vmax是與視窗寬度和高度的最大值或最小值有關(guān)，取決于哪個(gè)更大和更小。例如，如果瀏覽器設(shè)置為1100px寬、700px高，1vmin會(huì)是7px,1vmax為11px。然而，如果寬度設(shè)置為800px，高度設(shè)置為1080px，1vmin
d：角度單位
常用角度
角度最常用的用法之一就是在CSS 中給旋轉(zhuǎn)元素設(shè)置一個(gè)旋轉(zhuǎn)角度（度數(shù)），依賴于 CSS 的transform屬性中的rotate()，skew()函數(shù)等
漸變中的角度linear-gradient（）
·??0deg的意思就是to top
·??角度的默認(rèn)值（也就是角度沒有設(shè)置），它的值是to bottom，也和180deg相同
HSL 中的角度
其中HSL分別是色相（Hue），飽和度（Saturation）和亮度（Lightness）三個(gè)單詞的首字母。
HSL中的H，也就是顏色的色相，它指定色相的方式是以度數(shù)為單位的，這些度數(shù)映射到色盤上的顏色，比如像下圖這樣：
其他度數(shù)單位
·??百分度（grads）：一個(gè)分度，或者說是百分度相對(duì)于1/400個(gè)整圓，跟角度單位一樣，支持負(fù)值，負(fù)值表示逆時(shí)針方向，其中100grad相當(dāng)于90deg
·??弧度（rad）：在Canvas用到弧度，1rad等于180/π度（大約為57.3deg）,另外1.570796326794897rad相當(dāng)于100grad或是90deg
·??圈數(shù)（turn）：1圈等于360deg
·??rad = (π / 180) * deg
·??deg = (rad * 180) / π
d：百分比單位
CSS 中百分比%單位也是一個(gè)很重要也是很常用的單位，和px、em類似，在CSS 中接受<length>值的屬性都可以使用%單位。百分比是一定要有其對(duì)應(yīng)的參照值，也就是說，百分比值是一種相對(duì)值，任何時(shí)候要分析它的計(jì)算值，都需要正確的找到它的參照值。言外之意，CSS中的百分比單值最終計(jì)算出來的值是可變的
定位中的百分比
在CSS 中用來控制position位置的top、right、bottom和left都可以使用百分比作為單位。如果它們的值為百分比時(shí)，其對(duì)應(yīng)的參照物是包含塊（但不一定是其父容器）同方向的width或height計(jì)算。剛才提到過，定位屬性中的參照物：包含塊并不一定是其父容器。為什么這么說呢？因?yàn)樵贑SS 中position對(duì)應(yīng)的屬性值不一樣，其對(duì)應(yīng)的包含塊也將不同：
·??如果元素為靜態(tài)（static）或相對(duì)定位（relative），包含塊一般是其父容器
·??如果元素為絕對(duì)定位（absolute），包含塊應(yīng)該是離它最近的position為absolute、relative或fixed的祖先元素
·??如果元素為固定定位（fixed），包含塊就是視窗（viewport）
盒模型中的百分比
CSS 中的盒模型對(duì)應(yīng)的屬性主要有height、min/max-height、width、min/max-height、padding、margin和border等屬性。不同的屬性其對(duì)應(yīng)的參照物也有所不同。
·??height、min/max-height屬性的值為百分比時(shí)，其相對(duì)于包含塊的height進(jìn)行計(jì)算
·??width、min/max-width屬性的值為百分比時(shí)，其相對(duì)于包含塊的width進(jìn)行計(jì)算
·??padding和margin相對(duì)來說更為復(fù)雜一些，如果書寫模式是水平的，則相對(duì)于包含塊的width進(jìn)行計(jì)算；如果書寫模式是垂直的，則相對(duì)于包含塊的height進(jìn)行計(jì)算
文本中的百分比
在CSS 中控制文本的屬性常見的有font-size、line-height、text-indent、vertical-align等。不同的屬性其參照物也是有所不同：
·??font-size是基于父元素中font-size進(jìn)行計(jì)算
·??text-align和padding有點(diǎn)類似，和書寫模式有一定的關(guān)系。如果書寫模式是水平的，則相對(duì)于width進(jìn)行計(jì)算，如果是垂直的，則相對(duì)于height進(jìn)行計(jì)算
·??line-height則基于font-size進(jìn)行計(jì)算
·??vertical-algin則基于line-height計(jì)算
邊框和圓角中的百分比
在CSS 中border-width屬性是不支持%單位的，但在border-radius和border-image-width兩個(gè)屬性上是可以使用百分比為單位的。如果在border-radius中使用百分比單位，也就是說圓角的半徑是通過百分比來進(jìn)行計(jì)算的，即：水平方向的半徑是相對(duì)于元素width計(jì)算，垂直方向的半徑是相對(duì)于元素高度進(jìn)行計(jì)算。
背景屬性中的百分比
在背景屬性中，background-size、background-origin和background-position屬性都可以使用百分比作為單位。其中background-size則是基于background-origin區(qū)域的大小進(jìn)行計(jì)算?？梢詫?duì)背景圖像進(jìn)行縮放處理。對(duì)于background-position中的百分比，相對(duì)而言更為復(fù)雜一些，需要通過一些數(shù)學(xué)公式計(jì)算：
（容器尺寸- 背景圖像尺寸）* 百分比值：
變換中的百分比
·??translateX()的百分比相對(duì)于容器的width計(jì)算
·??translateY()的百分比相對(duì)于容器的height計(jì)算
·??transform-origin中橫坐標(biāo)（x）相對(duì)于容器的width計(jì)算；縱坐標(biāo)（y）相對(duì)于容器的height計(jì)算
Ps，在translate還有一個(gè)z軸的函數(shù)translateZ()。它是不接受百分比為單位的值。著作權(quán)歸作者所有。
百分比值的繼承
當(dāng)百分比值用于可繼承屬性時(shí)，只有結(jié)合參照值計(jì)算后的絕對(duì)值會(huì)被繼承，而不是百分比值本身。例如，一個(gè)元素的font-size是14px，并定義了line-height:150%;，那么該元素的下一級(jí)子元素繼承到的line-height就是21px，而不會(huì)再和子元素自己的font-size有關(guān)。
e：時(shí)間單位
CSS 中有兩個(gè)常見的時(shí)間單位，即秒（s）和毫秒（ms）。其中1s = 1000ms。這兩個(gè)單位常用于CSS 中transition-duration、transition-delay、animation-duration和animation-delay屬性中。
f：頻率單位
頻率值使用在聽（或說）級(jí)聯(lián)樣式表中，有兩個(gè)單位值，及赫茲（Hz）和千赫（kHz），有點(diǎn)毫秒和秒的感覺。頻率可以被用來改變一個(gè)語音閱讀文本的音調(diào)。低頻率是低音，高頻率，高音。
例如：
文檔參考：https://www.w3cplus.com/css/css-values-and-units.html
來源公司技術(shù)分享--劉鵬真
