你知道CSS中的替换元素吗？

前言

你知道CSS中的替换元素吗？你知道哪些元素是替换元素吗？

替换元素（replaced element）可以说是 CSS 中的另一个派系。 根据元素是否具有可替换内容，把元素分为替换元素和非替换元素。

那什么是替换元素呢？

替换元素

替换元素，顾名思义，就是内容可以替换的元素。

： 这不是废话吗？废话文学可让你整明白了。

哈哈，别急！我们先举一个栗子：

在图片 hover状态时，换成将图片进行替换：

  <img src="01.jpg" alt="" class="img"/>
  .img:hover{
        content: url("02.jpg");
    }

像这种通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。

因此， <img>、video、iframe或者表单元素textarea和input都是替换元素。

当然，还有一点有必要说明一下，content 属性改变的仅仅是视觉呈现，当我们以右键或其他形式保存这张图片的时候，所保存的还是原来 src 对应的图片。

替换元素的特点

作用在CSS 作用域之外，不受页面影响:

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

更改替换元素本身的外观，需要类似 appearance 属性，或者浏览器自 身暴露的一些样式接口。

例如::-ms-check{}可以更改高版本 IE 浏览器下单复选框的内间距、背景色等样式，但是直接 input[type=‘checkbox’]{}却无法更改。

有默认的尺寸:

很多替换元素在没有明确尺寸设定的情况下:

其默认的尺寸（不包括边框）是 300 像素×150 像素，如video、iframe或者canvas等;

图片替换元素为 0 像素;

表单元素的替换元素的尺寸则和浏览器有关;

有自己的表现形式:

例如： vertical-align 属性：vertical-align 的默认值的 baseline，基线之意，被定义为字符的 下边缘。

在西方语言体系，几乎无人不知，但是到了替换元素那里就不适用了。

因为替换元素的内容往往不可能含有字符，于是替换元素的基线就被硬生生定义成了元素的下边缘。

替换元素都是内联元素

替换元素和替换元素、替换元素和文字都是可以在一行显示的。

结语

本文到此结束，欢迎在评论区交流！