一文讀懂 CSS 單位

家好，我是Echa。

最近有不少的粉絲老鐵們私信我為啥這幾天沒有創(chuàng)作新內(nèi)容了，實在對不住。小編我身在廣州中招羊了，我在最近一篇文章也有提到過，今天是第四天，基本上康復了，奧密克戎BA.5其實沒有那么恐怖，中招了前三天特難受，熬過來了就沒事了，大家莫慌。現(xiàn)在小編就可以認認真真的繼續(xù)創(chuàng)作內(nèi)容了。同時也非常感謝大家默默的關心我小編身體狀況，非常謝謝。

創(chuàng)作不易，喜歡的老鐵們加個關注，點個贊，后面會持續(xù)更新干貨，速速收藏，謝謝！

說起 CSS 單位，我們最常用的可能就是像素單位（px），它是一個絕對單位，也就是說一個10px的文字，放在哪里都是一樣大的。單位可以影響顏色、距離、尺寸等一系列的屬性。CSS中單位的形式有很多種，下面就來學習一下 CSS 中單位！

1. 相對單位

相對單位就是相對于另一個長度的長度。CSS中的相對單位主要分為兩大類：

字體相對單位，他們都是根據(jù)font-size來進行計算的。常見的字體相對單位有：em、rem、ex、ch；
視窗相對單位，他們都是根據(jù)視窗大小來決定的。常見的視窗相對單位有vw、vh、vmax、vmin。

下面就來看看這些常見的CSS單位。

（1）em 和 rem

em是最常見的相對長度單位，適合基于特定的字號進行排版。根據(jù)CSS的規(guī)定，1em 等于元素的font-size屬性的值。

em 是相對于父元素的字體大小進行計算的。如果當前對行內(nèi)文本的字體尺寸未進行顯示設置，則相對于瀏覽器的默認字體尺寸。當DOM元素嵌套加深時，并且同時給很多層級顯式的設置了font-size的值的單位是em，那么就需要層層計算，復雜度會很高。

當然，上面的這個說法是不嚴謹的。來看一個例子：

<!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>

這里給父元素設置了字體大小為20px，然后給子元素的border寬度設置為1em，這時，子元素的border值為20px，確實是相對于父元素的字體大小設置的：

那如果我們給子元素的字體設置為30px：

.child {
  font-size: 30px;
  border: 1em solid ;
}

這時可以看到，子元素的邊框?qū)挾染褪?0px，它是相對自己大小進行計算的：

所以，可以得出結論：如果自身元素是沒有設置字體大小的，那么就會根據(jù)其父元素的字體大小作為參照去計算，如果元素本身已經(jīng)設置了字體，那么就會基于自身的字體大小進行計算。

em單位除了可以作用于 font-size之外，還可以運用于其他使用長度的屬性，比如border-width、width、height、margin、padding、text-shadow等。

所以，em的使用還是比較復雜的，它可能會繼承任意一級父元素的字體大小。需要謹慎使用。

rem相對于em就簡單了很多，它是根據(jù)頁面的根元素（根元素）的字體大小來計算的。來對上面的例子進行修改：

.child {
  font-size: 30px;
  border: 1rem solid ;
}

html {
 font-size: 25px;
}

效果如下，可以看到，邊框的長度變成了25px，它是根據(jù)根元素html的字體大小計算的：

如果沒有對根元素設定字號的話，font-size: 1rem的作用與font-size: initial相同。

使用 em 和 rem 可以讓我們靈活的夠控制元素整體的放大和縮小，而不是固定大小。那何時應使用 em，何時應使用 rem 呢？可以根據(jù)兩者的差異來進行選擇：

兩者在客戶端中計算出來的樣式都會以px的形式顯示；
rem是相對于根元素html的font-size計算，em 相對于元素的font-size計算；
當需要根據(jù)瀏覽器的font-size設置縮放時，應該使用 rem；
使用 em 應該根據(jù)組件的font-size來定，而不是根元素的font-size來定；
rem 可以從瀏覽器字體設置中繼承 font-size 值， em 可能受任何繼承過來的父元素 font-size 的影響。

（2）ex 和 ch

ex 和 ch 都是排版用的單位，它們的大小取決于元素的font-size 和 font-family屬性。

ex 指的是所用字體中小寫字母 x 的高度。因此，如果兩個字體不一樣，那么 ex 的值是不一樣的。因為每種字體的小寫 x 的高度是不一樣的。
ch 和 ex 類似，不過它是基于數(shù)字 0 的寬度計算的。會隨著字體的變化而變化。而0 的寬度通常是對字體的平均字符寬度，它是一個估計值。由于 ch 是一個近似等寬的單元，所以在設置容器的寬度時很有用，比如一個容器想要顯示指定個數(shù)的字符串時，就可以使用這個單位。

（3）vw、vh、vmax 和 vmin

這四個單位都是視窗單位，所謂的視窗，在web端指的就是可視區(qū)域，移動端的視窗指的就是布局視窗。如果視窗大小發(fā)生了變化，那么這些值都會隨之變化。這四個單位指的是：

vw：視窗寬度的百分比；
vh：視窗高度的百分比；
vmax：較大的 vh 和 vw；
vmin：較小的 vh 和 vw。

假如一個瀏覽器的高度是800px，那么1vh的值就是8px。vh和vw的大小總是和視窗的高度和寬度有關。

vmin 和 vmax 與視窗寬度和高度的最大值和最小值有關。假如一個瀏覽器高度為500px，寬度為1200px，那么1vmin就是5px，1vmax就是12px。

這些單位都是長度單位，所以可以在任何允許使用長度單位的地方使用。這些單位比較適合用于創(chuàng)建全視區(qū)界面，例如移動設備的界面，因為元素是根據(jù)視區(qū)的尺寸而變化的，與文檔樹中的任何元素都沒有關系。

2. 絕對單位

在 CSS 中，絕對單位包括：px 、pt 、pc、 cm 、 mm 、in 等。絕對單位是一個固定的值，它反應了一個真實的物理尺寸。它不會受屏幕大小或者字體的影響。它們的大小取決于值以及屏幕的分辨率（DPI，每英寸的點數(shù)）。px就是我們最常用的絕對單位之一。這些絕對單位的換算關系如下：

1in = 25.4mm = 2.54cm = 6pc = 72pt =96px

（1）px

px 全稱為 Pixels，表示像素，它并不嚴格等于顯示器的像素，尤其在高清屏下。盡管CSS單位會根據(jù)瀏覽器、操作系統(tǒng)或者硬件適當縮放，在某些設備或者用戶的分辨率設置下也會發(fā)生變化，但是96px通常等于一個物理英寸的大小。

CSS 將光柵圖像(如照片等)的顯示方式定義為默認每一個圖像大小為1px。一個“600x400”解析度的照片的長寬分別為“600px”和“400px”，所以照片本身的像素并不會與顯示裝置像素一致，而是與 px 單位一致。如此就可以將圖像完整的與網(wǎng)頁的其它元素排列起來。

很多時候， px 也常被稱為 CSS 像素。它是一個絕對單位，但也可以被視為相對單位，因為像素單位相對的是設備像素。在同一個設備上，每 1 個 CSS 像素所代表的物理像素是可以變化的；在不同的設備之間，每 1 個 CSS 像素所代表的物理像素是可以變化的。

.box {
    width: 100px;
    height: 100px;
}

（2）pt

pt 全稱為 Point，表示點。常用于軟件設計和排版印刷行業(yè)（筆者做的前端系統(tǒng)，最終的產(chǎn)物就是一個需要拿去印刷的PDF，所以會經(jīng)常用到這個單位）。當使用這個單位時，無論顯示器的分辨率是多少，打印在紙上的結果都是一樣的。

如果單純?yōu)榱司W(wǎng)頁的顯示，建議就使用px像素單位，如果需要輸出印刷產(chǎn)品，就可以考慮使用pt。

（3）pc

pc 全程為 Picas，表示派卡。相當于我國新四號鉛字的尺寸。派卡也是印刷的術語，1派卡等于12點。它和 px 的換算關系如下：

1pc = 16px

（4）cm

cm 全稱為 Centimeters，表示厘米。它和 px 的換算關系如下：

1cm = 37.8px

（5）mm

mm 全稱為 Millimeters，表示毫米。它和 px 的換算關系如下：

1mm = 3.78px

（6）in

in 全稱為 Inches，表示英寸。它和 px 的換算關系如下：

1in = 96px

3. 頻率單位

CSS中的頻率單位有兩個：赫茲（Hz）和千赫茲（kHz）。它們的換算關系如下：

1kHz = 1000Hz

通常情況下，頻率單位使用在聽或說級聯(lián)樣式表中。頻率可以被用來改變一個語音閱讀文本的音調(diào)。低頻率就是低音，高頻率就是高音。

.low { 
  pitch: 105Hz; 
} 

.squeal { 
  pitch: 135Hz; 
}

需要注意，當數(shù)值為0時，單位對值沒有影響，但是單位是不能省略的。也就是說0、0Hz、0kHz是不一樣的。所以，在使用頻率單位時，不要直接寫0。另外，這兩個單位是不區(qū)分大小寫的。

4. 時間單位

CSS中的時間單位有兩個：秒（s）和毫秒（ms）。這兩個時間單位都是CSS新增的單位。這兩個單位的換算關系如下：

1s = 1000ms

時間單位主要用于過度和動畫中，用于定義持續(xù)時間或延遲時間。下面兩種定義是等效的：

a[href] {
 transition-duration: 2.5s;
}

a[href] {
 transition-duration: 2500s;
}

5. 分辨率單位

CSS中的分辨率單位有三個：dpi、dpcm、dppx。這三個單位都是CSS3中華新增的單位。他們都是正值，不允許為負值。這三個單位的換算關系如下：

1dppx = 96dpi
1dpi ≈ 0.39dpcm
1dpcm ≈ 2.54dpi

分辨率單位主要用于媒體查詢等操作。

（1）dpi

dpi 全稱為 dots per inch，表示每英寸包含的點的數(shù)量。普通屏幕通常包含 72或96個點，大于 192dpi 的屏幕被稱為高分屏。


@media screen and (min-resolution: 96dpi) { ... }
@media print and (min-resolution: 300dpi) { ... }

（2）dpcm

dpcm 全稱為 dots per centimeter，表示每厘米包含的點的數(shù)量。

@media screen and (min-resolution: 28dpcm) { ... }
@media print and (min-resolution: 118dpcm) { ... }

（3）dppx

dppx 全稱為 dots per pixel，表示每像素（px）包含點的數(shù)量。由于CSS px的固定比率為1:96，因此1dppx相當于96dpi。它對應于由圖像分辨率定義的CSS中顯示的圖像的默認分辨率。

@media screen and (min-resolution: 2dppx) { ... }
@media screen and (min-resolution: 1dppx) and (max-resolution: 1.9dppx) { ... }

6. 角度單位

CSS中的角度單位有四個：deg、grad、rad、turn。這些角度單位都是CSS3中新增的單位。它們的換算關系如下：

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad

一般這些角度單位用于元素的旋轉(zhuǎn)操作，包括2D旋轉(zhuǎn)、3D旋轉(zhuǎn)等。

當旋轉(zhuǎn)值為正值時，元素會順時針旋轉(zhuǎn)；
當旋轉(zhuǎn)值為負值時，元素會逆時針旋轉(zhuǎn)。

通常情況下，一個完整的旋轉(zhuǎn)就是360度。所以，所有的角度都在0-360度之間。但是，超出這個范圍的值也是允許的，只不過都會歸到0-360度之間。比如，順時針旋轉(zhuǎn)420度（450deg）、逆時針旋轉(zhuǎn)270度（-270deg）、順時針旋轉(zhuǎn)90度（90deg）都是一樣的效果，都會歸為90deg。但是當使用動畫時，這些角度值就非常重要了。

CSS的旋轉(zhuǎn)主要依賴于 transform 屬性中的 rotate() 、rotate3d、 skew() 等方法。只需給它們傳遞旋轉(zhuǎn)的角度即可。

除了旋轉(zhuǎn)會使用角度之外，線性漸變也會經(jīng)常使用角度值：

background: linear-gradient(45deg, #000, #fff);

（1）deg

deg 全稱為 Degress，表示度，一個圓總共360度。

transform: rotate(2deg);

（2）grad

grad 全稱為 Gradians，表示梯度，一個圓總共400梯度。

transform: rotate(2grad);

（4）rad

rad 全稱為 Radians，表示弧度，一個圓總共2π弧度。

transform: rotate(2rad);

（4）turn

turn 全稱為 Turns，表示圈（轉(zhuǎn)），一個圓總共一圈（轉(zhuǎn)）。

transform:rotate(.5turn);

7. 百分比單位

百分比（%）也是我們比較常用的單位之一，所有接受長度值的屬性都可以使用百分比單位。但是不同屬性使用該單位的效果可能并不一樣。但是都需要有一個參照值，也就是說百分比值是一個相對的值。

下面來看看常見場景中的百分比單位的使用。

（1）盒模型中的百分比

在CSS中的盒模型包含的屬性有：width、max-width、min-width、height、max-height、min-height、padding、margin等。這些屬性在使用百分比時，參照物不盡相同：

width、max-width、min-width：值為百分比時，其相對于包含塊的 width 進行計算；
height、max-height、min-height：值為百分比時，其相對于包含塊的 height 進行計算；
padding、margin：值為百分比時，如果是水平的值，就是相對于包含塊的 width 進行計算；如果是垂直的值，就是相對于包含塊的 height 進行計算。

（2）文本中的百分比

在CSS中文本控制的屬性有font-size、line-height 、vertical-align、 text-indent等。這些屬性在使用百分比時，參照物不盡相同：

font-size：根據(jù)父元素的font-size 進行計算；
line-height：根據(jù)font-size進行計算；
vertical-align：根據(jù)line-height進行計算；
text-indent：如果是水平的，則根據(jù)width進行計算，如果是垂直的，則根據(jù) height 進行計算。

（3）定位中的百分比

在CSS中用控制 position 位置的top、right、bottom、left都可以使用百分比作為單位。其參照物就是包含塊的同方向的width和height。不同定位的包含塊不盡相同：

如果元素為靜態(tài)（ static ）或相對定位（ relative ），包含塊一般是其父容器；
如果元素為絕對定位（ absolute ），包含塊應該是離它最近的 position 為 absolute 、 relative 或 fixed 的祖先元素；
如果元素為固定定位（ fixed ），包含塊就是視窗（ viewport ）。

（4）變換中的百分比

CSS 中的 transform 屬性中的 translate 和 transform-origin 值也可以設置百分比。

translateX() 根據(jù)容器的 width 計算
translateY() 根據(jù)容器的 height 計算
transform-origin 中橫坐標（ x ）相對于容器的 width 計算；縱坐標（ y ）相對于容器的 height 計算

注意，在 translate 還有一個 z 軸的函數(shù) translateZ() 。它是不接受百分比為單位的值。

端就是一個大雜燴，做為前端工程師需要掌握的知識點太多了。各種長度單位需要我們?nèi)チ私?/p>

除了這些還有印刷單位 pt pc pt cm mm in....

毫無疑問現(xiàn)在統(tǒng)治前端的長度單位還是px, 一個相遇對于屏幕分辨率的像素單位。

px: 全稱pixel（像素）是圖像的基本采樣單位，它不是一個確定的物理量，也不是一個具體的點或者小方塊（雖然可以用點和小方塊來呈現(xiàn)），而是一個抽象概念。它是一個相對單位，相對于屏幕分辨率，而不是視窗大小。像素越高像px長度越小。

如果你要開發(fā)響應式頁面px就顯得力不從心了。需要寫很多的媒體相應去調(diào)整頁面布局。

然后em橫空出世。

em:相對單位，基準點為父節(jié)點字體的大小.

這個貨是個富N代，總是以倍數(shù)的方式來繼承父元素的px值,如果自身定義了font-size按自身來計算（大多瀏覽器默認字體是16px），整個頁面內(nèi)1em不是一個固定的值。

舉個栗子：

		<div style="font-size:1.2em;">1.2em
			<div style="font-size:1.2em;">1.2em
				<div style="font-size:1.2em;">1.2em
					<div style="font-size:1.2em;">1.2em
						<div style="font-size:1.2em;">1.2em</div>
					</div>
				</div>
			</div>
		</div>

顯示效果：

HTML根元素默認為16px 那么16 x 1.2 x 1.2 x 1.2 x 1.2 x 1.2 = 39.8px。最內(nèi)層的元素的字體大小就是39.8px；

為了使用方便，用em時，我們通常在CSS中的body選擇器中聲明font-size=62.5%（使em值變?yōu)?16px*62.5%=10px）, 之后，你只需要將你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。

em使用起來太麻煩了。麻煩不怕，只要有麻煩就有懶人出來想辦法，把他搞定。

于是rem跳了出來：

rem:是CSS3新增的一個相對單位，相對的只是HTML根元素.也就是每個元素通過倍數(shù)乘以根元素的px值。

rem,是非常傳統(tǒng)的只認根元素（HTML）上的單位。那么如果你改變了根元素上的字體大小。整個頁面字體大小也會隨之改變，因為這個特點非常適合做響應式開發(fā)的頁面長度單位。

那么我們只需要使用js來實現(xiàn)根據(jù)頁面分辨率調(diào)整html的字體大小就可以使適應不同的分辨率。

突然出現(xiàn)了一個rpx。

rpx: 微信小程序?qū)Ｓ脝挝唬梢愿鶕?jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

為啥要把它列出來呢，因為已經(jīng)有了微信小程序工程師的職位。可見微信小程序的影響力有多大。

%：百分比，實在沒啥好介紹的。此處略過一萬字。

其他跑龍?zhí)椎淖煮w

pt：印刷機的每個「點」，定義為1 pt ＝ 1/72 in，如果在72 dpi的系統(tǒng)上1 px = 1 pt，但如果在96 dpi的系統(tǒng)上1 px = 0.75 pt ( 72 /96 = 0.75 )。

in：英寸，在96 dpi的系統(tǒng)上1 in = 96 px。

cm：厘米，在96 dpi的系統(tǒng)上1 cm = 37.795275593333 px。

mm：毫米，在96 dpi的系統(tǒng)上1 mm = 3.7795275593333 px

好了，聊完了，祝各位在像素世界里玩兒的開心。

家好，我是皮皮，今天給大家分享一些前端的知識。

一、了解 CSS 單位

測量長度的單位可以是絕對的，例如像素，點等，也可以是相對的，例如百分比（%）和 em 單位。

指定 CSS 單位對于非零值是必須的，因為沒有默認單位。丟失或忽略單位將被視為錯誤。但是，如果該值為 0，則可以省略該單位（畢竟，零像素與零英寸是一樣的）。

注意： 長度是指距離測量。長度包括數(shù)字值，后面加單位，比如 10px、2em、50% 等。數(shù)字和單位之間不能出現(xiàn)空白。

二、相對長度單位

相對長度單位指定相對于另一個長度屬性的長度。相對單位是描述：em當前的字體大小。

ex ：當前字體的 x 高度。

em 和 ex 單位取決于套用至元素的字體大小。

1. 使用 em 單位

em 的值等于使用它的元素的 font-size 屬性的計算值。它可用于垂直或水平測量。

例如，如果 font-size 元素設置為 16px，并且 line-height 設置為 2.5em，則 line-height像素計算值為：2.5?x?16px?=?40px。

P {
    font-size: 16px;
    line-height: 2.5em;
}

運行效果

當在 font-size 屬性本身的值中指定 em 時會發(fā)生異常，在這種情況下，它引用父元素的字體大小。

因此，當我們用 em 指定字體大小時，1em 繼承自 font-size。因此， font-size: 1.2em; 使文本比父元素的文本大 1.2 倍。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>平安保險</title>
        <link rel="stylesheet" type="text/css" href="css/fy.css" />
    </head>


    <body>
        <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8" />
        <title>項目</title>
        <style>
            body {
                font-size: 62.5%;
                font-family: Arial, Helvetica, sans-serif;
            }


            p {
                font-size: 1.6em;
            }


            p:firt-letter {
                font-size: 3em;
                font-weight: bold;
            }
</style>


        <body style="text-align: center; background-color: aquamarine;">
            <div>ddad</div>
            <p> Hellow world</p>
        </body>


</html>

代碼解析：瀏覽器中字體的默認大小為 16px。我們的第一步是通過將主體設置 font-size 為 62.5% 來減小整個文檔的大小，這會將字體大小重置為 10px（16px 的 62.5%）。

這是默認 font-size的四舍五入，方便 px 到 em的轉(zhuǎn)換。

2. 使用 ex 單位

ex 單位等于當前字體的 x 高度。

所謂的 x 高度是因為它通常等于小寫 x 的高度，如下所示。但是， ex 即使對于不包含 x 的字體，也會定義的。

P {
    font-size: 16ex;
    line-height: 2.5em;
}

三、絕對長度單位

絕對長度單位相對于彼此固定。它們高度依賴于輸出介質(zhì)，因此在輸出環(huán)境已知時主要有用。絕對單位由物理單位（的 in、cm、mm、pt、pc）和 px 單位。表中j進行屬性的詳細介紹。

單位	描述
in	英寸 - 1 英寸等于 2.54 厘米。
cm	厘米。
mm	毫米。
pt	points - 在 CSS 中，一個點定義為 1?72 英寸（0.353mm）。
pc	picas - 1pc 等于 12pt。
px	像素單位 - 1px 等于 0.75pt。

絕對物理單位，例如 in、cm、mm 等應被用于打印介質(zhì)和類似的高分辨率的設備。然而，對于桌面和低分辨率設備等屏幕顯示，建議使用像素或 em 單位。

例：

   h1 {
                margin: 0.5in;
            }
            /* inches  */


            h2 {
                line-height: 3cm;
            }
            /* centimeters */


            h3 {
                word-spacing: 4mm;
            }
            /* millimeters */


            h4 {
                font-size: 12pt;
            }
            /* points */


            h5 {
                font-size: 1pc;
            }
            /* picas */


            h6 {
                font-size: 12px;
            }
            /* picas */

提示： 使用相對單位（如 em 或百分比 %）的樣式表可以更輕松地從一個輸出環(huán)境擴展到另一個輸出環(huán)境。

四、總結

本文主要介紹了css單位的運用，通過兩個方面展開，相對長度單位，絕對長度單位，在項目中需要注意的點，需要注意的事項，都進行了詳細的講解和提供了對應的解決方案。代碼很簡單，希望可以幫助你學習。

如果在操作過程中有任何問題，記得下面留言，我們看到會第一時間解決問題。

在線咨詢

上一篇：肖sir_html之表單標簽
下一篇：css如何引入特殊字體

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商