＜img＞标签可设置宽高及可替换元素

---

前言

为什么img标签是行内元素，但是却可以设置它的宽高

1、< img >是可替换元素

<img>是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为 <img> 标签设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。

<img> 没有基线（baseline），这意味着，当在一个行内格式的上下文（an inline formatting context）中使用 vertical-align: baseline 时，图像的底部将会与容器的文字基线对齐。


例如：<img src=“xxx.jpg”>

我们并没有在img标签中写入任何内容，那它的内容从哪里来的呢？

是浏览器去下载src属性给到的图片，并用该图片资源替换掉img标签，而且浏览器在下载前并不知道图片的宽高。所以，可替换元素比较特殊，它的宽高是由其加载的内容决定的。该图片在页面中展现出来的话，就是图片本身本身的宽高。（当然CSS可以覆盖其样式，比如设置宽高）。

2、什么是可替换元素

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。内容不受CSS渲染控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素。

它们有内置尺寸和内置宽高，也可以设置width和height

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

举例： 例如浏览器会根据标签的src属性的值来读取图片信息并显示出来，图片的内容由src决定，CSS并不考虑对图片的内容进行渲染。

典型的可替换元素有：

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

有些元素仅在特定情况下被作为可替换元素处理，例如：

<option>
<audio>
<canvas>
<object>
<applet>
HTML 规范也说了 <input> 元素可替换，因为 “image” 类型的 <input> 元素就像<img>一样被替换。但是其他形式的控制元素，包括其他类型的 <input> 元素，被明确地列为非可替换元素（non-replaced elements）。该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。