CSS

默认情况下，an<img>占用零空间，直到浏览器加载足够的图像以知道其尺寸：

重置

运行演示时，您会<figcaption>立即看到。然后，几秒钟后，这一段和随后的页面内容向下移动，为图像腾出空间。这使得用户体验非常令人沮丧，因为内容从用户的眼睛/手指/指针下方移出。

十多年来，我们不得不使用愚蠢的技巧来手动应用纵横比，然后，典型的，两个更好的解决方案几乎同时出现。它们是 CSSaspect-ratio和width&height表示性提示。

那么，您应该使用哪个？首先，让我们看看这些功能是如何工作的，因为那里有很多错误信息……

CSS 纵横比

如果你这样做：

.aspect-ratio-demo {
  aspect-ratio: 16 / 9;
}

......你得到这个：

该功能于 2021 年末登陆 Safari 15 …

video标签是不会自动铺满整个div的，即便是给它设置了高度为100%；所以当需要video标签铺满整个div时，可以给video标签加上‘object-fit:fill’样式，这样就可以解决了！
<div class="videoContent">
<video class="videoElement" controls preload="auto" width="100%" height="100%"></video>
</div>
.videoContent{
background-color: rgb(40, 46, 83);
width: 600px;
height: 420px;
}
.videoElement{
object-fit: fill;
}

object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
…

…

px

px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的

em

em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）

如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸

特点：

1. em的值并不是固定的；

2. em会继承父级元素的字体大小

rem

rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位

如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px

html{font-size: 62.5%}  /* 10 ÷ 16 × 100% = 62.5% */

body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */

/*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好

rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem

em与rem的区别：…

An ordinary input of the file type in HTML

Ordinary input of type file in webpages comes with a default style and the caption, choose file. The good news is that we can style and tweak it to what …