本文中名词讲解：
块级元素：指段落、div之类的元素。
行内元素：指span之类的元素。
替换元素：只是作为其他内容的占位符的一个元素。例如img元素，它只是指向一个图像文件，这个文件将插入到文档流中该image元素本身所在的位置。input元素也是替换元素。
正常流：这是html文档的文本布局。
非正常流：浮动或者进行定位。
众所周知当前元素分为块级元素，行内元素接下来我们就分几种情况讨论元素的高度。
一.行内元素的高度
1.如果行内元素为非替换元素
1.1) 从父元素或者祖先元素继承了line-height属性
根据计算得到高度，
注意：浏览器有一个默认line-heigt, 高度不包含padding和marign
1.2 )没有继承属性line-height属性
由内容的高度决定。
2.如果元素为替换元素
高度不受继承的line-height属性影响，高度计算包含padding和marign。
二. 块级元素高度。
1. 决定性属性--height决定块级元素高度，不论块级元素处于正常流或者非正常流中。
关于height的用法。（如果为百分比时与父元素有关）
2. 如果块级中不包含height属性，由块级元素是否包含行内元素决定
2.1）当前块级元素所形成的包含块中包含行内元素（即存在行内元素且行内元素在正常流中或者position为relative）
如果块级元素具有line-height属性或者从祖先元素继承line-height属性，会影响到行内非替换元素的高度。块级元素的高度=max(块级元素line-heigh属性计算出的值决定，行内元素的行框高度决定）。
注意：本文中所指的行框是假设单行文本下的行框，行框针对的是单行文本，如果为多行文本每一行都有一个行框，高度为第一个行框的上边界和最后一行行框的下边界之间的距离。（行框概念可自行百度，涉及到比较多的其他概念）
2.2）当块级元素处于正常流中并且当前块级元素不包含行内元素（不包含行内元素指即不包含行内元素或者行内元素position属性值为absolute或fixed）
块级元素的高度为0。(line-height是针对行内元素（更细致的讲应该是行内非替换元素）有影响，并不直接对块级元素高度产生影响。) 注意：当<div>123</div>，当前代码其实是<div><span>123</span></div>,所以div中是包含行内元素的的，<div></div>指的才是当前的情况。
复制代码