CSS基礎：替換元素和非替換元素

簡介

　　根據 "外在盒子" 是內聯仍是塊級咱們能夠把元素分爲內聯元素和塊級元素，而根據是否具備可替換內容，咱們也能夠把元素分爲替換元素和非替換元素。這種經過修改某個屬性值，例如 <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" 能夠撐開行框；