css细节属性

font metrics

• baseline
• mean line
  

line-height

• 是两条baseline的间距
• inline-block 对齐的是inline-block内的最后一行字的baseline
• 图片对齐的是图片底部
• 通过vertical-align定义盒子的垂直对齐关系，属性值有baseline， top ，text-top ，middle ，text-bottom ，bottom
• <p><img src="" alt=""></p> 通过p获得一个font，浏览器根据font确立一个baseline,所以如果一个盒子里面放置图片，下边缘会出现空隙。解决方法可以改变vertical-align，可以改变为display：block，可以设置font-size：0

list style

• displey：list-item会生成Principle Block Box和Marker Box（小圆点盒子）
• list-style-position：inside/outside
• list-style-image设置图片

background

• background-repeat：round/repeat
• css sprites
• background-size:cover(图片填满容器，图片可能损失) / contain(不损失图片)

在线调整css样式，比如阴影，渐变等 http://www.cssmatic.com/box-shadow