CSS基础1

1.浏览器解析选择器的顺序：右→左，这样有利于高效的定位元素

2.伪元素选择器（::before和::after)不会出现在dom、html中，但可以显示内容和样式

3.选择器权重

id：100         class、伪类（:hover等）：10          元素、伪元素：1             其他：0

（注：权重高一级压死人，一个id的优先级永远比多个class组合高）

4.字体

（1）字体族：serif（衬线字体：宋体）；sans-serif（非衬线字体）；monospace（等宽字体）；cursive（手写体）；fantasy（花体）

（2）多字体机制（fallback）：可以适配多种平台，排在前面的字体优先级高，优先使用，若不存在，则往后找

（3）iconfont：自定义字体

5.行高的构成

行高是由lineBox决定的，lineBox是由inlineBox（最大的inlineBox）决定的，inlineBox的高度会决定行高

（注：利用line-height可以实现垂直居中，且自适应字体大小）

6.行内元素的背景是根据字体来渲染的，由字体排版的顶线和底部决定，改变字体大小，背景大小也会改变

7.图片3px间隙问题

vertical-align默认是按照字体的基线来对齐的，这样就会造成文字和img放在一起时，若有背景，则会出现几个px的间隙。解决方法是：设置vertical-align对齐方式为——vertical-align：bottom（按底线对齐）

8.vertical-align：xxxpx 是基于字体基线上移或下移xxxpx的对齐方式