CSS缩写总结

https://github.com/y1xl/CSS-abbreviation

一、16进制的色彩值，若是每两位的值相同，能够缩写一半。如：

• color: #ffffff => color: #fff
• color: #aabbcc => color: #abc

二、边框语法糖

边框：

border: width style color; => border: (边宽) (样式) (颜色);

如：border: 1px solid #000;

无边框可直接写：border: none

border-top / -bottom / -left / -right 也是同样的

边框图片：

border-image: source slice / width / outset repeat; =>

border-image：（图片）（裁切区域）/（边框图片宽度）/（扩散）（拉伸或平铺）

如：border-image: url(button.png) 0 14 0 14 stretch;

三、背景语法糖

background: color image repeat attachment position; => backgroud: (颜色) (图片路径) (重复) (固定) (位置);

如：background: #fff url('image.png') no-repeat fixed center;

CSS3新写法：

background: color image repeat attachment position/size origin clip;

=> background:size(图片大小) origin(定位区域) clip(裁剪)

四、字体语法糖

缩写字体定义，至少要定义font-size和font-family两个值

font: style variant weight size/line-height family => font: (样式) (异体) (粗细) (大小)/(行高) (字体)

五、列表

list的属性缩写:

list-style-type:square;

list-style-position:inside;

list-style-image:url(image.png);

=> list-style: square inside url(image.png);

取消默认的圆点或序号能够直接写list-style:none;

六、flex 伸缩布局

flex-flow: direction wrap; => flex-flow: (排列方向) (换行方式);

flex: grow shrink basis; => flex: (项目的放大比例) (项目的缩小比例) (项目占据的主轴空间);

flex属性有两个快捷值：flex: auto; => flex:1 1 auto 和 flex: none; => flex: 0 0 auto