整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
家好，我是Echa。
最近有不少的粉絲老鐵們私信我為啥這幾天沒有創(chuàng)作新內(nèi)容了，實(shí)在對不住。小編我身在廣州中招羊了，我在最近一篇文章也有提到過，今天是第四天，基本上康復(fù)了，奧密克戎BA.5其實(shí)沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌。現(xiàn)在小編就可以認(rèn)認(rèn)真真的繼續(xù)創(chuàng)作內(nèi)容了。同時(shí)也非常感謝大家默默的關(guān)心我小編身體狀況，非常謝謝。
創(chuàng)作不易，喜歡的老鐵們加個關(guān)注，點(diǎn)個贊，后面會持續(xù)更新干貨，速速收藏，謝謝！
說起 CSS 單位，我們最常用的可能就是像素單位（px），它是一個絕對單位，也就是說一個10px的文字，放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種，下面就來學(xué)習(xí)一下 CSS 中單位！
相對單位就是相對于另一個長度的長度。CSS中的相對單位主要分為兩大類：
下面就來看看這些常見的CSS單位。
em是最常見的相對長度單位，適合基于特定的字號進(jìn)行排版。根據(jù)CSS的規(guī)定，1em 等于元素的font-size屬性的值。
em 是相對于父元素的字體大小進(jìn)行計(jì)算的。如果當(dāng)前對行內(nèi)文本的字體尺寸未進(jìn)行顯示設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。當(dāng)DOM元素嵌套加深時(shí)，并且同時(shí)給很多層級顯式的設(shè)置了font-size的值的單位是em，那么就需要層層計(jì)算，復(fù)雜度會很高。
當(dāng)然，上面的這個說法是不嚴(yán)謹(jǐn) 的。來看一個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
width: 300px;
height: 300px;
font-size: 20px;
}
.child {
border: 1em solid ;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
子元素
</div>
</div>
</body>
</html>
這里給父元素設(shè)置了字體大小為20px，然后給子元素的border寬度設(shè)置為1em，這時(shí)，子元素的border值為20px，確實(shí)是相對于父元素的字體大小設(shè)置的：
那如果我們給子元素的字體設(shè)置為30px：
.child {
font-size: 30px;
border: 1em solid ;
}
這時(shí)可以看到，子元素的邊框?qū)挾染褪?0px，它是相對自己大小進(jìn)行計(jì)算的：
所以，可以得出結(jié)論：如果自身元素是沒有設(shè)置字體大小的，那么就會根據(jù)其父元素的字體大小作為參照去計(jì)算，如果元素本身已經(jīng)設(shè)置了字體，那么就會基于自身的字體大小進(jìn)行計(jì)算。
em單位除了可以作用于 font-size之外，還可以運(yùn)用于其他使用長度的屬性，比如border-width、width、height、margin、padding、text-shadow等。
所以，em的使用還是比較復(fù)雜的，它可能會繼承任意一級父元素的字體大小。需要謹(jǐn)慎使用。
rem相對于em就簡單了很多，它是根據(jù)頁面的根元素（根元素）的字體大小來計(jì)算的。來對上面的例子進(jìn)行修改：
.child {
font-size: 30px;
border: 1rem solid ;
}
html {
font-size: 25px;
}
效果如下，可以看到，邊框的長度變成了25px，它是根據(jù)根元素html的字體大小計(jì)算的：
如果沒有對根元素設(shè)定字號的話，font-size: 1rem的作用與font-size: initial相同。
使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小，而不是固定大小。那何時(shí)應(yīng)使用 em，何時(shí)應(yīng)使用 rem 呢？可以根據(jù)兩者的差異來進(jìn)行選擇：
ex 和 ch 都是排版用的單位，它們的大小取決于元素的font-size 和 font-family屬性。
這四個單位都是視窗單位，所謂的視窗，在web端指的就是可視區(qū)域，移動端的視窗指的就是布局視窗。如果視窗大小發(fā)生了變化，那么這些值都會隨之變化。這四個單位指的是：
假如一個瀏覽器的高度是800px，那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關(guān)。
vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關(guān)。假如一個瀏覽器高度為500px，寬度為1200px，那么1vmin就是5px，1vmax就是12px。
這些單位都是長度單位，所以可以在任何允許使用長度單位的地方使用。這些單位比較適合用于創(chuàng)建全視區(qū)界面，例如移動設(shè)備的界面，因?yàn)樵厥歉鶕?jù)視區(qū)的尺寸而變化的，與文檔樹中的任何元素都沒有關(guān)系。
在 CSS 中，絕對單位包括：px 、pt 、pc、 cm 、 mm 、in 等。絕對單位是一個固定的值，它反應(yīng)了一個真實(shí)的物理尺寸。它不會受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率（DPI，每英寸的點(diǎn)數(shù)）。px就是我們最常用的絕對單位之一。這些絕對單位的換算關(guān)系如下：
1in = 25.4mm = 2.54cm = 6pc = 72pt =96px
px 全稱為 Pixels，表示像素，它并不嚴(yán)格等于顯示器的像素，尤其在高清屏下。盡管CSS單位會根據(jù)瀏覽器、操作系統(tǒng)或者硬件適當(dāng)縮放，在某些設(shè)備或者用戶的分辨率設(shè)置下也會發(fā)生變化，但是96px通常等于一個物理英寸的大小。
CSS 將光柵圖像(如照片等)的顯示方式定義為默認(rèn)每一個圖像大小為1px。一個“600x400”解析度的照片的長寬分別為“600px”和“400px”，所以照片本身的像素并不會與顯示裝置像素一致，而是與 px 單位一致。如此就可以將圖像完整的與網(wǎng)頁的其它元素排列起來。
很多時(shí)候， px 也常被稱為 CSS 像素。它是一個絕對單位，但也可以被視為相對單位，因?yàn)橄袼貑挝幌鄬Φ氖窃O(shè)備像素。在同一個設(shè)備上，每 1 個 CSS 像素所代表的物理像素是可以變化的；在不同的設(shè)備之間，每 1 個 CSS 像素所代表的物理像素是可以變化的。
.box {
width: 100px;
height: 100px;
}
pt 全稱為 Point，表示點(diǎn)。常用于軟件設(shè)計(jì)和排版印刷行業(yè)（筆者做的前端系統(tǒng)，最終的產(chǎn)物就是一個需要拿去印刷的PDF，所以會經(jīng)常用到這個單位）。當(dāng)使用這個單位時(shí)，無論顯示器的分辨率是多少，打印在紙上的結(jié)果都是一樣的。
如果單純?yōu)榱司W(wǎng)頁的顯示，建議就使用px像素單位，如果需要輸出印刷產(chǎn)品，就可以考慮使用pt。
pc 全程為 Picas，表示派卡。相當(dāng)于我國新四號鉛字的尺寸。派卡也是印刷的術(shù)語，1派卡等于12點(diǎn)。它和 px 的換算關(guān)系如下：
1pc = 16px
cm 全稱為 Centimeters，表示厘米。它和 px 的換算關(guān)系如下：
1cm = 37.8px
mm 全稱為 Millimeters，表示毫米。它和 px 的換算關(guān)系如下：
1mm = 3.78px
in 全稱為 Inches，表示英寸。它和 px 的換算關(guān)系如下：
1in = 96px
CSS中的頻率單位有兩個：赫茲（Hz）和千赫茲（kHz）。它們的換算關(guān)系如下：
1kHz = 1000Hz
通常情況下，頻率單位使用在聽或說級聯(lián)樣式表中。頻率可以被用來改變一個語音閱讀文本的音調(diào)。低頻率就是低音，高頻率就是高音。
.low {
pitch: 105Hz;
}
.squeal {
pitch: 135Hz;
}
需要注意，當(dāng)數(shù)值為0時(shí)，單位對值沒有影響，但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以，在使用頻率單位時(shí)，不要直接寫0。另外，這兩個單位是不區(qū)分大小寫的。
CSS中的時(shí)間單位有兩個：秒（s）和毫秒（ms）。這兩個時(shí)間單位都是CSS新增的單位。這兩個單位的換算關(guān)系如下：
1s = 1000ms
時(shí)間單位主要用于過度和動畫中，用于定義持續(xù)時(shí)間或延遲時(shí)間。下面兩種定義是等效的：
a[href] {
transition-duration: 2.5s;
}
a[href] {
transition-duration: 2500s;
}
CSS中的分辨率單位有三個：dpi、dpcm、dppx。這三個單位都是CSS3中華新增的單位。他們都是正值，不允許為負(fù)值。這三個單位的換算關(guān)系如下：
1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi
分辨率單位主要用于媒體查詢等操作。
dpi 全稱為 dots per inch，表示每英寸包含的點(diǎn)的數(shù)量。普通屏幕通常包含 72或96個點(diǎn)，大于 192dpi 的屏幕被稱為高分屏。
@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }
dpcm 全稱為 dots per centimeter，表示每厘米包含的點(diǎn)的數(shù)量。
@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }
dppx 全稱為 dots per pixel，表示每像素（px）包含點(diǎn)的數(shù)量。由于CSS px的固定比率為1:96，因此1dppx相當(dāng)于96dpi。它對應(yīng)于由圖像分辨率定義的CSS中顯示的圖像的默認(rèn)分辨率。
@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }
CSS中的角度單位有四個：deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關(guān)系如下：
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
一般這些角度單位用于元素的旋轉(zhuǎn)操作，包括2D旋轉(zhuǎn)、3D旋轉(zhuǎn)等。
通常情況下，一個完整的旋轉(zhuǎn)就是360度。所以，所有的角度都在0-360度之間。但是，超出這個范圍的值也是允許的，只不過都會歸到0-360度之間。比如，順時(shí)針旋轉(zhuǎn)420度（450deg）、逆時(shí)針旋轉(zhuǎn)270度（-270deg）、順時(shí)針旋轉(zhuǎn)90度（90deg）都是一樣的效果，都會歸為90deg。但是當(dāng)使用動畫時(shí)，這些角度值就非常重要了。
CSS的旋轉(zhuǎn)主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉(zhuǎn)的角度即可。
除了旋轉(zhuǎn)會使用角度之外，線性漸變也會經(jīng)常使用角度值：
background: linear-gradient(45deg, #000, #fff);
deg 全稱為 Degress，表示度，一個圓總共360度。
transform: rotate(2deg);
grad 全稱為 Gradians，表示梯度，一個圓總共400梯度。
transform: rotate(2grad);
rad 全稱為 Radians，表示弧度，一個圓總共2π弧度。
transform: rotate(2rad);
turn 全稱為 Turns，表示圈（轉(zhuǎn)），一個圓總共一圈（轉(zhuǎn)）。
transform:rotate(.5turn);
百分比（%）也是我們比較常用的單位之一，所有接受長度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個參照值，也就是說百分比值是一個相對的值。
下面來看看常見場景中的百分比單位的使用。
在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時(shí)，參照物不盡相同：
在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時(shí)，參照物不盡相同：
在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：
CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設(shè)置百分比。
注意，在 translate 還有一個 z 軸的函數(shù) translateZ() 。它是不接受百分比為單位的值。
、PX\EM\PT單位介紹
px單位名稱為像素，相對長度單位，像素（px）是相對于顯示器屏幕分辨率而言的國內(nèi)推薦；
em單位名稱為相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸，國外使用較多；
pt單位名稱為點(diǎn)（Point），絕對長度單位一般老版本的table使用長度大小單位但是現(xiàn)在基本上沒有使用。
html單位簡短介紹：
Px 像素Pixel；相對長度單位。
Pt 點(diǎn)（Point）；絕對長度單位
Em 相對長度單位，這里em與html標(biāo)簽的"EM"拼寫完全相同，而這里em作為單獨(dú)文本單位。
1. 以前IE無法調(diào)整那些使用px作為單位的字體大小,但現(xiàn)在幾乎IE都支持 在這里也推薦使用PX作為單位;
2. 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em作為字體單位;
3. Firefox能夠調(diào)整px和em，但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。
px像素(Pixel)。相對長度單位。像素px是相對于顯示器屏幕分辨率而言的，QQ截圖也是使用PX作為長度寬度單位。
em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。
二、html單位對比案例
1、簡單小例：
Width:300px 寬度為300像素
Width:300pt 寬度為300點(diǎn)
Width:300em 寬度為300相對長度
以上我們設(shè)置相同數(shù)值的不同單位實(shí)例
2、對文字設(shè)置不同長度em px pt單位看看效果：
CSS代碼：
HTML代碼：
3、單位長度對比說明圖
html px pt em單位案例對比圖
三、em與px換算
任意瀏覽器的默認(rèn)字體高度16px（16像素）。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。
12px相當(dāng)于9pt長度；
12px相當(dāng)于0.75em長度；
9pt相當(dāng)于0.75em長度；
一般我們使用em換算px較多
高級em與px換算：
任意瀏覽器的默認(rèn)字體高度16px（16像素）。所有未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明font-size=62.5%，這就使em值變?yōu)?16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10，然后換上em作為單位就行了。
具體使用時(shí)候：
我們在對全體html標(biāo)簽聲明初始一次font-size=62.5%
如：
*{font-size=62.5%}
即可此后面布局可依據(jù)以下技巧進(jìn)行設(shè)置em單位
font-size:1.2em等于font-size:12px
font-size:1.4em等于font-size:14px
以此類推相當(dāng)于初始font-size=62.5%后，em與px單位就只有10倍差距，以便方便計(jì)算與設(shè)置em長度數(shù)值使用。
四、em單位有如下特點(diǎn)：
1. em的值并不是固定的;
2. em會繼承父級元素的字體大小。
我們在寫CSS的時(shí)候如果要用em為單位，需要注意兩點(diǎn)：
1. body選擇器中聲明Font-size=62.5%;
2. 將你的原來的px數(shù)值除以10，然后換上em作為單位;
3. 重新計(jì)算那些被放大的字體的em數(shù)值。避免字體大小的重復(fù)聲明。
也就是避免1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em，那么在聲明的字體大小時(shí)就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em，它因繼承#content的字體高而變?yōu)榱?em=12px。
但是12px漢字例外，就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小，而是稍大一點(diǎn)。這個問題 Jorux已經(jīng)解決，只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時(shí)，對于浮點(diǎn)的取值精確度有限。不知道有沒有其他的解釋。
五、推薦網(wǎng)頁單位
所以為了單位換算錯誤推薦使用PX（像素）作為網(wǎng)頁制作單位。
以上為大家介紹了px em pt單位，及換算方式，一般現(xiàn)在我們使用長度單位都以px為長度單位。這里我們也推薦使用以px（像素）為網(wǎng)頁的尺寸長度單位，符合瀏覽器的像素單位，同時(shí)也為了方便計(jì)算長度尺寸。
關(guān)于px pt em單位總結(jié)
1）、推薦px像素為單位：通常我們使用px（像素為單位）較多，其次是em單位，平時(shí)推薦大家以px為單位；
2）、我們的顯示屏分辨率以px像素為單位；
3）、我們QQ截圖時(shí)候也是以px像素單位。
伙伴們，css3單位你們聽說過多少？我們在前端切圖項(xiàng)目中用到的有px，em，rem，vh，% 其他基本沒用到過了。特別是vh ，特別好用。
附所有css單位，應(yīng)該是最全的了
px：絕對單位，頁面按精確像素展示
em：相對單位，基準(zhǔn)點(diǎn)為父節(jié)點(diǎn)字體的大小，如果自身定義了font-size按自身來計(jì)算（瀏覽器默認(rèn)字體是16px），整個頁面內(nèi)1em不是一個固定的值。
rem：相對單位，可理解為”root em”, 相對根節(jié)點(diǎn)html的字體大小來計(jì)算，CSS3新加屬性，chrome/firefox/IE9+支持。
vw：viewpoint width，視窗寬度，1vw等于視窗寬度的1%。
vh：viewpoint height，視窗高度，1vh等于視窗高度的1%。
vmin：vw和vh中較小的那個。
vmax：vw和vh中較大的那個。
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大約1/72寸
pc:pica，大約6pt，1/6寸
ex：取當(dāng)前作用效果的字體的x的高度，在無法確定x高度的情況下以0.5em計(jì)算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需屬性加么有前綴)
ch:以節(jié)點(diǎn)所使用字體中的“0”字符為基準(zhǔn)，找不到時(shí)為0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
切版 qieban(.cn)
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
