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;