?
論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é)科。我們在聲明任何一個(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)楹芏鄬傩缘闹凳侵痪哂兄的鸺痪哂袉挝坏摹１热缟蠄D的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ù)分享--劉鵬真
