在segmentfault寫(xiě)的筆記歸總能力太差了，以后寫(xiě)筆記還是跑來(lái)簡(jiǎn)書(shū)記錄一下算了。
we known：CSS有很多屬性簡(jiǎn)寫(xiě)（shorthand），比如：font text-decoration background border outline list-style overflow margin padding flex flex-flow transition transform animation等等（暫時(shí)想到這些）。
其中要注意的是font、background（以及background-position、background-clip和background-origin）、flex的缺省屬性值。
font
來(lái)看看font簡(jiǎn)寫(xiě)的可包括哪些分寫(xiě)屬性：
[
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簡(jiǎn)寫(xiě)還可以直接使用瀏覽器自帶的一些設(shè)置：caption、icon、menu、message-box、small-caption和status-bar。
1.其簡(jiǎn)寫(xiě)時(shí)，font-size和font-family是必填且順序不能顛倒過(guò)來(lái)。
以下代碼可以檢驗(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
至于順序只要手動(dòng)改下就知道了。
2.根據(jù)《CSS權(quán)威指南 第三版》P130：
在使用簡(jiǎn)寫(xiě)屬性font時(shí)，所有被忽略的值都會(huì)重置為默認(rèn)值。
所以才會(huì)有font: 1em monospace;會(huì)重置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
本來(lái)瀏覽器會(huì)有line-height的默認(rèn)值，但是使用簡(jiǎn)寫(xiě)屬性后，這個(gè)屬性被重置為屬性的初始值（初始值比較妥當(dāng)，initial）
background
background比較麻煩的，各個(gè)分屬性的初始值都不一樣，沒(méi)有啥規(guī)律可言，而且還可以逗號(hào)分隔同時(shí)設(shè)置多個(gè)簡(jiǎn)寫(xiě)屬性。
先看看簡(jiǎn)寫(xiě)包含什么：
[
<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>，是可以同時(shí)包含background-image和background-color的，而且無(wú)順序限制。<final-bg-layer>必須放在background屬性聲明的最右邊，否則整條規(guī)則都無(wú)效。
2.然后要注意的background-position，雖然初始值（initial）是0% 0%，也就是元素的左上角。但是設(shè)置一個(gè)屬性值時(shí)，第二個(gè)屬性值（也就是水平方向的屬性值）默認(rèn)為50%。這個(gè)屬性主要是在background-image屬性是一個(gè)url或者漸變圖像是體現(xiàn)出來(lái)。
3.background-clip初始值是border-box，主要體現(xiàn)為背景設(shè)置的可視內(nèi)容區(qū)域。
background-origin初始值是padding-box。跟background-position類(lèi)似，在設(shè)置background-image為url或者漸變圖像時(shí)體現(xiàn)出來(lái)，表現(xiàn)為圖像從哪個(gè)位置開(kāi)始繪制。實(shí)際上這個(gè)屬性是可以對(duì)應(yīng)background-position的：background-origin:padding-box就可以對(duì)應(yīng)到background-position: 0 0；background-origin:border-box;對(duì)應(yīng)background-position: -10px -10px;（如果設(shè)置border-width: 10px;且border-style不是none）；background-origin:content-box;對(duì)應(yīng)background-position: 10px 10px;（如果設(shè)置padding: 10px;）。
另外，在簡(jiǎn)寫(xiě)background中，background-origin和background-clip同時(shí)使用時(shí)，background-origin是排在左邊的，說(shuō)明有順序要求，如：background:url('luoxiaohei.png') content-box padding-box;這時(shí)background-origin為content-box，background-clip為padding-box；
而如果設(shè)置一個(gè)值，則兩者都是這個(gè)值，如：background: url('luoxiaohei.png') border-box;這時(shí)background-origin和background-clip均為border-box。
4.background-size的初始值是auto，也就是自適應(yīng)對(duì)應(yīng)寬高。（這里用url加載的圖片做舉例）在水平和垂直方向都未設(shè)置時(shí)，即兩者都是auto，則背景圖的尺寸就是加載的圖片的實(shí)際尺寸；如果有一個(gè)設(shè)置長(zhǎng)度或者百分比（也就是設(shè)置了寬度），另一個(gè)不設(shè)置（還是初始值auto），則圖片的高度也會(huì)隨著寬度等比縮放。
如果設(shè)置的是長(zhǎng)度值（如以px為單位的），圖片的實(shí)際寬高就是長(zhǎng)度值指定的；當(dāng)然如果只設(shè)置一個(gè)值，則第二個(gè)值為auto，即高度會(huì)根據(jù)第一個(gè)值（高度）的設(shè)置而等比縮放。
如果設(shè)置的是百分比，計(jì)算則要根據(jù)background-origin的設(shè)置來(lái)確定：
當(dāng)background-origin:content-box;時(shí)，background-size的百分比計(jì)算以?xún)?nèi)容區(qū)的寬/高為基數(shù)；
當(dāng)background-origin:padding-box時(shí)，百分比計(jì)算以邊框的內(nèi)邊界以?xún)?nèi)的區(qū)域（包括padding區(qū)和內(nèi)容區(qū)）的寬/高為基數(shù)；
當(dāng)background-origin:border-box;時(shí)，百分比計(jì)算以邊框的外邊界以?xún)?nèi)的區(qū)域（包括border區(qū)、padding區(qū)好內(nèi)容區(qū)）的寬/高為基數(shù)。
測(cè)試代碼可以去我的Github找[1]
flex
flex作為CSS3新增的屬性，還一直在修改。目前要使用的話，要注意其簡(jiǎn)寫(xiě)屬性時(shí)的特殊情況。
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）上。這個(gè)簡(jiǎn)寫(xiě)屬性的特殊屬性值，對(duì)應(yīng)的分寫(xiě)屬性值需要特別小心：
1.flex: initial;等價(jià)于flex: 0 1 auto;，也等價(jià)于flex: 0 auto;，全是分寫(xiě)屬性的初始值；
2.flex: auto;等價(jià)于flex: 1 1 auto;。從屬性聲明可以看出其意思就是表示彈性項(xiàng)可以自有拉伸和收縮；
3.flex: none;等價(jià)于flex: 0 0 auto;。從屬性聲明可以看出其意思就是表示彈性項(xiàng)必能拉伸和收縮。
4.flex: 1;基本等價(jià)于flex: 1 0 0;。這個(gè)要特別小心了不是flex: 1 0 auto;。我做過(guò)檢驗(yàn)，可以去我的segmentfault查看[2]
補(bǔ)充
其他重要的簡(jiǎn)寫(xiě)屬性，以后遇到了再補(bǔ)充...
