css: 替换元素和非替换元素

根据 "外在盒子" 是内联还是块级我们可以把元素分为内联元素和块级元素，而根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素。

替换元素

用作为其他元素占位符的元素， 就是 替换元素 。

替换元素都是通过修改某个属性值，例如 <img> 的 "src" 属性，<input> 的 "type" 属性，呈现的内容就可以被改变，例如：<img>、<input>、<textarea>、<select>、<object> 等等，除此之外，它还具有以下特性：

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

非替换元素

如果元素的内容包含在文档中，则称之为非替换元素。

html中大多数都是非替换元素，浏览器直接显示标签元素的内容, 比如：<p>paper</p>。

行内非替换元素

width和height在行内非替换元素中无效。行内非替换元素框的宽度是它的内容渲染后（在任何子元素相对偏移之前）的宽度，它的高则是基于字体。

<a>、<span>是行内非替换元素

但是浮动后的行内非替换元素(会变成块级元素)可以使用width和height。