content与替换元素

更新时间: 2024-03-18 08:52:34

# 什么是替换元素

替换元素，顾名思义，就是内容可以被替换。举个例子<img src="1.jpg">，如果把上面的1.jpg换成2.jpg,图片内容就被替换了

这种通过修改某个属性值呈现的内容就可以被替换的元素称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>都是典型的替换元素。

替换元素除了内容可替换这一特性以外，还有以下一些特征

用专业的话讲就是在样式表现在CSS作用域外

如何更改替换元素本身的外观？需要类似appearance属性，或者浏览器自身暴露的一些样式接口，例如::-ms-check{}可以更改更高版本IE浏览器下单复选框内的间距、背景色等样式，但是直接 input[type='checkbox']{}却无法更改内间距、背景色等样式。

在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸(不包括变量)是300px * 150px，也有0像素的，其实具体的尺寸要看浏览器，没有什么明显的规律

比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的

比方说vertical-align的默认值baseline，基线，被定义为字符x的下边缘。但是到了替换元素基线是元素的下边缘。

根据浏览器的不同，替换元素的display是inline、block和inline-block中的任意一个，其尺寸计算规则都是一样的。

张大佬个人将替换元素的尺寸从内而外分为3类：固有尺寸、HTML尺寸和CSS尺寸。

固有尺寸指的是替换内容原本的尺寸。

例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。这个宽度和高度的大小就是这里的“固有尺寸”，对于表单类替换元素，“固有尺寸”可以理解为“不加修饰的默认尺寸”

这个概念略微抽象，HTML尺寸只能通过HTML原生属性改变，这些HTML原生属性包括<img>的width和height属性，<input>的size属性，<textare>的cols和rows属性等。

<img width="200" height="100">
<input type="file" size="30">
<textarea cols="20" rows="5"></textarea>

1
2
3

CSS尺寸特指可以通过CSS的 width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的content box。

注意

我们是无法改变这个替换元素内容的固有尺寸的，比如,图片的固有尺寸不会变的！

content属性生成的内容就是替换元素。因此content属性生成的内容和普通元素内容有很多不一样的地方：

content生成的文本是无法选中、无法复制的，同时，content生成的文本信息无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是的把重要的文本信息使用content属性生成
不能左右:empty伪类
:empty是一个CSS选择器，当元素里面没有内容的时候进行匹配。例如：
```
<div>有内容</div>
<div></div>
```
1
2
```
div {
    padding: 10px;
    border: 10px solid #cd0000;
}
div:empty {
    border-style: dashed;
}
```
1
2
3
4
5
6
7
前面一个div是实线边框，而后面的因为里面没有内容，就是虚线边框，接下来，我们使用content属性给div生成一些文字：
```
div:after {
    content:"伪元素生成内容"
}
```
1
2
3
有内容