css所有缩写属性,CSS属性简写整理

《写出高效整洁的css的13条规则》里面有提到要尽量简写css。具体怎么简写呢，总结如下：

盒子的内外边距(margin和padding)

以margin为例，padding相同。盒子有上下左右四个方向，每个方向都有个外边距：

演示代码

复制代码代码如下:

margin-top:1px;

margin-right:1px;

margin-botton:1px;

margin-left:1px;

这四个值可以缩写到一起：

演示代码

复制代码代码如下:

margin:1px1px1px1px;

缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：

演示代码

复制代码代码如下:

margin:1px;//四个方向的边距相同，等同于margin:1px1px1px1px;

margin:1px2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px2px1px2px

margin:1px2px3px;//右边距和左边距相同，等同于margin:1px2px3px2px;

margin:1px2px1px3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。

边框(border)

border是个比较灵活的属性，它有border-width、border-style、border-color三个子属性。

演示代码

复制代码代码如下:

border-width:数字+单位;

bo