替换元素与非替换元素

布满荆棘的人生 2022-04-21 15:02 196阅读 0赞

# 替换元素与非替换元素 #

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

![Image 1][]

image.png

![Image 1][]

image.png

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

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

![Image 1][]

image.png

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

![Image 1][]

image.png

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

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

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

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

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

[Image 1]: 
[img]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
[object]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object
[video]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
[textarea]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/textarea
[input]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
[audio]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
[canvas]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/canvas
[content]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/content
[vertical-align]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align