盒模型代碼簡(jiǎn)寫
盒模型外邊距(margin)昌抠、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是按照順時(shí)針方向設(shè)置的:上右下左瘤睹。
拿margin示例:
margin:10px 15px 12px 14px;/*上設(shè)置為10px俏讹、右設(shè)置為15px、下設(shè)置為12px董济、左設(shè)置為14px*/
1、如果top要门、right虏肾、bottom、left的值相同暂衡,如下面代碼:
margin:10px 10px 10px 10px;
可縮寫為:
margin:10px;
2询微、如果top和bottom值相同、left和 right的值相同狂巢,如下面代碼:
margin:10px 20px 10px 20px;
可縮寫為:
margin:10px 20px;
3撑毛、如果left和right的值相同,如下面代碼:
margin:10px 20px 30px 20px;
可縮寫為:
margin:10px 20px 30px;
padding唧领、border的縮寫方法和margin是一致的藻雌。
顏色值縮寫
顏色值是16進(jìn)制,如果兩位是一樣的可以進(jìn)行縮寫
例子1:
p{color:#000000;}
可以縮寫為:
p{color: #000;}
例子2:
p{color: #336699;}
可以縮寫為:
p{color: #369;}
字體縮寫
下面是給網(wǎng)頁設(shè)置字體的代碼:
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
這么多行的代碼其實(shí)可以縮寫為一句:
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
注意:
1斩个、使用這一簡(jiǎn)寫方式你至少要指定 font-size 和 font-family 屬性胯杭,其他的屬性(如 font-weight、font-style受啥、font-variant做个、line-height)如未指定將自動(dòng)使用默認(rèn)值鸽心。
2、在縮寫時(shí) font-size 與 line-height 中間要加入“/”斜扛居暖。
一般情況下因?yàn)閷?duì)于中文網(wǎng)站顽频,英文還是比較少的,所以下面縮寫代碼比較常用:
body{
font:12px/1.5em "宋體",sans-serif;
}
只是有字號(hào)太闺、行間距糯景、中文字體、英文字體設(shè)置省骂。