HTML+CSS35 可替换元素

一道面试题

在美团面试的时候遇到过这样一个小问题：

Q：你知道行内元素和块级元素有什么区别吗？

A：行内元素只会占据内部元素宽度的空间，而且不会以新的一行开始，不能设置宽度；块级元素会占满整个父容器，会新起一行，能够设置宽度；

Q：<img>是什么元素？

A: 行内元素

Q：那为何<img>能够设置宽度？

A：呃.....

答不出来了。实际上是一个很基础的问题，可是因为不少时候对基础，尤为是CSS/HTML方面的基础不甚在乎，稀里糊涂也能实现想要的效果，不求甚解，真的刨根问题的时候就傻眼了。

先给出答案：由于<img>虽然是行内元素，可是它们也都属于可替换元素。可替换元素通常有内在尺寸和宽高比，因此能够设置宽度和高度

可替换元素

从元素自己的特色来讲能够分为可替换元素和不可替换元素

HTML大多数元素都是不可替换元素，内容直接由DOM内容肯定，直接展示给用户，好比<p>123</p>，这就是一个不可替换元素，展现的内容就是DOM的文本节点123

与之不一样的就是可替换元素，具体显示的内容是由元素的标签和属性肯定的，好比<img>显示的内容其实是由src属性的值来读取图片的信息并展现的

典型的可替换元素：

• <iframe>
• <video>
• <embed>
• <img>

HTML规范规定了<input>元素可替换，由于<image>类型的<input>元素就像<img>同样可替换，可是其余类型的<input>被明确的列为非可替换元素（来源：MDN，可是实际上好比type为text的<input>也是能够设置宽度的，我认为能够将<input>也理解为条可替换元素，由于其展现形式也是与type属性的取值有关系的）

几乎全部的替换元素都是行内元素，替换元素有内在尺寸，因此能够设置width和height。若是不设置其宽度和高度时，就按照其内在尺寸显示。

控制可替换元素中的对象尺寸和位置

能够使用某些CSS属性来指定可替换元素中包含的内容对象，在该元素的和区域内的位置的位置和定义方式，好比：

object-fit用来指定可替换元素的内容对象在元素盒区域内的填充方式（相似于background-size），取值有contain、cover、fill、none、scale-down

img {
  border: 1px solid red;
  width: 200px;
  height: 100px;
  object-fit: fill; /* 默认值 */
}
复制代码

object-position用来指定可替换元素的内容对象在盒元素区域中的位置：

参考

• Q:为什么img、input等内联元素可设置宽高@掘金
• 可替换元素@MDN