CSS 高手们经常追求 CSS 代码的精炼，结构清晰，其中一个方向就是采用 CSS 简写。通过 CSS 简写可以让你的 CSS 文件更小，更易读。今天我们就归纳几个经常使用的 CSS 精简写法
盒子大小
这里主要用于两个属性：margin 和 padding，我们以 margin 为例，padding 与之相同。盒子有上下左右四个方向，每个方向都有个外边距：
[一流素材网]- 示例代码 margin-top:1px;
margin-right:1px;
margin-botton:1px;
margin-left:1px;
这四个值缩写的方式是：
[一流素材网]- 示例代码 margin:1px 1px 1px 1px;
备注：缩写的顺序是上 -> 右 -> 下 -> 左。顺时针的方向。
如果四个空白数值相同还可以进一步缩写：
[一流素材网]- 示例代码 margin:1px;// 四个方向的边距相同
更多的缩写方式：
[一流素材网]- 示例代码 margin:1px 2px;// 上下边距都为 1px，左右边距均为 2px，等同于 margin:1px 2px 1px 2px
margin:1px 2px 3px;// 右边距和左边距相同，等同于 margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;// 注意，这里虽然上下边距都为 1px，但是这里不能缩写。
边框 (border)
先介绍一下 border 的基本属性：
border-width: 数字 + 单位;
border-style: none || hidden || dashed || dotted || double || groove || inset || outset || ridge || solid ;
border-color: 颜色 ;
border 可以按照 width、style 和 color 的顺序简写：
[一流素材网]- 示例代码 border:5px solid #369;
备注：border 默认的宽度是 3px，默认的色彩是 black—— 黑色。border 的缩写中 border-style 是必须的。
我们还可以针对边的每个属性进行精简缩写, 缩写规则类似盒子大小的缩写, 如下：
[一流素材网]- 示例代码 border-width：1px 2px 3px;
border-style：solid dashed dotted groove;
border-color: red blue white black;
背景 (background)
还是照例先介绍一下 background 的基本语法
background-color: color || #hex || RGB(% || 0-255) || RGBa;
background-image:url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;
background 的简写可以大大的提高 css 的效率：
[一流素材网]- 示例代码 background:#fff url(img.png) no-repeat 0 0;
备注：background 的简写也有些默认值：background:#fff url(img.png) no-repeat 0 0; background 属性的值不会继承，你可以只声明其中的一个，其它的值会被应用默认的。
熟练的运用 CSS 简写，精简 CSS 代码，可以极大提高你的 CSS 代码的可读性。
