2017-04-05 22:32:20 div css布局中CSS代码优化简写方法，常见几种需要简写优化的CSS样式。
css代码简写——CSS代码优化
CSS代码简写代码优化目的让代码化繁为简，便于日后维护、便于开发、节约代码等目的。
css 代码简写 CSS代码优化
达到同样的CSS样式效果，一个是比较复杂的CSS代码，一个是简单简化的CSS代码，HTML8推荐以简化代码为主。
常见可以简写CSS属性样式代码：
1、背景简写
background教程：//www.yfnd.net/css/1119.shtml
背景颜色简写
background-color:#F00
背景颜色去掉-color
background:#F00
背景图片设置简写
background-image:url(背景图片地址);background-repeat:no-repeat;background-position:10px 20px
简写：
background:url(背景图片地址) no-repeat 10px 20px
2、padding的简写：
padding教程：//www.yfnd.net/css/984.shtml
padding简写
padding-bottom:5px; padding-top:5px; padding-left:5px; padding-right:5px
相同值padding简写为
padding:5px
padding简写
padding-top:5px; padding-right:6px ;padding-bottom:7px;padding-left:8px;
简写为
padding:5px 6px 7px 8px
padding简写
padding-bottom:5px;padding-top:5px;padding-left:10px;padding-right:10px;
简写为
padding:5px 10px;
padding简写
padding-top:5px;padding-left:10px;padding-right:10px;padding-bottom:15px;
简写为
padding:5px 10px 15px;
3、margin的简写
margin教程：//www.yfnd.net/css/1006.shtml
margin-bottom:5px; margin-top:5px; margin-left:5px; margin-right:5px
相同值margin简写
margin:5px
margin简写
margin-top:5px; margin-right:6px ;margin-bottom:7px;margin-left:8px;
简写为
margin:5px 6px 7px 8px
margin简写
margin-bottom:5px;margin-top:5px;margin-left:10px;margin-right:10px;
简写为
margin:5px 10px;
margin简写
margin-top:5px;margin-left:10px;margin-right:10px;margin-bottom:15px;
简写为
margin:5px 10px 15px;
4、border边框缩写
border边框教程//www.yfnd.net/css/912.shtml
border-color:#000; border-style:solid; border-width:1px
简写为：
border:#000 solid 1px
border-left简写
border-left-color:#000; border-left-style:solid; border-left-width:1px
简写为：
border-left:#000 solid 1px
border-right简写：
border-right-color:#000; border-right-style:solid; border-right-width:1px
简写为：
border-right:#000 solid 1px
border-top简写：
border-top-color:#000; border-top-style:solid; border-top-width:1px
简写为：
border-top:#000 solid 1px
border-bottom简写：
border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px
简写为：
border-bottom:#000 solid 1px
以上常用需要注意直接使用简写CSS属性的样式。