CSS中的那點事兒（一）--- CSS中的單位1

標籤：style   blog   http   color   ar   使用   sp   資料   div   

單位主要用在規定元素的數值性css屬性的，這裡主要討論應用的比較多的是width height  padding margin font-size，而單位中應用最廣泛就是%、px、em

百分比

百分比，關鍵就是參考的父元素，在正常流和浮動時，就是包裹著當前元素的元素；在相對定位、絕對位置時，就是當前元素相對於的定位的元素，其實這個很好理解，在這種情況下元素框從文檔流完全刪除，和原來的文檔流沒有關係，其包含塊可能是文檔中的另一個元素或者是初始包含塊。下文中提到的父元素都是基於這些知識上，因此不再強調。嚴格意義上來說，百分比不能算是一種單位，可以理解為包含數值和單位的資料，不管父元素的該屬性是什麼單位，都是將數值*百分比+單位計算出child的屬性值。

html代碼如下：

<body>  <div class="container">    <div class="child"></div>  </div></body>

css代碼如下：

.container{   width: 800px;   height: 400px;   padding: 10px;   background-color: #228F45; }.child{   width: 80%;   height: 80%;   background-color: #D5DED8; }

width height

1.border-sizing為預設值content-box時，container（圖1）與child的box model（圖2）如下

圖1

圖2

圖3

圖4

container的內容寬度和高度為800、400,child的width=800*80%=640,heigth=400*80%=320,在這種情況下，container（圖3）與      child的box model（圖4）如上，由於設定box-sizing為border-box，所以container的內容寬度和高度分別為780、380，child的width=780*80%,height=380*80%;由此可見,元素的height或width設定成百分比，是相對於父元素的內容高度。

padding和margin

padding和margin的值為百分比是相對於父元素的width計算的，不管是padding-left,還是padding-top。將.container中添加padding:10%,child 的box model如

圖5

padding = width*800,這是在box-sizing為預設的情況下計算的。margin同理。

font-size

設定container的font-size : 20px,.child的font-size：80%，則瀏覽器計算出來的結果為child 的font-size為16px.

em

em是相對單位長度，官方是這樣描述的：相對於當前對象內文體的字型尺寸。官方說得比較含糊，但可以明確的是跟字型尺寸相關，具體到css屬性就是font-size。

在正常情況下，瀏覽器的預設字型大小為16px(排除修改了瀏覽器的預設設定的)。所以在例子中，對於container的包含塊body來說，由於沒有設定body的font-size，因此body的font-size為16px,等同於1em，body的子項目如果沒有設定font-size的情況下，都預設為            1em=16px來計算。

還是用上面的html做例子來說明，css代碼如下：

.container{      width: 20em;      height: 10em;      padding: 10px;      background-color: #228F45;}.child{      width: 10em;      height: 5em;      background-color: #D5DED8; }

查看container (圖6)和 child(圖7)的盒模型如下

圖6

圖7

圖8

圖9

container： width=20*16,height=10*16.child同理。這種情況比較簡單。現在我們在.container中添加font-size:1.5em,child中添加font-size: 0.8em。body中還是1em=16px，container的font-size=16*1.5=24px，child的font-size=24*0.8=19.2px，所以在container一個字的寬度為24px, 即1em=24px，相對應地計算出寬和高為480*240，在child一個字的寬度為19.2px，即1em=19.2px，相對應地計算出寬和高為192*96。container (圖8)和 child(圖9)的盒模型見上方。以上可得知em為單位的換算會繼承父元素，有累積效果。padding和margin的計算方式同width、height。

px

px是相對長度單位，指螢幕上的一個像素點，而每英寸的像素是dpi,dpi值越高越清晰。width、height、padding、margin、font-size屬性值用這個為單位沒有什麼特殊的，目前在web上使用的比較廣泛。其他幾種單位在browser上也是轉換成px來表現的。

總結

em和百分比比較類似，都是相對於父元素，有累積效果，em與px的換算並不是固定的。IE無法調整使用px為單位的字型大小，因此對於響應式變得如此流行的今天，當web應用移植到手機上時，顯得不太合適。使用em作為字型單位，可以使頁面字型得到恰當地縮放，效果也會好很多。

CSS中的那點事兒（一）--- CSS中的單位1