前言

說到css的單位，大家應(yīng)該首先想到的是像素單位px，我們在網(wǎng)頁布局中一般都是用px，但是近年來自適應(yīng)網(wǎng)頁布局越來越多，em和百分比也經(jīng)常用到了。然后隨著手機(jī)的流行，web app和hybrid app的開發(fā)，都用到了css3技術(shù)，在css3中，新增了許多單位，rem、vw和vh、vmin和vmax、ch和ex等等，那現(xiàn)在對這些單位分別做一下詳細(xì)的介紹吧。

一、CSS單位

CSS 有幾個不同的單位用于表示長度，一些設(shè)置 CSS 長度的屬性有 width，margin，padding，font-size，border-width?等。長度由一個數(shù)字和單位組成（如 10px，2em?等），數(shù)字與單位之間不能出現(xiàn)空格，如果長度值為 0，則可以省略單位。對于一些 CSS 屬性，長度可以是負(fù)數(shù)。有兩種類型的長度單位：相對和絕對。

二、相對長度單位

相對長度單位指定了一個長度相對于另一個長度的屬性。對于不同的設(shè)備相對長度更適用。

【1】em：相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對于瀏覽器的默認(rèn)字體尺寸。任意瀏覽器的默認(rèn)字體大小都是16px，則2em == 32px。em的值并不是固定的；em會繼承父級元素的字體大小。

p {font-size: 12px; /*設(shè)置段落文本屬性*/line-height: 2em; /* 行高為24px */}/* 可以看出，一個 em 等于 font-size 的屬性值， 如果設(shè)置font-size: 12px，則line-height：2em就會等于 24px。 如果設(shè)置 font-size 屬性的單位為 em，則 em 的值將根據(jù)父元素的 font-size 屬性值來確定。 同理，如果父對象的 font-size 屬性的單位也為 em，則將依次向上級元素尋找參考的 font-size 屬性值， 如果都沒有定義，則會根據(jù)瀏覽器默認(rèn)字體進(jìn)行換算，默認(rèn)字體一般為 16px。*/

【2】ex：根據(jù)所使用的字體中小寫字母 x 的高度作為參考。在實(shí)際使用中，瀏覽器將通過 em 的值除以 2 得到 ex 的值。為什么這樣計算呢？因為 x 高度計算比較困難，且小寫 x 的高度值是大寫 x 的一半；另一個影響 ex 單位取值的是字體，由于不同字體的形狀差異，這也導(dǎo)致相同大小的兩段文本，但由于字體設(shè)置不同，ex 單位的取值也會存在很大的差異。

【3】ch：數(shù)字 0 的寬度

【4】rem：rem 是根 em（root em）的縮寫，rem作用于非根元素時，相對于根元素字體大小；rem作用于根元素字體大小時，相對于其出初始字體大小。

/* 作用于根元素，相對于原始大小（16px），所以html的font-size為32px*/html {font-size: 2rem}/* 作用于非根元素，相對于根元素字體大小，所以為64px */p {font-size: 2rem}

【5】vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%。如果瀏覽器的width是900px，1vw求得的值為9px

【6】vh：viewpoint height，視窗高度，1vh=視窗高度的1%。如果瀏覽器的高是900px，1vh求得的值為9px

【7】vmin：vw和vh中較小的那個。如果瀏覽器設(shè)置為1100px寬、700px高，1vmin會是7px

【8】vmax：vw和vh中較大的那個。如果瀏覽器設(shè)置為1100px寬、700px高，1vmax會是11px

【9】%：百分比也是一個相對單位值。百分比值總是通過另一個值來計算，一般參考父對象中相同屬性的值。例如，如果父元素寬度為 500px，子元素的寬度為 50%，則子元素的實(shí)際寬度為 250px。

【10】px：像素 (1px = 1/96th of 1in)? ?px單位是根據(jù)屏幕像素點(diǎn)來確定的。這樣不同的顯示分辨率就會使相同取值的 px 單位所顯示出來的效果截然不同。譬如，Windows的用戶所使用的分辨率一般是96像素/英寸，而MAC的用戶所使用的分辨率一般是72像素/英寸。

三、絕對長度單位

絕對長度單位是一個固定的值，它反應(yīng)一個真實(shí)的物理尺寸。絕對長度單位視輸出介質(zhì)而定，不依賴于環(huán)境（顯示器、分辨率、操作系統(tǒng)等）。

【1】cm（centimeter）：厘米

【2】mm（millimeter）：毫米

【3】in（inch）：英寸， (1in = 96px = 2.54cm)

【4】pt（point）：?磅，?確切的說法是一個專用的印刷單位，大小為1/72英寸，用于印刷。

【5】pc（pica）：派卡，大約 12pt，相當(dāng)于我國新四號鉛字的尺寸

?

文章每周持續(xù)更新，可以微信搜索「?前端大集錦?」第一時間閱讀，回復(fù)【視頻】【書籍】領(lǐng)取200G視頻資料和30本PDF書籍資料

?

總結(jié)

以上是生活随笔為你收集整理的CSS长度单位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。