CSS对于前端来说熟悉不过了，但是现在各种UI库已经极大的方便了我们开发，省去了很多时间写css，同时我们也往往忽略了css的基础，况且它还在不断更新呢，所以咱们还是得定期的补充一下自己的css基础，了解了解它的新动向。下面就是最近几年CSS更新的下使用的新特性。
aspect-ratio: 控制元素比例
aspect-ratio 属性可以方便地设置元素的宽高比例。它定义了元素宽度和高度的比例，根据已知的一边计算出另一边的尺寸。
这个属性非常实用，可以用于地图、卡片、视频、iframe 等等需要保持比例的元素，方便你实现自适应布局，让你的网页在各种屏幕上都看起来完美！
创建一个元素，宽度占父元素的 100%，宽高比例为 2:3：
.div {
width: 100%;
aspect-ratio: 2 / 3;
}对于图片和视频，可以将 aspect-ratio 属性和 object-fit 属性结合使用，aspect-ratio 定义元素的宽高比例，object-fit 则指定内容如何填充元素。
在 aspect-ratio 出现之前，我们通常使用 padding-top 属性来保持比例，因为百分比的 padding 值是基于父元素的宽度。
例如，为了设置 16:9 视频的宽高比例，我们必须编写以下代码：
.video {
width: 100%;
padding-top: 56.25%;
}这种写法比较麻烦，而且不太直观，更像是一个技巧而不是一个基本语言特性。
现在，我们可以使用 aspect-ratio 属性来定义比例：
.video {
width: 100%;
aspect-ratio: 16 / 9;
}是不是简洁明了多了？
注：W3C 编辑草案：https://w3c.github.io/csswg-drafts/css-sizing-4/#aspect-ratio
content-visibility: 提升网页加载速度
content-visibility 属性可以帮助网页更快地加载和渲染。通过这个属性，开发者可以告诉浏览器哪些部分包含独立的内容，这样，浏览器就可以优化页面渲染，延迟一些不必要的计算，从而提升网页加载速度。
优化一个 section 的加载速度：
.section {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}使用 content-visibility 属性，浏览器只会加载和渲染当前用户在屏幕上看到的区域。对于其他部分，只需要指定其高度，contain-intrinsic-size 充当占位符。
在 content-visibility 出现之前，浏览器会加载和渲染页面上的所有部分，无论它们是否在用户视野范围内。而 content-visibility 则可以帮助浏览器只加载和渲染用户当前可见的区域，显著提升渲染速度。
flexbox中的gap属性
gap 属性用于设置 Flexbox 容器中子元素之间的间距。
-
使用一个值，表示行和列之间的间距相同。 -
使用两个值，分别表示行间距和列间距。
为了使代码更清晰，你也可以使用 row-gap 和 column-gap 属性分别设置行间距和列间距。
为 Flex 容器设置 gap 属性。使用 row-gap 和 column-gap 属性分别设置 Flex 元素的行间距和列间距：
.item-container {
display: flex;
row-gap: 30px;
column-gap: 20px;
}
//同样的代码还可以写得更简洁：
.item-container {
display: flex;
gap: 30px 20px;
}在 gap 属性出现之前，我们通常使用 margin 属性来设置 Flex 元素之间的间距。 但 margin 属性会导致元素与容器边缘之间也产生间距。
为了解决这个问题，可以使用各种方法：
-
使用 :last-child 伪类，可以指定最后一个元素没有缩进； -
设置 margin 属性的负值； -
使用三字符 CSS 选择器，俗称“开膛破肚的猫头鹰选择器”。它看起来像 * + *，像猫头鹰空洞的眼神一样，因此得名。这种选择器可以让你只为在相同类型元素之后出现的元素指定属性。
除了复杂性和难以理解之外，这些方法还有一个缺点——它们只适用于 Flex 元素排列成一行的情况，不适合多行结构。
而 gap 属性适用于单行和多行排列的 Flex 元素，可以方便地设置元素之间的间距，而无需使用这些复杂的技术。
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 可以确保结果片段不会变形。
目前，我们还无法通过 transition 属性来动画化 object-view-box 属性，但可以使用 @keyframes 动画来实现平滑的缩放或视窗变化。
在 object-view-box 属性出现之前，如果要裁剪图片或视频，我们需要使用一个带有 overflow: hidden; 属性的包装元素，并在其中定位和缩放内容。对于图片，你也可以使用 background-image 属性而不是 img 标签，并使用 background-position 和 background-size 属性进行定位和缩放。另一种常见的解决方法（可能不太理想）是使用不同的文件来存放同一图片的不同片段。
inset: 简化定位
inset 属性可以替代 top, right, bottom, left 这四个属性，一次性指定定位元素的四个方向的内边距。
inset 就像 margin 和 padding 属性的简写形式，它可以指定定位元素相对于其父元素的顶部、右侧、底部和左侧的内边距。
创建一个完美定位的弹出模态窗口，占满浏览器窗口的整个区域：
.modal {
position: absolute;
inset: 0;
}
//在 inset 属性出现之前 我们需要这样写代码来实现将定位元素拉伸至全屏
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}短短一行代码就可以实现将一个绝对定位的元素拉伸至全屏，是不是很方便？
scrollbar-gutter: 预留滚动条空间
scrollbar-gutter 属性可以帮助你预留滚动条的空间，即使滚动条出现也不会导致内容重新排版。
scrollbar-gutter 属性对于充满动态内容的单页面应用的开发者来说非常有用。之前，如果这种应用中出现了滚动条，所有内容都会沿着滚动条的宽度向左移动。
//这段代码可以为滚动条预留空间 确保滚动条出现时内容不会发生位移
html {
scrollbar-gutter: stable both-edges;
}
//在 scrollbar-gutter 属性出现之前，为了防止滚动条出现时内容发生位移，我们需要使用
//margin 负值和 overflow-x: hidden 属性来对 HTML 进行 hack：
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}text-overflow 和 line-clamp: 截断文本
text-overflow 和 line-clamp 属性用于在文本超出视窗时截断文本。 text-overflow 属性用于截断单行文本，line-clamp 属性则用于截断多行文本。
使用 text-overflow 属性，将一行文本截断为容器的宽度，并在末尾添加三个点：
.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，以便在指定行数之后截断内容。
//使用 JavaScript 可以轻松地将文本截断为指定字符数：
const cutText = (text, count) => {
return text.slice(0, count) + '...';
};count 表示要截断的字符数。 这种方法虽然简单，但有一个缺点：不像 CSS，JavaScript 无法识别文本的行数。它只能根据字符数进行截断，但包含相同字符数的文本可能占用不同的行数。因此，与 CSS 相比，使用 JavaScript 截断文本的可靠性较低。
可变字体
可变字体提供了一个独特的特性：一个字体文件可以包含所有风格。 对于常规字体，如果你在布局中使用两种风格，例如 regular 和 bold，则需要上传两个字体文件。 而对于可变字体，只需要加载一个包含所有字体变体的文件，是不是更方便了？
可变字体与常规字体一样使用，但实际上，它们可以提供更多功能。对于常规字体，font-weight 属性的值从 100 到 900，以 100 为增量，而对于可变字体，它可以是 1 到 999 之间的任何整数。对于普通字体，font-style 属性取两个值 normal 和 italic，而对于可变字体，你可以指定从 -90deg 到 90deg 的倾斜角。可变字体的 font-stretch 属性从 50% （窄字体）到 200% （宽字体）变化，其中正常比例对应于 100%。然后是 font-optical-sizing 属性，它会根据字体的大小改变字体的外观。
// 加载可变字体的代码：
@font-face {
font-family: Inter;
src: url("assets/fonts/Inter.woff2");
}
Inter 就是一个可变字体，只需要加载一个字体文件，就能包含所有字体风格。
CSS自定义属性
CSS 变量就像 CSS 中的变量，你可以定义一些值，然后在代码中重复使用，就像给颜色、尺寸、字体等等定义一个别名。 这样，以后想要修改这些值，只需要修改变量，而不用改动所有使用该值的代码，方便又高效！
CSS 变量还可以通过 JavaScript 来控制，实现动态效果。
//获取 CSS 变量的值：
element.style.getPropertyValue('--main-color');
//设置 CSS 变量的值：
element.style.setProperty('--translate', `${currentScroll}px`);
声明一个变量
: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() 函数的参数顺序必须从小到大：
.design {
width: clamp(350px, 50%, 650px);
}我们有一个设计元素，占据父元素宽度的一半，但它的宽度不能小于 350 像素，也不能大于 650 像素。
在 clamp() 函数出现之前，我们通常使用媒体查询来解决这个问题，为不同的屏幕分辨率指定不同的元素宽度。使用 clamp() 函数，这个任务变得更加简单，元素尺寸的变化在指定的取值范围内是连续的。
