css快捷方式

css的屬性是非常多的，比如，padding-top、padding-bottom、background-color、background-repeat等。

但是除了這種笨拙的輸入以外還有一種比較便捷的方式。

盒子模型的一些簡寫方式

例一 內邊距簡寫

下面是非常正常的程式碼輸入格式。

padding-top:0px;/*padding內邊距*/
padding-right:20px;
padding-bottom:30px
padding-left:10px;

我們可以變換一下這樣，css的程式碼是根據上、右、下、左順時針的順序來輸入程式碼。如果想要調整某一個位置就可以自己推算一下。

padding: 0px 20px 30px 10px ;
		/*0上 20右 30下 10左*/
 

例二 外邊距簡寫

在舉一個例子

margin-top:0px;
margin-right:20px;
margin-bottom:30px;
marging-left:10px;

簡寫方式,也是同樣的原理根據順時針判斷內邊距每個畫素的大小。

marging:0px 20px 30px 10px;
        /*0上 20右 30下 10左*/

例三 內外邊距相同簡寫方法

還有另外一種，如果四個邊距的值是相同的，還可以更短的寫一下。

padding:20px;   /*上 右 下 左 均為20px*/

例四 內外邊距上下和左右相同簡寫方法

如果上邊的內外編劇其中兩個畫素是相同的還用其他方式i可以寫。

margin: 0px 20px;
         /*0px代表上和下
		  20px代表左和右*/
 

例五 邊框簡寫方式

邊框屬性也是一樣可以簡寫的

border-width： thin；
/*邊框的寬度    thin是細*/
border-style： solid；
/*邊框的樣式    solid是實線*/
border-color： #007e7e;
/*邊框的顏色*/

簡寫的方式是,邊框和內外邊距不同，他們是可以用任何順序組成。

border: thin solid #007e7e;

例子六 背景和邊框簡寫方式

正常的輸入格式

background-color:white;
background-image:url(imges/圖片.jpg);
background-repeat:repeat-x;
 

類似與邊框，簡寫也是可以採用任何順序進行。

background:white url(imges/圖片.jpg) repeat-x;