CSS縮寫總結

1、16進位制的色彩值，如果每兩位的值相同，可以縮寫一半。如：

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

2、邊框語法糖

邊框：

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;

3、背景語法糖

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(裁剪)

4、字型語法糖

縮寫字型定義，至少要定義font-size和font-family兩個值

font: style variant weight size/line-height family => font: (樣式) (異體) (粗細) (大小)/(行高) (字型)

5、列表

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;

6、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