<font>周邊知識點，<font>知識點

<font>周邊知識點，<font>知識點

em

　　1em = 元素自身設定的或是父元素繼承的font-size值

1 <h1>left margin = <small>24px</small></h1>2 <h2>left margin = <small>18px</small></h2>3 <p>left margin = <small>12px</small></p>

1 h1{font-size:24px;}2 h2{font-size:18px;}3 p{font-size:12px;}4 h1,h2,p{margin-left:1em;}

font-weight

　　值100~900並沒有固定的加粗度，一般與某個變形名等價，400對應normal，700對應bold，其他視關鍵字情況而定。

Times假想加粗指定

字型	指定關鍵字	指定數字
TimesRegular	normal	100,200,300,400
TimesBold	bold	500,600,700,800,900

 

 

 

bolder 根據父元素加粗

1 p{font-weight:normal;}/*400，更粗是bold對應700，其中最小值為700*/2 p em{font-weight:bolder;}/*700*/3 4 h1{font-weight:bold;}/*700，更粗假設沒有關鍵字，則設定為下一個更大的數字，最大為900*/5 h1 b{font-weight:bolder;}/*800*/

 

font-size

　　無指定數字，初始值為medium。larger類似bolder根據父元素按縮放因子上移，但無絕對大小範圍（900）限制。

　　百分比也是按照父元素繼承的大小來計算。

　　這些繼承是一級一級的，嵌套越裡積累越多。　

　　使用px則是給字型固定值，這樣有個隱患即在IE6前使用者無法調整文字大小，所以字型大小使用關鍵字和百分數會更好。　

text-indent

　　文本縮排也會繼承。

1 <style type="text/css">2     #demo{text-indent:3%;}3 </style>

1 <div id="demo">2     This is the first line.3     <p>This is the second line while this will also <br>get the text indent style.</p>4 </div>

line-height

 1 <style type="text/css"> 2     body{font-size:10px;line-height:10px;} 3     /*由於大多數瀏覽器預設font-size最小值為12px,所以此處body設定的字型大小其實為12px*/ 4     5     .paragraphA{line-height:1em;}/*繼承字型大小為12px，line-height為12*1=12px*/ 6     .paragraphA p{font-size:18px;}/*line-height為繼承的12px*/ 7  8     .paragraphB{line-height:1;}/*使用縮放因子，運用於該元素和所有子項目，各元素根據自己字型大小值計算line-height為12*1=12px*/ 9     .paragraphB p{font-size:14px;}/*自身大小值*縮放因子：line-height為14*1=14px*/10 11     .paragraphC p{font-size:12px;line-height:150%;}/*根據自身指定字型大小計算line-height為12*150%=18px*/12 </style>

1 <div class="paragraphA">2     <p>This is paragraph A which gets a line-height equals 12px.</p>3 </div>4 <div class="paragraphB">5     <p>This is paragraph B which gets a line-height equals 14px.</p>6 </div>7 <div class="paragraphC">8     <p>This is paragraph C which gets a line-height equals 18px.</p>9 </div> 

vertical-align

　　預設值為baseline，與文字基準對齊（字母如"g"，小尾巴在基準下方）。

　　text-bottom：與文字最底端那條線對齊（文字的“底部切線”，小尾巴最底端那條切線）。

　　bottom:行框最底部對齊（行高大於字型大小時，行高所佔空間的最底部，小尾巴下方還有一定距離）。

 　  百分數則是相對父元素的基準（行高）升高或者降低指定的量。

　　px:正值則上升，負值則下降。

　　注意vertical-align只能用於行內元素或者表儲存格元素。

 

 參考資料

《css權威指南》第4~6章