替换元素与非替换元素

替换元素与非替换元素

• 行内元素：
  １．设置宽高无效
  ２．设置margin，左右有效，上下无效；设置padding，上下左右都有效，即会撑大空间
  ３．不能自动换行
  如：<span>

image.png

image.png

• 块级元素：
  １．能够设置宽高
  ２．margin，paddin上下左右都有效
  ３．可以自动换行
  ４．多个块级元素，从上到下排列

但是问题来了～
<img>是行内元素，为什么它可以设置宽高？

image.png

我们很明显发现第二幅图的宽高被设置了，到底是怎么回事～

image.png

这里，<img>实际上就是所谓的替换元素
替换元素在MDN上的解释：CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。

CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。

需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。

由于我的CSS水平感人，不太能理解所有的意思，参考了一些博客，就在我所学习到的知识范围内做了一个理解：可替换元素所显示的内容，需要浏览器根据元素的属性去判断。
比如<img>元素，本身并没有什么内容，内容是有属性src决定的；又如<video>是同样的道理；又如<input>，其内容是由type属性确定。

所以，我们刚才的<img>，由于虽然是行内元素，但是也是替换元素，宽高由属性src的内容决定。而<span>作为行内元素，为非替换元素，它是什么，就显示什么，有行内非替换元素的特征。