其實(shí)CSS中的長(zhǎng)度單位一共有8個(gè)榨乎，分別是px怎燥，em，pt蜜暑，ex铐姚，pc，in肛捍，mm隐绵，cm。（ex：相對(duì)長(zhǎng)度單位拙毫。相對(duì)于字符“x”的高度“x-height”依许。此高度通常為字體尺寸的一半。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置恬偷，則相對(duì)于瀏覽器的默認(rèn)字體尺寸悍手。pc：派卡（Pica），絕對(duì)長(zhǎng)度單位袍患。相當(dāng)于我國(guó)新四號(hào)鉛字的尺寸坦康。in：英寸（Inch），絕對(duì)長(zhǎng)度單位诡延。mm：毫米（Millimeter）滞欠，絕對(duì)長(zhǎng)度單位。cm：厘米（Centimeter）肆良，絕對(duì)長(zhǎng)度單位筛璧。）

1、px：像素（Pixel）,相對(duì)長(zhǎng)度單位惹恃，相對(duì)于設(shè)備的長(zhǎng)度單位夭谤，像素是相對(duì)于顯示器屏幕分辨率而言的。譬如巫糙，WONDOWS的用戶所使用的分辨率一般是96像素/英寸朗儒。而MAC的用戶所使用的分辨率一般是72像素/英寸。

2参淹、pt：點(diǎn)（Point）醉锄，絕對(duì)長(zhǎng)度單位。確切的說法是一個(gè)專用的印刷單位“磅”浙值，大小為1/72英寸恳不。用于印刷業(yè)。

3开呐、em：相對(duì)長(zhǎng)度單位烟勋。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸规求。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸神妹。任意瀏覽器的默認(rèn)字體大小都是16px颓哮。em的值并不是固定的家妆；em會(huì)繼承父級(jí)元素的字體大小鸵荠。

4、rem：使用rem為元素設(shè)定字體大小時(shí)伤极，仍然是相對(duì)大小蛹找，但相對(duì)的只是HTML根元素。這個(gè)單位可謂集相對(duì)大小和絕對(duì)大小的優(yōu)點(diǎn)于一身哨坪，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小庸疾，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

5当编、vw届慈、vh：vh等于viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px忿偷。同理金顿，如果顯示窗口寬度為750px,1vw求得的值為7.5px。

6鲤桥、vmin揍拆、vmax:vh和vm總是與視口的高度和寬度有關(guān)，與之不同的茶凳，vmin和vmax是與這次寬度和高度的最大值或最小值有關(guān)嫂拴，取決于哪個(gè)更大和更小。例如贮喧，如果瀏覽器設(shè)置為1100px寬筒狠、700px高，1vmin會(huì)是7px,1vmax為11px箱沦。然而辩恼，如果寬度設(shè)置為800px，高度設(shè)置為1080px饱普，1vmin將會(huì)等于8px而1vmax將會(huì)是10.8px运挫。

在頁(yè)面上可以看到，72px的字體要比72pt的字體小一些套耕，但96px正好和72pt大小一樣谁帕。（因?yàn)閣indow下，屏幕分辨率一般是96像素/英寸冯袍，而1pt大小為1/72英寸）

分別用800×600和1024×768看頁(yè)面的文字匈挖，明顯高分辨率下碾牌，文字就變小。而且儡循，關(guān)鍵的是舶吗，無論用px還是pt，都會(huì)變小择膝。pt并沒有如有些人所說誓琼，是“絕對(duì)”的，“固定”的肴捉。

但如果用打印機(jī)把這頁(yè)面打印出來腹侣，就可以看到：無論屏幕用什么分辨率，打印出來大小都是一樣的（這是當(dāng)然的）齿穗。

“屏幕”上的各種信息傲隶，包括文字、圖片窃页、表格等等跺株，都會(huì)隨屏幕的分辨率變化而變化，一個(gè)100px寬度大小的圖片脖卖，在800×600分辨率下乒省，要占屏幕寬度的1/8，但在1024×768下胚嘲，則只占約1/10作儿。所以如果在定義字體大小時(shí)，使用px作為單位馋劈，那一旦用戶改變顯示器分辨率從800到1024攻锰，用戶實(shí)際看到的文字就要變“小”（自然長(zhǎng)度單位）。

那是不是用pt做單位就沒這樣的問題呢妓雾？錯(cuò)娶吞！問題同樣出現(xiàn)。剛才的例子已經(jīng)很清楚的說明械姻，在不同分辨率下妒蛇，無論是px還是pt，都會(huì)改變大小楷拳。

Mac機(jī)怎么情況不清楚绣夺，在Windows里，默認(rèn)的顯示設(shè)置中欢揖，把文字定義為96DPI（PPI陶耍，微軟都將DPI和PPI混為一體，我們也就無須較真了）她混。這樣的定義烈钞，說明了：1px＝1/96英寸泊碑。聯(lián)系pt的概念，1pt＝1/72英寸毯欣，可以得出馒过，在這樣的設(shè)置中，1px＝0.75pt酗钞，常見的宋體9pt＝12px腹忽。在顯示器分辨率不變的基礎(chǔ)上（比如現(xiàn)在常用的1024×768），1px大小也就固定不變算吩，改變顯示設(shè)置留凭，調(diào)整為144DPI，可以得出偎巢，1px＝0.5pt，常見的宋體9pt＝18px兼耀。原先用12px來組成的一個(gè)文字压昼，現(xiàn)在需要18px來組成，px多了瘤运，文字就“大”了窍霞，更易閱讀了。

所以拯坟，px和pt的使用區(qū)別但金，只有當(dāng)用戶改變默認(rèn)的96DPI下才會(huì)產(chǎn)生：使用px定義文字，無論用戶怎么設(shè)置郁季，都不會(huì)改變大欣淅！；使用pt定義文字梦裂，當(dāng)用戶設(shè)置超過96DPI的值似枕，數(shù)值越大，字體就越大年柠。

（附公式：pt = px * dpi / 72)

在網(wǎng)頁(yè)設(shè)計(jì)中凿歼，面向用戶的屏幕的基本單位是px，因此使用px作為單位是最簡(jiǎn)單也最容易理解的冗恨，而pt也不過是通過了Windows的設(shè)置乘上了一個(gè)比率轉(zhuǎn)變成px再顯示答憔，算是繞了個(gè)圈子。

但在Word或Photoshop中掀抹，使用pt就相當(dāng)方便虐拓。因?yàn)槭褂肳ord和Photoshop的主要目的都不是為了屏幕瀏覽，而是輸出打印渴丸。

PPI（DPI）：pixel（dot）per inch侯嘀，每英寸的像素（點(diǎn)）數(shù)另凌，是一個(gè)率，表示了“清晰度”戒幔，“精度”吠谢。

1em=16px。那么12px=0.75em,10px=0.625em诗茎。為了簡(jiǎn)化font-size的換算工坊，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em,也就是說只需要將你的原來的px數(shù)值除以10敢订，然后換上em作為單位就行了王污。

注意：避免字體大小的重復(fù)聲明。也就是避免1.2 * 1.2= 1.44的現(xiàn)象楚午。比如說你在#content中聲明了字體大小為1.2em昭齐，那么在聲明p的字體大小時(shí)就只能是1em，而不是1.2em, 因?yàn)榇薳m非彼em矾柜，它因繼承#content的字體高而變?yōu)榱?em=12px阱驾。

相對(duì)單位em是相對(duì)于元素本身的字體大小的。在css中唯一例外的是font-size屬性怪蔑，它的em和ex值指的是相對(duì)父元素的字體大小里覆。

除了font-size之外其他屬性的em計(jì)算相對(duì)于元素自身字體大小。

可以看出缆瓣，子元素的字體大小是父元素字體大小的50%喧枷，而子元素的margin-right值是自己字體大小的20%。且子元素的寬度用em表示也是基于自己字體大小弓坞，而不是父元素的寬度哦隧甚！

ex單位被定義為”當(dāng)前字體的x-height或者一個(gè)em的一半”。給定的字體的x-height是指那個(gè)字體的小寫x的高度昼丑。通常呻逆，這是這個(gè)字體的中間的標(biāo)志。

x-height:小寫字母x的高度

對(duì)于這種單位有很多的用途菩帝，大多數(shù)是用于排版的微調(diào)咖城。例如，sup元素,代表上標(biāo)呼奢，可以用相對(duì)定位和一個(gè)1ex的底部值在行內(nèi)被推高宜雀。類似地，你可以拉低一個(gè)下標(biāo)元素握础。

PS:calc()= calc(四則運(yùn)算)

說明：用于動(dòng)態(tài)計(jì)算長(zhǎng)度值辐董。需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格禀综，例如：width: calc(100% - 10px)简烘；

任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算苔严；

calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算；

calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則孤澎；

下面看對(duì)于calc()的應(yīng)用：

此時(shí)的效果很簡(jiǎn)單届氢，就是div.box完全遮蓋了div.demo，如下圖所示：

下面覆旭，在div.box上添加10px的內(nèi)距padding退子，同時(shí)添加5px的border，div.demo上添加了一個(gè)padding：3px 0;

這個(gè)時(shí)候div.box的寬度大于了其容器div.demo的總寬度型将，從而撐破容器伸出來了寂祥，如圖所示：

為了解決撐破容器的問題，以前我們只能去計(jì)算div.box的寬度七兜，用容器寬度減去padding和border的值丸凭，但有時(shí)候，我們苦于不知道元素的總寬度惊搏，比如說是自適應(yīng)的布局贮乳，只知道一個(gè)百分值，但其他的值又是px之類的值恬惯，這就是難點(diǎn)，死卡住了亚茬。

有兩種解決這個(gè)問題的方法：1酪耳、box-sizing 2、calc()刹缝。隨著CSS3的出現(xiàn)碗暗，其中利用box-sizing來改變?cè)氐暮心Ｐ皖愋蛯?shí)使實(shí)現(xiàn)效果，但今天我們學(xué)習(xí)的calc()方法更是方便梢夯。

1言疗、div.box的box-sizing設(shè)置為border-box；

效果：

div.demo:

div.box:

2颂砸、使用calc()

知道總寬度是100%噪奄，在這個(gè)基礎(chǔ)上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" 人乓，最終得到的值就是div.box的width值：

這樣一來勤篮，通過calc()計(jì)算后，div.box不在會(huì)超出其容器div.demo的寬度色罚，如圖所示：

rem來做移動(dòng)端的響應(yīng)式適配：

參考文獻(xiàn)：http://web.jobbole.com/82490/

calc()參考文獻(xiàn)：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html