常用缩写主要是COLOR MARGN PADDING BACKGROUND FONG等。今天同事又问到我这个margin:10px
20px 0;分三段的写是什么意思，三个缩写的我知道，担实应用上还真没用。通常我都用四个的代替也就差几个字母而以，又看到人家在用，感觉自己还不够细呀，以前就记不住，又来这个问题了。这次想主要想把它记住。才决定把基础知识在巩固一下。做为专业前台制作来讲。CSS缩写几乎就像和每天吃大米饭一样常用。所以还是得记住。多记一个，可能就少写一段代码，对页面的质量，和速度都慢有好处了，更是追求完美的体现。
下面是方法。懂的就当复习复习，不懂的见意还是收藏吧。 感觉CSS缩写还是挺重要的。
1.margin和padding的缩写方式。
第一种：四边各不同，依次顺序(上)、(右)、(下)、(左)。
原代码 .div{padding-top:10px;padding-right: 20px;padding-bottom: 30px;padding-left: 40px;}
缩写后 .div{padding:10px 20px 30px 40px;} 注意顺序：上右下左）
第二种：上下边一样，左右边一样，依次顺序(上下)、(左右)。
原代码.qweqwe{ padding-top:10px;padding-right:auto;padding-bottom: 10px;padding-left: auto;}
缩写后 .div{padding:10px auto;} 注意顺序：(上下)、(左右)。
第三种：上边，左右边一样，下边，依次顺序(上)、(左右)、(下)。
原代码.qweqwe{ padding-top:10px;padding-right:15px;padding-bottom: 20px;padding-left: 15px;}
缩写后 .div{padding:10px 15px 20px;} 注意顺序：(上)、(左右)、(下)。
第四种：四边全一样，一个全搞定(上下左右)。
原代码.qweqwe{ padding-top:10px;padding-right:10px;padding-bottom: 10px;padding-left: 10px;}
缩写后 .div{padding:10px;}（注意：(上下左右)。
2.border缩写方式。
第一种：边框宽5px， 实线，红色。
原代码.div{border-width: 5px;border-style: solid;border-color: #FF0000;}
缩写后 .div{border: 5px solid #ff0000;} 无顺序
第二种：边框宽度的其它情况与padding和marign的一样。
原代码.div{border-width: 5px;border-style: solid;border-color: #FF0000;}
缩写后 .div{border-width;5px 5px;border-color:#FF0000;border-style:solid;}（注意：(上下左右)。
缩写后 .div{padding:10px 15px 20px;border-color:#FF0000;border-style:solid;} 注意顺序：(上)、(左右)、(下)。
3.background缩写方式。
原代码.div{background-color: #0000FF;background-image: url(http://www.ddhbb.com/blog/logo.gif);background-repeat: no-repeat;background-position: 10px 20px;}
缩写后 .div{background:#FF0000 url(http://www.ddhbb.com/blog/logo.gif) no-repeat 10px 20px;}
4.font缩写方式。
原代码.div{font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif; }
缩写后.div{font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;}(注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。)
5.list缩写方式。
原代码.div{list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); }
缩写后.div{list-style:square inside url(image.gif);}
6.color缩写方式。
16进制的色彩值，如果每两位的值相同，可以缩写一半。
原代码.div{color:#336699; }
缩写后.div{color:#369; }
原代码.div{color:333333; }
缩写后.div{color:333; }
原代码.div{color:000066; }
缩写后.div{color:006 ;}
7.还有一个（0单位）可直接缩写为0。例如：0px直接缩写为0
