替换元素
内容可以被替换的元素
img iframe video select input button textarea 元素
特性
- 有自己的尺寸
- 替换元素的基线是元素的下边框，和一个inline block 元素中要是没有内容，那么其基线也是下边框的特性相同，应该就是为了防止替换元素有内容和没内容，如果基线不固定，那么后续的line box就可以会出现出现渲染的
- 不支持:：before 和 ::after 伪元素
对应display的值
注意：img标签在没有src属性的时候在表现的就是一个内联元素，无法设置宽高
计算规则
img的display的默认值为inline，但是我们却可以对其改变高度和宽度，的原因就是对于替换元素而言，他们有一套他们自己的计算大小的规则
影响力关系：CSS尺寸 > HTML尺寸> 自身尺寸
CSS尺寸：通过css的（max-/min-）width或者（max-/min-）height定义的尺寸
HTML尺寸：写在html标签上的widht，height
自身尺寸：自己的默认大小，比如一个img的原始图片
因此我们可以吧替换元素想象为一个鸡蛋是由鸡蛋壳（css尺寸）和鸡蛋膜（HTML尺寸），以及鸡蛋清（自身尺寸）
填充方式
object-fil
由于我们知道我们设置的css尺寸只是改变CSS尺寸大小，而不是改变自身尺寸，所以在CSS3以前，当CSS尺寸或者HTML尺寸大于自身尺寸的时候，content box会以object-fit：fill，填充的方式进行渲染内容
移动位置
object-position
当CSS尺寸大于自身尺寸，那么自身的位置摆放，可以通过object-position来设置
具体区别
1. 替换元素和非替换元素只差一个src属性
例如img标签当没有src属性的时候就是一个和span标签类似的普通内联元素
当img标签没src属性的时候还是可以使用::before/::aftet属性，当有了就无法使用
应用：
img {
position: relative;
display: block;
width: 300px;
height: 300px;
border: 1px solid red;
}
img::after {
/* 黑色alt信息条 */
content: attr(alt);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 30px;
background-color: rgba(0, 0, 0, .5);
color: white;
font-size: 14px;
/* Y轴方向平移 */
transform: translateY(100%);
/* 来点过渡动画效果 */
transition: transform .2s;
visibility: visible;
}
img:hover::after {
transform: translateY(0);
}<img alt="美女沉思图" data-src="1.jpg">2. 替换元素和非替换元素只差一个content属性
在Chrome浏览器中所有元素都支持content属性，而其他浏览器仅有在::before/::after等伪元素中才支持
由上文我们可以知道img没有src属性其实就是非替换元素，但是我们给他加上content属性后又变成了替换元素,比如：尺寸的特性，和不支持::after/::before
1. 可以通过hover属性来修改content中的属性，但是当我们复制图片的时候还是img标签中src中的图片
<img class="emoji" src="laugh.png">.emoji:hover {
content: url(laugh-tear.png);
}2. 我们网站的logo为了让SEO更好的爬取，我们一般会写文字然后在隐藏，然而我们可以直接使用content属性让其文字覆盖，同时还可以SEO爬取到本来在h1标签中的文字
<h1>《css世界》</h1>h1 {
width: 180px;
height:180px;
background: url('图片地址');
/* 隐藏文字 */
text-indent: -999px
}
//
h1 {
content: url(logo.png)
}注意：
content生成的元素是不可以选中和复制的，好像设置了user-select:none,并且不可以左右:empty伪类
学习《css世界》总结
