第四章-盒尺寸四大家族

• 替换元素
  通过修改某个属性值呈现的内容就可以被替换的元素就成为替换元素
  有以下特性：
  1.内容外观不受css的影响。
  2.有自己的尺寸。video、iframe、canvas：300*150； img:0;
  3.在很多css属性上有自己的一套表现规则。代表性的：vertical-align的base-line，就是字母x的下边缘。对于替换元素。基线就被定义成了元素的下边缘。

• 替换元素的尺寸计算规则
  可以分为三类：固有尺寸、html尺寸、css尺寸
  1.没有任何修饰条件下的尺寸。⚠️我们是无法改变这个固有尺寸的。
  2.html尺寸。比如：img的width,height属性。input的size属性，textarea的cols,row属性。
  3.css尺寸。即width,height等。
  计算规则：css尺寸> html尺寸>固有尺寸
  意外：异步加载图片：

img{visibility: hidden}
img[src]{visibility:visible;}

在FF浏览器下，没有src属性的img是普通的内联元素，因此当设置img{width:200;height:50}的时候，img依然是默认图片尺寸。如何修复：img{display:inline-block};

4. 我们是无法改变固有尺寸的：

div:before{
  content:url(1.jpg);
  display:block;
  width:200px;
  height:200px;
}

此时伪元素呈现的图片的大小是原来图片的大小不是200*200;
为何img标签设定宽高就有效果呢？因为img的默认声明是: object-fit: fill

• 替换元素和非替换元素的距离有多远？
  1.替换元素和非替换元素只隔了一个src属性
  2.替换元素和非替换元素只隔了一个content属性

h1{content:url(1.svg)}

此时h1变成了替换元素，用户看到的是logo，但是seo看到的是文字（只针对webkit有效）(webkit所有元素都支持content属性，而其他浏览器只有::before,::after支持content属性)；

• content与替换元素关系剖析
  content属性生成的内容都是替换元素。
  1.我们使用content生成的文本是无法选中、无法复制的。好像设置了user-select:none一般，但是普通元素的文本却可以被轻松选中。对SEO也不优化。原本重要的文本也不会被content替换，仅仅是视觉层的替换.
  2.不能左右:empty伪类。:empty是一个css选择器，当元素里面无内容的时候进行匹配。但是设置content了之后依然可以匹配到。
  3.content动态生成值无法获取

• content内容生成技术
  在实际项目中，content属性几乎都是用在::before/::after这两个伪元素中，因此content内容生成技术也称为::before/::after技术;优点：html代码更加干净、简洁
  1.content辅助元素生成
  例子：清楚浮动、两端对齐、垂直居中、上下边缘对齐的效果