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的对齐方式