本文中名詞講解：
塊級元素：指段落、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>指的才是當前的情況。
複製程式碼