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" 可以撑开行框；