了解CSS中長度單位有哪些？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

站在用戶的角度思考問題，與客戶深入溝通，找到蜀山網(wǎng)站設(shè)計(jì)與蜀山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬主機(jī)、企業(yè)郵箱。業(yè)務(wù)覆蓋蜀山地區(qū)。

CSS中有很多屬性可以接受長度值，比如： width, height, margin, padding, border-width, font-size, text-shadow。因?yàn)槭褂脠鼍岸?，因此CSS也提供了許多長度單位。有的是日常生活中使用的單位，比如：厘米（cm）和英寸（in）；有的是印刷行業(yè)使用的單位，比如：point（pt）和pica（pc）；有的是專門為CSS發(fā)明的單位，比如：px。

使用場景

那么這些屬性和單位怎么配合使用呢？特定的屬性需要使用特定的單位嗎？其實(shí)并非如此，單位和屬性無關(guān)，同一個(gè)屬性任何單位都適用，何時(shí)使用何種單位是沒有限制的，如果屬性接受以px為單位的值（比如：margin: 5px），那么它也可以接受英寸或厘米（margin: 1.2in; margin: 0.5cm）為單位的值，反之亦然。

單位雖然和屬性無關(guān)，但是和輸出的媒介有一定關(guān)系，比如輸出到是屏幕還是紙張。在屏幕上顯示和在紙張上面打印推薦使用的單位是不一樣的。下表給出了推薦的使用方法：

除了和輸出媒介的關(guān)系，這些單位可以從長度值的計(jì)算方式區(qū)分為絕對(duì)單位和相對(duì)單位。

絕對(duì)單位

絕對(duì)單位（px，cm， mm，in，Q，pt和pc）意味著以此為單位的長度值與其代表的物理長度相等，比如width: 1cm即與現(xiàn)實(shí)世界中的1cm長度相等，也意味著絕對(duì)單位在所有的媒介上的顯示效果是一致的。但這是理想情況，受顯示器和不同瀏覽器CSS實(shí)現(xiàn)的差異，在很多設(shè)備上絕對(duì)單位顯示的并不精確。因?yàn)閜x和in的關(guān)系為1in=96px， 在低分辨率設(shè)備上，1px為1像素（pixel，也是px名稱的由來）長度，而低分辨率的屏幕上1px往往大于1/96in，所以從px計(jì)算得到的其他絕對(duì)單位值都不準(zhǔn)確。而在高分辨率設(shè)備上（如現(xiàn)在的高清屏和打印機(jī)）絕對(duì)單位顯示得更精確。由于以上原因，絕對(duì)單位更多的是在打印時(shí)使用。

曾經(jīng)，CSS要求在計(jì)算機(jī)屏幕上正確顯示絕對(duì)單位。但是由于大部分廠商并不能實(shí)現(xiàn)這一要求，所以CSS在2011年放棄了這一要求。目前，絕對(duì)單位僅在打印和高分辨率設(shè)備上正常工作。CSS沒有明確定義“高分辨率”的含義。但是，由于目前低端打印機(jī)的每英寸點(diǎn)數(shù)為300 dpi，而高端屏幕的每英寸點(diǎn)數(shù)為200 dpi，因此所謂的“高分辨率”可能介于兩者之間。。

下面貼出絕對(duì)單位直接的換算公式：

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

px

作為CSS中最常用的單位，關(guān)于px還是有必要多說兩句的。px的特點(diǎn)可以歸納如下：

1. 在低分辨率設(shè)備上，1px = 1像素；

2. 在高分辨率設(shè)備上，1px = 1/96in，1px不一定等于1像素（比如4.7英寸的iphone上 1px=2像素）；

3. 對(duì)于圖片顯示，1px = 1圖片像素，比如：一個(gè)600x400分辨率的照片的的CSS寬高即為600px和400px（在4.7英寸iphone上要用1200x800個(gè)像素點(diǎn)顯示）；

相對(duì)單位

相對(duì)單位意味著長度值是根據(jù)其他長度計(jì)算得出的。相對(duì)單位又可以分為基于字體（font based）和基于視窗（viewport based）的：

Font Based

em, ex

首先說說em和ex，em代表元素的當(dāng)前字體大小，如果元素的font-size為2cm，那么1em即表示2cm。em可以用于控制尺寸，比如margin: 1em; text-indent:1.5em，此時(shí)這些尺寸和元素字體大小相關(guān)，因此在大屏幕上（字體尺寸較大）和小屏幕上（字體尺寸較?。?huì)等比縮放，因此em可以用于響應(yīng)式的設(shè)計(jì)。如果em直接用于font-size屬性，如font-size: 2em，則em表示為父元素字體的大小。

ex很少被使用，ex表現(xiàn)的大小與字體的x-height相關(guān)。x-height大致等于字體中小寫字母（例如a，c，m或o）的高度。相同font-size的不同字體的x-height可能會(huì)有很大的差別，所以使用ex產(chǎn)生的效果存在很大的不確定性。

rem

CSS在2013年創(chuàng)造出了一個(gè)新的單位rem，rem表示的是根元素（html元素的）字體大小，在每個(gè)元素里面em都可能不一樣，但是rem都是一致的。因?yàn)檫@一特性，rem現(xiàn)在被更廣泛的應(yīng)用于響應(yīng)式設(shè)計(jì)。

ch

ch用的表較少，是CSS3中新加入的單位，表示當(dāng)前字體中的 "0" (零、unicode 字符 U+0030) 的寬度。

Viewport Based

vw，wh，vmin，vmax

都是CSS3中新加入的單位。vw，vh可以根據(jù)視窗大小調(diào)整字體大小。vw是視窗的1/100的寬度，而vh是視窗1/100的高度。此外還有vmin，它指的是vw以及vh間較小的那個(gè)，與之相對(duì)的還有vmax。這些單位在目前大部分瀏覽器上都有支持。

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)CSS中長度單位有哪些大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。