2011年7月25日星期一

網頁設計筆記(十五) CSS Box 模型

Box最好的實例就是說<div></div>
一個Box真實的顯示尺寸 = 設定尺寸(闊/高)+留白(padding+margin)+邊框+行高。行高如果沒有設定,則為Font的設定,如Font-size:12pt,則行高(line-height)為12pt 。
當行高大於Box元件時,Box元件就會撐開,造成多了的上邊內留白狀況(padding-top)。

Browser預設下,1em為16px
所以12px為0.75em

<h1>      =  2em      =  32px
<h2>      =  1.5em   =  24px
<h3>      =  1.17em =  18.72px     = <big>
<h4>      =  1em      =  16px
<h5>      =  0.83em =  13.28px     = <small>
<h6>      =  0.74em =  10px