CSS知识点――可替换元素vs不可替换元素_html/css_WEB-ITnose

替换元素：

其中有类特殊的元素：如img，input，select，textarea，button，label等，他们被称为可替换元素（Replaced element）。他们区别一般inline元素（相对而言，称non-replaced element）是：这些元素拥有内在尺寸(intrinsic dimensions),他们可以设置width/height属性，且他们中间没有实质性的内容，也即在代码中不会直接显示（文本内容）。替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。替换元素可增加行框高度，但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。要想替换元素居中，可以设置line-height = height， vertral-align = middle。
（vertical-align:middle,是将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。）他们的性质同设置了display:inline-block的元素一致。意思就是这些所谓的可替换元素即内联块。

或许有朋友对非置换元素（non-replaced element）有点疑惑，稍微帮助大家理解一下。非置换元素，W3C 中没有给出明确的定义，但我们从字面可以理解到，非置换元素对应着置换元素（replaced element），也就是说我们搞懂了置换元素的含义，就懂了非置换元素。置换元素，W3C中给出了定义：

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”

从定义中我们可以理解到，置换元素（replaced element）主要是指 img, input, textarea, select, object 等这类默认就有 CSS 格式化外表范围的元素。进而可知，非置换元素（non-replaced element）就是除了 img, input, textarea, select, object 等置换元素以外的元素。

替换元素：替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如： type="text" 的是，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样。(X)HTML中的、、、<select>、<object>都是替换元素，这些元素都没有实际的内容。<br><br>替换元素可增加行框高度，但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。<br>要想替换元素居中，可以设置line-height = height， vertral-align = middle。<br>（vertical-align:middle,是将元素行内框的垂直中点与父元素基线上0.5ex处的一点对齐。）<br><br><strong>非替换元素：</strong>(X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。<br>比如<p>p的内容</p>、<label>label的内容</label>；浏览器将把这段内容直接显示出来。<br><br>非替换元素添加padding-top或padding-bottom，不影响行框高度，但内容区高度会变化，margin-top，margin-bottom对行框没有任何影响。添加左右边距会影响非替换元素水平位置。要使非替换元素在父元素框内居中，可以设定line-height = 父元素框的高度。</object></select>