1.object-fit
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
取值：
2.粘性定位
CSS Position(定位)
position 属性指定了元素的定位类型。
position 属性的五个值：
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
粘性定位
sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。
position: sticky; 基于用户的滚动位置来定位。
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed; ，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
设置定位的方式：position: sticky;
/* 添加粘性定位 */
position: sticky;
/* 设置粘性定位的位置，因为有内边距的约束，所以不会贴在浏览器栏最左边 */
top: 20px;
left: 0px;
3.媒体查询
CSS 媒体类型
媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。
针对不同的媒体类型定义不同的样式 使用 @media 注意 从大屏幕到小屏幕适配
@media（max-width：像素值）{
当前像素下的样式
}
从小屏幕到大屏幕适配
@media（min-width：像素值）{
当前像素下的样式
}
4.Grid布局
网格是一组相交的水平线和垂直线，它定义了网格的列和行。
CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。
display 属性
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。
网格轨道
我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。
这些属性定义了网格的轨道，一个网格轨道就是网格中任意两条线之间的空间。
网格元素的垂直线方向称为列（Column）
网格元素的水平线方向称为行（Row）
网格间距
（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距
grid-column-gap 属性来设置列之间的网格间距
grid-row-gap 属性来设置行之间的网格间距
grid-gap 属性可以同时设置行间距和列间距
网格线
列与列，行与行之间的交接处就是网格线。
Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
网格线的编号顺序取决于文章的书写模式。在从左至右书写的语言中，编号为 1 的网格线位于最左边。在从右至左书写的语言中，编号为 1 的网格线位于最右边。
网格容器
开启网格布局，这个元素的所有直系子元素将成为网格元素
display：grid
grid-template-columns 创建列，定义列的数量，指定列的宽度
grid-template-rows 在网格容器中设置行的高度
/* 开启网格布局 */
display: grid;
/* 设置列的数量和宽度 */
grid-template-columns: auto auto auto; /* 均分三列 */
grid-template-columns: 150px 150px 150px; /* 设置列宽 */
/* 设置行 */
grid-template-rows: auto auto auto;
/* 设置行间距 */
grid-gap: 10px;
justify-content: space-around;
fr 单位
轨道可以使用任何长度单位进行定义。
网格引入了 fr 单位来帮助我们创建灵活的网格轨道。一个 fr 单位代表网格容器中可用空间的一等份。
以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：
- 显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。
- 隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。
- 间距属性： grid-column-gap 和 grid-row-gap。
CSS 网格元素
网格容器包含了一个或多个网格元素。
默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。
grid-column 属性
grid-column 属性定义了网格元素列的开始和结束位置。
注意： grid-column 是 grid-column-start 和 grid-column-end 属性的简写属性。
我们可以参考行号来设置网格元素，也可以使用关键字 "span" 来定义元素将跨越的列数。
/* 需求：item1跨两列 */
.item1 {
/* 分开写 */
grid-column-start: 1;
grid-column-end: 3;
/* 连写 */
grid-column: 1/3;
}
