css屬性padding,CSS代碼縮寫?
1.盒模型代碼縮寫
在將盒模型時(shí),我們講過(guò)盒模型的外邊距(margin)、內(nèi)邊距(padding)和邊框(border)設(shè)置上下左右四個(gè)方向的邊距是按照順時(shí)針?lè)较蛟O(shè)置的:上右下左。如:
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是一致的。
2.顏色值縮寫
當(dāng)你設(shè)置的顏色是16進(jìn)制時(shí),如果每?jī)晌粩?shù)值相同,你可以簡(jiǎn)寫一半。如:
p{color:#000000;} p{color: #336699;}
可簡(jiǎn)寫為:
p{color:#000} p{color:#369}
3.字體縮寫
字體的CSS樣式同樣可以簡(jiǎn)寫,如:
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋體",sans-serif;
}
以上代碼可縮寫為:
body{
font:italic small-caps bold 12px/1.5em "宋體",sans-serif;
}
html如何調(diào)dt與上邊框的距離?
html中元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間。控制該區(qū)域最簡(jiǎn)單的屬性是 padding 屬性。CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域。CSS padding 屬性CSS padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長(zhǎng)度值或百分比值,但不允許使用負(fù)值。例如,如果希望所有dt元素的各邊都有 10 像素的內(nèi)邊距,只需要這樣:
h1 {padding: 10px;}還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距,各邊均可以使用不同的單位或百分比值:
dt{padding: 10px 0.25em 2ex 20%;}
margin和padding有什么區(qū)別?
CSS中margin和padding有以下三方面區(qū)別。 在CSS中margin是指從自身邊框到另一個(gè)容器邊框之間的距離,就是容器外距離。在CSS中padding是指自身邊框到自身內(nèi)部另一個(gè)容器邊框之間的距離,就是容器內(nèi)距離。
1、語(yǔ)法結(jié)構(gòu)。 padding: padding-left:10px; 左內(nèi)邊距、padding-right:10px; 右內(nèi)邊距、padding-top:10px; 上內(nèi)邊距、padding-bottom:10px; 下內(nèi)邊距。 margin:margin-left:10px; 左外邊距、margin-right:10px; 右外邊距、margin-top:10px; 上外邊距、margin-bottom:10px; 下外邊距。
2、可能取的值。 padding:length規(guī)定具體單位記的內(nèi)邊距長(zhǎng)度、%基于父元素的寬度的內(nèi)邊距的長(zhǎng)度、auto瀏覽器計(jì)算內(nèi)邊距、inherit 規(guī)定應(yīng)該從父元素繼承內(nèi)邊距。 margin:length 規(guī)定具體單位記的外邊距長(zhǎng)度、%基于父元素的寬度的外邊距的長(zhǎng)度、auto瀏覽器計(jì)算外邊距、inherit 規(guī)定應(yīng)該從父元素繼承外邊距。
3、瀏覽器兼容問(wèn)題。 padding:所有瀏覽器都支持padding屬性、任何版本IE都不支持屬性值“inherit”。 margin:所有瀏覽器都支持margin屬性、任何版本IE都不支持屬性值“inherit”。