选择器（1）
- 选择器里面的属性，值，其实分号;可以不写的
- CSS选择器的解析顺序：从右往左解析，参考文章：
为什么CSS选择器是从右往左解析，归根结底是性能问题，例子看这里为什么从右向左的规则要比从左向右的高效？
假如 DOM 的结构如上图，匹配规则是 .mod-nav h3 span。
若从左向右的匹配，过程是：从 .mod-nav 开始，遍历子节点 header 和子节点 div，然后各自向子节点遍历。在右侧 div 的分支中，最后遍历到叶子节点 a ，发现不符合规则，需要回溯到 ul 节点，再遍历下一个 li-a，假如有 1000 个 li，则这 1000 次的遍历与回溯会损失很多性能。
再看看从右至左的匹配：先找到所有的最右节点 span，对于每一个 span，向上寻找节点 h3，由 h3再向上寻找 class=”mod-nav” 的节点，最后找到根元素 html 则结束这个分支的遍历。
伪元素与伪类
非布局样式（字体和字体族）
非布局样式（行高）
有n个inline box元素，每一个的行高都不一样，最大为30px，弄清楚几个概念，
inline box 组成line box，就是n个span组成line box（一行的元素，div），line box的高度由inline box决定（inline box最高为30px），所以如图所示，div为30px高度，line-height会撑起来inline box的高度，但不会影响它布局的高度，只是影响他占据空间的高度，所以div是30px高，而最大行高的span的行高并没有30px！~~
行高怎么来的？由linebox（div）来的，linebox由inline box(span)来的，所以inline box决定行高
- 背景颜色是根据字体大小来渲染的，和行高没有关系
如果把font-size设大，背景颜色-蓝也会边长
- 行高大于字体大小，那么文字居中，字体大小决定背景颜色的高度长度和行高没关系
一道面试题：
- 图片下面有空隙，为什么？因为图片是inline元素，那么在一行上有顶线，中线，基线，底线，默认inline box对齐方式默认的vertical-align是baseline的基线，不是底线bottom，
而基线到底线有距离，所以有空隙从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
顶线、中线、基线、底线
所以面试题解决空隙的方案是：vertical-align：底线bottom