在segmentfault寫的筆記歸總能力太差了，以后寫筆記還是跑來簡書記錄一下算了。
we known：CSS有很多屬性簡寫（shorthand），比如：font text-decoration background border outline list-style overflow margin padding flex flex-flow transition transform animation等等（暫時想到這些）。
其中要注意的是font、background（以及background-position、background-clip和background-origin）、flex的缺省屬性值。
font
來看看font簡寫的可包括哪些分寫屬性：
[
font-style||font-variant||font-weight||font-stretch]?font-size[/line-height]?font-family
font-style=normal|italic|oblique
font-variant=normal|small-caps
font-weight=normal|bold|lighter|bolder
|100|200|300|400|500|600|700|800|900
font-stretch=ultra-condensed|extra-condensed|condensed|semi-condensed|normal
|semi-expanded|expanded|extra-expanded|ultra-expanded
Global values:inherit|initial|unset
line-height=normal|<number>|<length>|<percentage>
font簡寫還可以直接使用瀏覽器自帶的一些設(shè)置：caption、icon、menu、message-box、small-caption和status-bar。
1.其簡寫時，font-size和font-family是必填且順序不能顛倒過來。
以下代碼可以檢驗(yàn)：
#p2 {font: 12px/24px;}
#p3 {font: 12px/24px monospace;}
<p id="p1">Lorem ipsum dolor sit amet.</p>
<p id="p2">Lorem ipsum dolor sit amet.</p>
<p id="p3">Lorem ipsum dolor sit amet.</p>
var p1style = window.getComputedStyle(document.getElementById('p1'));
var p2style = window.getComputedStyle(document.getElementById('p2'));
var p3style = window.getComputedStyle(document.getElementById('p3'));
console.log(p1style.font);
console.log(p2style.font);
console.log(p3style.font);
console輸出證明一切：
normal normal normal normal 16px / normal Simsun
normal normal normal normal 16px / normal Simsun
normal normal normal normal 12px / 24px monospace
至于順序只要手動改下就知道了。
2.根據(jù)《CSS權(quán)威指南 第三版》P130：
在使用簡寫屬性font時，所有被忽略的值都會重置為默認(rèn)值。
所以才會有font: 1em monospace;會重置line-height的情況存在。
還是上面那段html代碼先把樣式設(shè)置改為：
p {line-height: 3em;}
#p1 {font: 1em monospace;}
console輸出：
normal normal normal normal 13px / normal monospace
normal normal normal normal 16px / 48px Simsun
本來瀏覽器會有line-height的默認(rèn)值，但是使用簡寫屬性后，這個屬性被重置為屬性的初始值（初始值比較妥當(dāng)，initial）
background
background比較麻煩的，各個分屬性的初始值都不一樣，沒有啥規(guī)律可言，而且還可以逗號分隔同時設(shè)置多個簡寫屬性。
先看看簡寫包含什么：
[
<bg-layer>]*<final-bg-layer>
<bg-layer>=background-image||background-position[/background-size]?
||background-repeat||background-attachment||background-origin||background-clip
<final-bg-layer>=<bg-layer>||background-color
background-image=none|url|gradient|element()
background-position= [ [top|bottom|left|right|center
|<percentage>|<length>]{1,2} ]#
background-size= [<length>|<percentage>|auto]{1,2} |cover|contain
background-repeat=repeat-x|repeat-y| [repeat|space|round|no-repeat]{1,2}
background-attachment=scroll|fixed|local
background-origin=border-box|padding-box|content-box
background-clip=border-box|padding-box|content-box
1.這里需要注意的是最下面一層<final-bg-layer>，是可以同時包含background-image和background-color的，而且無順序限制。<final-bg-layer>必須放在background屬性聲明的最右邊，否則整條規(guī)則都無效。
2.然后要注意的background-position，雖然初始值（initial）是0% 0%，也就是元素的左上角。但是設(shè)置一個屬性值時，第二個屬性值（也就是水平方向的屬性值）默認(rèn)為50%。這個屬性主要是在background-image屬性是一個url或者漸變圖像是體現(xiàn)出來。
3.background-clip初始值是border-box，主要體現(xiàn)為背景設(shè)置的可視內(nèi)容區(qū)域。
background-origin初始值是padding-box。跟background-position類似，在設(shè)置background-image為url或者漸變圖像時體現(xiàn)出來，表現(xiàn)為圖像從哪個位置開始繪制。實(shí)際上這個屬性是可以對應(yīng)background-position的：background-origin:padding-box就可以對應(yīng)到background-position: 0 0；background-origin:border-box;對應(yīng)background-position: -10px -10px;（如果設(shè)置border-width: 10px;且border-style不是none）；background-origin:content-box;對應(yīng)background-position: 10px 10px;（如果設(shè)置padding: 10px;）。
另外，在簡寫background中，background-origin和background-clip同時使用時，background-origin是排在左邊的，說明有順序要求，如：background:url('luoxiaohei.png') content-box padding-box;這時background-origin為content-box，background-clip為padding-box；
而如果設(shè)置一個值，則兩者都是這個值，如：background: url('luoxiaohei.png') border-box;這時background-origin和background-clip均為border-box。
4.background-size的初始值是auto，也就是自適應(yīng)對應(yīng)寬高。（這里用url加載的圖片做舉例）在水平和垂直方向都未設(shè)置時，即兩者都是auto，則背景圖的尺寸就是加載的圖片的實(shí)際尺寸；如果有一個設(shè)置長度或者百分比（也就是設(shè)置了寬度），另一個不設(shè)置（還是初始值auto），則圖片的高度也會隨著寬度等比縮放。
如果設(shè)置的是長度值（如以px為單位的），圖片的實(shí)際寬高就是長度值指定的；當(dāng)然如果只設(shè)置一個值，則第二個值為auto，即高度會根據(jù)第一個值（高度）的設(shè)置而等比縮放。
如果設(shè)置的是百分比，計(jì)算則要根據(jù)background-origin的設(shè)置來確定：
當(dāng)background-origin:content-box;時，background-size的百分比計(jì)算以內(nèi)容區(qū)的寬/高為基數(shù)；
當(dāng)background-origin:padding-box時，百分比計(jì)算以邊框的內(nèi)邊界以內(nèi)的區(qū)域（包括padding區(qū)和內(nèi)容區(qū)）的寬/高為基數(shù)；
當(dāng)background-origin:border-box;時，百分比計(jì)算以邊框的外邊界以內(nèi)的區(qū)域（包括border區(qū)、padding區(qū)好內(nèi)容區(qū)）的寬/高為基數(shù)。
測試代碼可以去我的Github找[1]
flex
flex作為CSS3新增的屬性，還一直在修改。目前要使用的話，要注意其簡寫屬性時的特殊情況。
flex-grow||flex-shrink||flex-basis
flex-grow初始值為0，表現(xiàn)為不拉伸；flex-shrink初始值為1，表現(xiàn)為按1份的比例收縮；flex-basis初始值為auto，表現(xiàn)為跟隨子項(xiàng)內(nèi)容寬/高。
flex作用在彈性項(xiàng)（flex item）上。這個簡寫屬性的特殊屬性值，對應(yīng)的分寫屬性值需要特別小心：
1.flex: initial;等價于flex: 0 1 auto;，也等價于flex: 0 auto;，全是分寫屬性的初始值；
2.flex: auto;等價于flex: 1 1 auto;。從屬性聲明可以看出其意思就是表示彈性項(xiàng)可以自有拉伸和收縮；
3.flex: none;等價于flex: 0 0 auto;。從屬性聲明可以看出其意思就是表示彈性項(xiàng)必能拉伸和收縮。
4.flex: 1;基本等價于flex: 1 0 0;。這個要特別小心了不是flex: 1 0 auto;。我做過檢驗(yàn)，可以去我的segmentfault查看[2]
補(bǔ)充
其他重要的簡寫屬性，以后遇到了再補(bǔ)充...
