前言
你知道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,基线之意,被定义为字符的 下边缘。
在西方语言体系,几乎无人不知,但是到了替换元素那里就不适用了。
因为替换元素的内容往往不可能含有字符,于是替换元素的基线就被硬生生定义成了元素的下边缘。
替换元素都是内联元素
替换元素和替换元素、替换元素和文字都是可以在一行显示的。
结语
本文到此结束,欢迎在评论区交流!