簡介
根據 "外在盒子" 是內聯還是塊級我們可以把元素分為內聯元素和塊級元素，而根據是否具有可替換內容，我們也可以把元素分為替換元素和非替換元素。這種通過修改某個屬性值，例如 <img> 的 "src" 屬性，<input> 的 "type" 屬性，呈現的內容就可以被改變的元素稱為替換元素，例如：<img>,<input>,<textarea>,<select> 等等，除此之外，它還具有以下特性：
(1) 替換元素都是內聯元素
(2) <img> 這類替換元素的基線位於元素的下邊緣，而 "vertical-align" 的默認值是基線對齊，因此圖片下方會存在幾個像素的空隙；而 <input> 這類可輸入文本的替換元素的基線其實就是輸入的文本的基線，這一點和內聯塊級元素相似，如果 "display" 為 "inline-block" 的內聯塊級元素內部沒有文本，那么它的基線就是元素的下邊緣，如果有文本，那么它的基線就是內部文本的基線
(3) 替換元素的尺寸分為3類：固有尺寸、HTML 尺寸和 CSS 尺寸。固有尺寸指的是替換內容原本的尺寸；HTML 尺寸指的是在 HTML 屬性上設置的尺寸，它將覆蓋固有尺寸；CSS 尺寸即是在 CSS 樣式中設置的尺寸，它將覆蓋固有尺寸和 HTML 尺寸。
如果僅設置了寬度或僅設置了高度，則元素會按固有尺寸的寬高比例顯示；
內聯替換元素和塊級替換元素的尺寸使用上面同一套規則計算，也就是說，即使替換元素設置為 {display:block;}，它的寬度也不會撐滿父容器；
(4) 替換元素可以撐開行框，但是不影響行高。眾所周知，內聯元素的高度僅由行高 "line-height" 決定，垂直方向的 "margin","border" 和 "padding" 並不影響行框高度，但是替換元素的表現與 {display:inline-block;} 的內聯塊級元素更相似，也就是說替換元素垂直方向的 "margin","border" 和 "padding" 可以撐開行框；