HTML中的置换元素和非置换元素

我们都知道，行内元素不能够定义宽度和高度，但 img，input，button等标签作为行内元素却可以定义宽高，为什么呢？这就牵扯到了置换元素和非置换元素。

 

置换元素：

　　w3c官方解释：“An element that is outside the scope of the CSS formatter, such as an image,embedded document, or applet”

直译过来就是，不受 css 格式化范围控制的元素，css 渲染模型并不考虑对此内容的渲染。如 img、input、select、textarea、button、label 等被称为可置换元素。浏览器根据这些元素的标签和属性，来决定元素的具体显示内容。

　　

　　例如：浏览器根据 <img> 标签的 src 属性显示图片，而如果查看 (x)html 代码，则看不到图片的实际内容；<input>标签，根据type 属性决定是显示输入框还是按钮。

 

置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。

置换元素区别于一般的 inline 元素，他们本身拥有内在尺寸（宽度，高度，宽高比），也可以设置 width / height 属性，他们的性质同行内元素设置了 inline-block 一样。

 

非置换元素：

　　官网并未对非置换元素做出具体定义，可以认为除去置换元素都是非置换元素。

HTML中的大多数元素都是不可置换元素，例如<label>标签，<p>标签里的内容会被浏览器直接显示给用户。