css知识略写
1.在使用div+css布局时，尽量避免指定元素的宽度和高度，这种砌砖头的写法这会带来许多不确定的影响，增加调试麻烦，
2.div高度是由其内部文档流元素高度综合决定的（核心）；文档流：文档内元素的流动的方向；
3.注意理解定位相关方面的知识，尤其是position:relative,position:absolute,position:fixed,在日常布局中经常使用，
4.对于内联元素需要设置width,height,padding，margin时，可以使用display：inline-block;block,（基础）
5.理解伪元素和伪类的区别，伪元素：直意为伪造的元素，为了达到某种效果，增加一个元素， 然后再添加样式，例:
p:first-letter {color: red}I love Web.复制代码 I love Web
//伪元素：frist-letter添加样式到第一个字母
如果不是用伪元素的话，就得按照下面的方法做：
.first-letter {color: red}I love Web.
复制代码 //给首字母添加一个span元素，然后给 span 增加样式。 伪类：本质上是一个类选择器，为了达到在特定状态下呈现样式，可以使用伪类诸如：a:hover;a:visited…… 例:
p>i:first-child {color: red}firstsecond
复制代码 first
second//伪类 :first-child 添加样式到第一个子元素 如果我们不使用伪类，而希望达到上述效果，可以这样做：
.first-child {color: red}firstsecond
复制代码 即我们给第一个子元素添加一个类，然后定义这个类的样式。
所以两者的区别就是：
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。复制代码
6.了解css float相关知识，布局时经常使用，
7.line-height可以控制元素的高度，一些情况下可以不用写height
8.vertical-align在内联元素居中对齐方面发挥重要作用，详细了解相关知识
9.字体不同，字体的高度也不同，内联元素的默认行高受到浏览器的影响也不尽相同，
10.两种盒模型，content-box和border-box，border-box目前在布局上越来越成为趋势了。
11.幽灵空白节点一词出自张鑫旭的博客，原文应为“strut”,译为“支柱”，个人认为这个解释还是很通俗易懂的，
张鑫旭老师说，只要有“内联盒子”在，就一定会有“行框盒子”，而每个“行框盒子”前面都有一个“幽灵空白节点”，这 个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样， 但又确确实实地存在，表现如同文本节点一样，同时具有该元素的字体和行高属性的0 宽度的内联盒。
(注意，这里有一个前提，文档声明必须是HTML5 文档声明（HTML 代码如下），如果还是 很多年前的老声明，则不存在“幽灵空白节点”。)
那为什么下面这样span为高度为0,没有触发幽灵空白节点？空的span不算内联盒子吗？ 以下原文来自思否@xqxian，谢谢这位的解释，让我茅塞顿开/。
Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.
意思就是如果一个line box里没有文字、保留的空格、非0的margin或padding或border的inline元素、或其他in-flow内容（比如图片、inline-block或inline-table元素），且不以保留的换行符结束的话，就会被视作高度为0的line box。
问题里的<div><span></span></div>就刚好符合这种特殊情况，设置成inline-block就不符合了。题主也可以试着把display改成inline-table，或者设置非0的margin、padding、border等，总之只要不满足上述任一种情况，那么就会受“幽灵空白像素”（官方说法应该叫"strut"元素）的影响从而出现行高.