可替换元素
定义:这种元素的展现效果不受css控制。
即css会影响可替换元素的位置,但不会影响到可替换元素自身的内容。
目前遇到的可替换:<img>、<input>
<img>、<input>属于行内替换元素
注意点:
1、由于这两个元素是替换元素,可以设置宽高
2、两个元素无法直接使用伪元素:before 和 :after
无法使用:before 和 :after伪元素的原因
:before 、:after伪元素是指在元素的内容前面和后面插入新内容
也就是说这个元素得是一个容器,很明显input和img没有独立的闭合标签,无法容纳别的标签作为自身的子元素
(题外话:伪元素的父元素就是这个元素,例如span:before的父元素就是span)
因此img、input无法使用:before 和 :after伪元素
解决办法:
可以在img、input外面套一个div标签,对div进行伪元素操作。