CSS中的line-height是一个很复杂的知识点，因为涉及到了字体设计的相关理论。很多人瞧不起页面仔，但是如果真的想要切出跟设计图一摸一样的网站，拥有一双像素眼，那还是很有难度的。最近复习CSS布局理论和line-height相关知识的时候再一次体会到了这一点。而且意识到了自己之前布局bug比较多可能是因为自己比较喜欢把宽高写死。

1.div高度(块级元素高度)由其内部文档流元素的高度总和决定（文档流就是文档内元素的流动方向）；
内联元素从左往右流动，如果流动遇到阻碍，换行；
如果是块级元素，每一块占一行，从上往下流动。
如果span元素在流动时被截断（其本身带有border属性），元素会被截成两行，但是border不会；长单词不会换行（除非添加CSS属性word-break: break-all）这一个我体会非常深刻，之前的日志中提到过曾经被困扰很久就是因为长单词默认不会换行。

2.文字的居中不是让文字的中线居中，而是基线居中；为了美观目的，字体都会有一个默认的建议行高，根据字体和字的大小改变。

3.font-size实际上规定的是文字中最高一点到最低一点的距离；

4.脱离文档流的元素不再影响父元素的高度；

5.当position：fixed时，块级元素的宽度会往内缩；

6.尽量少使用width和height将宽高写死，多使用max-width，max-height；

7.span不接受设置宽高；

8.line-height可能在不同机器上显示不同，最好固定（声明）一下；

9.如果svg在a中上下边距不一样，使用vertical-align：top实现垂直居中；

10.display-inline的元素不接受margin-top／margin-bottom的设置；