aspect-ratio: 轻松控制元素比例
aspect-ratio 属性可以方便地设置元素的宽高比例。它定义了元素宽度和高度的比例，根据已知的一边计算出另一边的尺寸。
这个属性非常实用，可以用于地图、卡片、视频、iframe 等等需要保持比例的元素，方便你实现自适应布局，让你的网页在各种屏幕上都看起来完美！
aspect-ratio 出现之前，我们通常使用 padding-top 属性来保持比例
例如，为了设置 16:9 视频的宽高比例：
.video {
width: 100%;
padding-top: 56.25%;
}
使用 aspect-ratio 属性：
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
content-visibility: 提升网页加载速度
content-visibility 属性可以帮助网页更快地加载和渲染。通过这个属性，开发者可以告诉浏览器哪些部分包含独立的内容，这样，浏览器就可以优化页面渲染，延迟一些不必要的计算，从而提升网页加载速度。
.section {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}
使用 content-visibility 属性，浏览器只会加载和渲染当前用户在屏幕上看到的区域。对于其他部分，只需要指定其高度，contain-intrinsic-size 充当占位符。Flexbox 中的 gap 属性
gap 属性用于设置 Flexbox 容器中子元素之间的间距
-
使用一个值，表示行和列之间的间距相同。 -
使用两个值，分别表示行间距和列间距。
.item-container {
display: flex;
gap: 30px 20px;
}
等同于
.item-container {
display: flex;
row-gap: 30px;
column-gap: 20px;
}object-view-box：裁剪图片和视频
object-view-box 属性可以让你在网页上只显示图片或视频的特定区域，效果类似于 viewBox 属性。
object-view-box 在你想为不同的元素或不同的分辨率显示图片或视频的特定部分时，会非常有用。它还可以用于缩放或平移图片和视频。
//假设我们需要从图片中裁剪出一个正方形，上边距 25%，右边距 20%，下边距 15%，左边距 5%。实现这一功能的代码如下：
.img {
aspect-ratio: 1;
width: 300px;
object-view-box: inset(25% 20% 15% 5%);
object-fit: cover;
}
inset(25% 20% 20% 15% 5%) 的值表示要显示的图片原始区域中的上、右、下、左位置。而 object-fit 属性设置为 cover 可以确保结果片段不会变形。inset：简化定位
inset 属性可以替代 top, right, bottom, left 这四个属性，一次性指定定位元素的四个方向的内边距。
inset 就像 margin 和 padding 属性的简写形式，它可以指定定位元素相对于其父元素的顶部、右侧、底部和左侧的内边距。
创建一个完美定位的弹出模态窗口，占满浏览器窗口的整个区域：
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
等同于
.modal {
position: absolute;
inset: 0;
}scrollbar-gutter: 预留滚动条空间
scrollbar-gutter 属性可以帮助你预留滚动条的空间，即使滚动条出现也不会导致内容重新排版。
scrollbar-gutter 属性对于充满动态内容的单页面应用的开发者来说非常有用。之前，如果这种应用中出现了滚动条，所有内容都会沿着滚动条的宽度向左移动。
在 scrollbar-gutter 属性出现之前，为了防止滚动条出现时内容发生位移，我们需要使用 margin 负值和 overflow-x: hidden 属性来对 HTML 进行 hack：
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
有了之后
html {
scrollbar-gutter: stable both-edges;
}text-overflow 和 line-clamp：截断文本
text-overflow 和 line-clamp 属性用于在文本超出视窗时截断文本。 text-overflow 属性用于截断单行文本，line-clamp 属性则用于截断多行文本。
.title {
display: block;
width: 350px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
text-overflow 属性只对块级容器有效，前提是元素还具有 white-space 属性设置为 nowrap，以及 overflow 属性设置为 hidden、scroll 或 auto。
text-overflow 属性的可用值为 clip （文本在父块的边缘被精确裁剪）和 ellipsis （在行末添加省略号）。
line-clamp 属性需要使用 -webkit 前缀。值为 2 表示只显示两行文本。
.text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
line-clamp 属性只对块级容器有效，需要与 display 和 -webkit-box-orient 属性一起使用。还需要 overflow 属性设置为 hidden，以便在指定行数之后截断内容。
可变字体 (Variable Fonts)
可变字体提供了一个独特的特性：一个字体文件可以包含所有风格。 对于常规字体，如果你在布局中使用两种风格，例如 regular 和 bold，则需要上传两个字体文件。 而对于可变字体，只需要加载一个包含所有字体变体的文件
以前我们要加载两个字体文件来设置不同的粗细
@font-face {
font-family: Roboto;
src: url("assets/fonts/RobotoThin.woff2");
font-weight: 100;
}
@font-face {
font-family: Roboto;
src: url("assets/fonts/RobotoRegular.woff2");
font-weight: 400;
}
现在可以直接使用一个可变字体文件就能包含所有风格
@font-face {
font-family: Inter;
src: url("assets/fonts/Inter.woff2");
}
CSS 自定义属性 (变量)
CSS 变量就像 CSS 中的变量，你可以定义一些值，然后在代码中重复使用，就像给颜色、尺寸、字体等等定义一个别名。 这样，以后想要修改这些值，只需要修改变量，而不用改动所有使用该值的代码，方便又高效！
CSS 变量还可以通过 JavaScript 来控制，实现动态效果。
声明变量
:root {
--color-red: #79142B;
}
获取 CSS 变量
.item {
color: var(--color-red);
}min(), max(), clamp() CSS 函数
min(), max(), 和 clamp() CSS 函数都是比较函数。它们接收多个值，并返回其中一个值。min() 函数返回最小值，max() 函数返回最大值。clamp() 函数接收三个值：最小值、推荐值和最大值，如果推荐值在指定范围内，则返回推荐值。
比如要设置元素的最大宽度固定值但是要占满整个父级的宽度
以前的方法
.container {
width: 100%;
max-width: 1024px;
}
使用 min() 函数
.container {
width: min(100%, 1024px);
}
创建一个高度为 100vh 的 section，同时指定其最小高度
以前的方法
.section {
height: 100vh;
min-height: 680px;
}
使用max() 函数
.section {
height: max(100vh, 680px);
}
min() 和 max() 函数的参数顺序无关紧要。无论如何，前者返回较小的值，后者返回较大的值。但 clamp() 函数的参数顺序必须从小到大：
我们有一个设计元素，占据父元素宽度的一半，但它的宽度不能小于 350 像素，也不能大于 650 像素。
.design {
width: clamp(350px, 50%, 650px);
}
在 clamp() 函数出现之前，我们通常使用媒体查询来解决这个问题，为不同的屏幕分辨率指定不同的元素宽度。使用 clamp() 函数，这个任务变得更加简单，元素尺寸的变化在指定的取值范围内是连续的。
总结
CSS 可以说是最简单但也最复杂的语言之一。刚开始学起来很容易，但 CSS 不断更新，设计方法也在变化，不断推出新的功能和特性来解决旧问题。 这要求开发者始终关注最新变化，不断学习和提升。
希望这篇文章介绍的 CSS 特性和功能对你有所帮助，并能应用到你的工作中！
