CSS的單位及css3的calc()及line-height百分比

標籤：roo   預覽   script   css   詳細   經驗   表達   定位   中比   

單位介紹

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

em

做前端的應該對em不陌生，不是什麼罕見的單位，是相對單位，參考物是父元素的font-size，具有繼承的特點。如果字型大小是16px（瀏覽器的預設值），那麼 1em = 16px。

不過，這樣使用很複雜，很難很好的與px進行對應，因此，前端開發的前輩們總結了一個經驗

body {font-size: 62.5%;}

那麼，這樣之後 1em = 10px 在布局等使用的時候好換算了很多。

百分比

百分比相信大家更不會陌生了，百分比一般寬泛的講是相對於父元素，但是並不是十分準確。

1、對於普通定位元素就是我們理解的父元素

2、對於position: absolute;的元素是相對於已定位的父元素（offset parent）

3、對於position: fixed;的元素是相對於 ViewPort

viewport：可視視窗，也就是瀏覽器的window那麼大。

例外情況

1、使用了padding、margin 等，實際百分比和你想要的百分比是有區別的。（關於這個，解決方案之一，就是我們可以使用css3的calc()屬性，具體，您請繼續往下看，在文章最後我會解釋。）

2、line-height百分比的一些情況，通常結果是百分比 計算後的值。（關於這個，您請繼續往下看。。。）

rem

rem支援IE9及以上，意思是相對於根項目html（網頁），不會像em那樣，依賴於父元素的字型大小，而造成混亂。使用起來安全了很多。

html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}   body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}

這樣整個網頁都會比較統一！不會造成混亂！

vh 和 vw

IE10＋ 和現代瀏覽器都支援這兩個單位。

vw Viewport寬度， 1vw 等於viewport寬度的1%

vh Viewport高度， 1vh 等於viewport高的的1%

vw和vh會隨著viewport變化自動變化，再也不用js控制全屏了。

甚至有些人喪心病狂的字型大小都用vw和vh控制，來達到字型和viewport大小同步的效果。

vmin和vmax

IE10+ 和現代瀏覽器都已經支援vmin

webkit瀏覽器之前不支援vmax，新版已經支援，所有現代瀏覽器已經支援，但是IE 全部 不支援vmax

vmin vw和vh中比較 小 的值

vmax vw和vh中比較 大的值

這兩個屬性也會隨著viewport變化

ch和ex

IE9+ 和現代瀏覽器都已經支援,這兩個單位時根據 當前font-family 的相對單位。

ch 字元0的寬度

ex 小寫字元x的高度

如：

當font-family改變的時候這兩個單位的值也會變化，不同字型表現的樣式不一樣。

css3的calc()

上面我們已經提到了calc()，下面我們就具體說一說吧！

瀏覽器支援IE9+、FF4.0+、Chrome19+、Safari6+

calc()文法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學運算式來表示：

.haorooms {  width: calc(expression);}

這樣padding和margin和百分比一起用，問題就可以解決了。

例如，我們margin是20px。那麼我們就可以寫成

.haorooms{  width: calc(100% - 20px);  //註：減號前後要有空格，否則很可能不生效！！}

也可以這麼用：

.box {    background: #f60;    height: 50px;    padding: 10px;    border: 5px solid green;     width: 90%;/*寫給不支援calc()的瀏覽器*/    width:-moz-calc(100% - (10px + 5px) * 2);    width:-webkit-calc(100% - (10px + 5px) * 2);    width: calc(100% - (10px + 5px) * 2);}

line-height百分比

line-height百分比在面試中可能經常問到。例如你知道line-height:120%和line-height:1.2的區別嗎？

現在就說一下行高帶單位和不帶單位的區別，例如下面的例子：

line-height:26px; 表示行高為26個像素line-heigth:120%;表示行高為當前字型大小的120%line-height:2.6em; 表示行高為當前字型大小的2.6倍

帶單位的行高都有繼承性，其子項目繼承的是計算值，如父元素的字型大小為14px，定義行高line-height:2em;則計算值為 28px，不會因其子項目改變字型尺寸而改變行高。(例如：父元素14px，子項目12px,那麼行高就是28px，子項目雖然字型是12px，行高還是父元素的行高)

line-height:2.6;表示行高為當前字型大小的2.6倍

不帶單位的行高是直接繼承，而不是計算值，如父元素字型尺寸為14px，行高line-height:2;子項目字型為12px，不需要再定義行高，他預設的行高為24px。（例如：子項目12px，他的行高是24px,不會繼承父元素的28px）

只是單純的文字描述，可能同學看了會很暈！不清楚是怎麼回事！下面我再補充一下案例吧！

大家把下面代碼copy到html中

<style>    .haorooms_bfb{font-size:14px;line-height: 150%; background: green;padding:10px}    .haorooms_nodw{font-size:14px;line-height: 1.5; background: green;padding:10px}    .haorooms_children{font-size:26px;background: red}</style><div class="haorooms_bfb">    <div class="haorooms_children">行高測試</div></div><br/><br/><div class="haorooms_nodw">    <div class="haorooms_children">行高測試</div></div>

其中，一個是有百分比的，一個是沒有百分比的！預覽圖如下：

如，有百分比的haorooms_children 繼承了父級元素14*1.5=21px

沒有百分比，不帶單位的是自己的1.5倍，也就是26*1.5=39px;

 

 

 

來自： http://www.haorooms.com/post/css_unit_calc

CSS的單位及css3的calc()及line-height百分比