css替换元素

替换元素

内容可以被替换的元素
img iframe video select input button textarea 元素

特性

1. 有自己的尺寸
2. 替换元素的基线是元素的下边框，和一个inline block 元素中要是没有内容，那么其基线也是下边框的特性相同，应该就是为了防止替换元素有内容和没内容，如果基线不固定，那么后续的line box就可以会出现出现渲染的
3. 不支持:：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世界》总结