在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简写还可以直接使用浏览器自带的一些设置：caption、icon、menu、message-box、small-caption和status-bar。
1.其简写时，font-size和font-family是必填且顺序不能颠倒过来。
以下代码可以检验：
#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.根据《CSS权威指南 第三版》P130：
在使用简写属性font时，所有被忽略的值都会重置为默认值。
所以才会有font: 1em monospace;会重置line-height的情况存在。
还是上面那段html代码先把样式设置改为：
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的默认值，但是使用简写属性后，这个属性被重置为属性的初始值（初始值比较妥当，initial）
background
background比较麻烦的，各个分属性的初始值都不一样，没有啥规律可言，而且还可以逗号分隔同时设置多个简写属性。
先看看简写包含什么：
[
<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属性声明的最右边，否则整条规则都无效。
2.然后要注意的background-position，虽然初始值（initial）是0% 0%，也就是元素的左上角。但是设置一个属性值时，第二个属性值（也就是水平方向的属性值）默认为50%。这个属性主要是在background-image属性是一个url或者渐变图像是体现出来。
3.background-clip初始值是border-box，主要体现为背景设置的可视内容区域。
background-origin初始值是padding-box。跟background-position类似，在设置background-image为url或者渐变图像时体现出来，表现为图像从哪个位置开始绘制。实际上这个属性是可以对应background-position的：background-origin:padding-box就可以对应到background-position: 0 0；background-origin:border-box;对应background-position: -10px -10px;（如果设置border-width: 10px;且border-style不是none）；background-origin:content-box;对应background-position: 10px 10px;（如果设置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；
而如果设置一个值，则两者都是这个值，如：background: url('luoxiaohei.png') border-box;这时background-origin和background-clip均为border-box。
4.background-size的初始值是auto，也就是自适应对应宽高。（这里用url加载的图片做举例）在水平和垂直方向都未设置时，即两者都是auto，则背景图的尺寸就是加载的图片的实际尺寸；如果有一个设置长度或者百分比（也就是设置了宽度），另一个不设置（还是初始值auto），则图片的高度也会随着宽度等比缩放。
如果设置的是长度值（如以px为单位的），图片的实际宽高就是长度值指定的；当然如果只设置一个值，则第二个值为auto，即高度会根据第一个值（高度）的设置而等比缩放。
如果设置的是百分比，计算则要根据background-origin的设置来确定：
当background-origin:content-box;时，background-size的百分比计算以内容区的宽/高为基数；
当background-origin:padding-box时，百分比计算以边框的内边界以内的区域（包括padding区和内容区）的宽/高为基数；
当background-origin:border-box;时，百分比计算以边框的外边界以内的区域（包括border区、padding区好内容区）的宽/高为基数。
测试代码可以去我的Github找[1]
flex
flex作为CSS3新增的属性，还一直在修改。目前要使用的话，要注意其简写属性时的特殊情况。
flex-grow||flex-shrink||flex-basis
flex-grow初始值为0，表现为不拉伸；flex-shrink初始值为1，表现为按1份的比例收缩；flex-basis初始值为auto，表现为跟随子项内容宽/高。
flex作用在弹性项（flex item）上。这个简写属性的特殊属性值，对应的分写属性值需要特别小心：
1.flex: initial;等价于flex: 0 1 auto;，也等价于flex: 0 auto;，全是分写属性的初始值；
2.flex: auto;等价于flex: 1 1 auto;。从属性声明可以看出其意思就是表示弹性项可以自有拉伸和收缩；
3.flex: none;等价于flex: 0 0 auto;。从属性声明可以看出其意思就是表示弹性项必能拉伸和收缩。
4.flex: 1;基本等价于flex: 1 0 0;。这个要特别小心了不是flex: 1 0 auto;。我做过检验，可以去我的segmentfault查看[2]
补充
其他重要的简写属性，以后遇到了再补充...
网友评论