参考了很多人写的文章，这里做一个汇总
1. clamp(MIN, VAL, MAX)
clamp() - CSS: Cascading Style Sheets | MDN
clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))
2. 保持宽高比：aspect-ratio: <width> / <height>
aspect-ratio - CSS: Cascading Style Sheets | MDN
aspect-ratio CSS 属性为 box 容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。
例如：盒子保持一个正方形
<style>
div {
width: 100px;
aspect-ratio: 1/1;
}
</style>
<body><div>正方形</div></body>3. grid 布局 auto-fit 和 auto-fill
auto-fit 会自动撑开到占满所有
auto-fill 会自动填充满父元素，并且自元素是 minmax(150px, 1fr) 的合适尺寸
4. min() max()
5. attr()
CSS 表达式 attr() 用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素。
<style>
p:before {
content: attr(data-foo)" ";
color: attr(color color, green);
}
</style>
<body>
<p data-foo="hello" color="red">world</p>
</body>当前兼容性不是特别好，但是这个功能会很有用
6. blur()
7. calc()
calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算
8. minmax()
CSS函数minmax()定义了一个长宽范围的闭区间， 它与CSS 网格布局一起使用。
9. @supports
@supports CSS at-rule 您可以指定依赖于浏览器中的一个或多个特定的 CSS 功能的支持声明。这被称为特性查询。
10. @media
这个我具体讲解一下，因为很多人只会简单根据屏幕宽度来设置样式，其实他还有很多作用
比如，我们不希望用户在手机上点击按钮有 hover 效果，因为手机上本身是不应该有 hover 的
@media (any-hover: hover) {
div:hover {
background: red;
}
}上边这段就会只在可以 hover 的时候添加 hover
如果我们想删除某些 ui 框架里手机上的 hover 效果，可以采用
@media (any-hover: none) {
div:hover {
background: transparent;
}
}我们想要在窗口变成正方形的时候给元素换颜色，可以采用
<style>
div {
width: 100%;
height: 200px;
background-color: red;
}
@media (aspect-ratio: 1 / 1) {
div {
background-color: limegreen;
}
}
</style>
<body>
<div>content</div>
</body>等等，都可以在这里查到