html 置换元素和非置换元素

什么是行内元素？什么是块级元素？

一般我们都会答：行内元素不能设置宽高，不会新起一行，行内元素只能包含数据或者行内元素，不能设置上下margin等等。块级元素当然，能够新起一行，能够设置宽高，margin，并且可以包含块级元素，行内元素和数据。

好的，没问题，那么再问：

img是行内元素吗？马上回答，是的。
那么img能够设置宽高吗？有点基础的都会说可以吧，但是等等，上面说过什么了，行内元素不是不能设置宽高吗？？？
所以选择闭嘴了…

其实这里就牵扯到置换元素和非置换元素。

置换元素官方w3c解释：

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

其实这里就牵扯到置换元素和非置换元素。翻译过来就是说，一个元素，默认有css格式化外表范围的元素。其实是拥有内在尺寸，这些元素性质同行内元素设置了inline-block一样。

置换元素有： img select input textarea label button

非置换元素呢，当然不是置换元素就是非置换元素了…

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

Reference

1. https://blog.csdn.net/viewyu12345/article/details/79666745
2. http://blog.sina.com.cn/s/blog_4c81e6230101e29u.html