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