本文中名词讲解：

块级元素：指段落、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中是包含行内元素的的，指的才是当前的情况。

   复制代码