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