css新属性

scroll-snap-type
滚动，让元素滚动到设定的位置
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ]?

scroll-snap-type: both mandatory 横向和竖向同时捕捉
scroll-snap-type: x mandatory; 横向捕捉

横向有多个div，且可以滚动的时候，每次滚动之后，子元素最终的停留位置是自己设计的位置，可以完整(start)的呈现在容器内或者一半(center)显示在容器内

scroll-padding 是作用于滚动父容器，类似于盒子的 padding
scroll-margin 是作用于滚动子元素，每个子元素的 scroll-margin 可以设置为不一样的值，类似于盒子的 margin
举个例子，在竖向滚动下，给滚动父容器添加一个 scroll-padding-top: 30px 等同于给每个子元素添加 ``scroll-margin-top: 30px`：

ul {
  scroll-snap-type: x mandatory;
}
li {
  scroll-snap-align: center/start/end;
}

2. object-view-box
原生的CSS方式来裁剪图片 inset从四边（上、右、下、左）

<div>
    <img src="img/brownies.jpg" alt="">
div>

img {
  aspect-ratio: 1;
  width: 300px;
  object-view-box: inset(25% 20% 15% 0%);
  /* 防止图片变形*/
  object-fit: cover;
}

3. object-fit
对img或video进行宽高设置

fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度，也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
initial 设置为默认值，
inherit 从该元素的父元素继承属性

4.:not() 和 :has()

/* 不是最后一个元素的其他元素 */
.card:not(:last-child) {
  margin-bottom: 20px;
}

/* // 将匹配含有p子元素的 section元素 */
section:has(p) {
  border-color: red;
}

/* // 将匹配除了含有p子元素的 section元素 */
section:not(:has(p)) {
  margin-bottom: 30px;
}

5. css变量

:root {
  --invalid: ; // 注意冒号和分号之间无空格符，也无任何字符
  --valid: ; // 注意冒号和分号之间只有一个空格符
}

/* 一般使用关键词 initial来显式声明一个自定义属性为无效变量： */
:root {
  --invalid: initial; // 无效变量
  --valid: ; // 有效变量
}

var() 函数有两个参数，第一个参数就是自定义属性，第二个参数是备用值。当第一个参数是个无效值时，会采用第二个参数。

:root {
  --invalid: initial; // 无效变量
  --valid: ;          // 有效变量
}

foo {
  background-color: var(--invalid); // 未提供备用值，则background-color 计算值无效
  color: var(--invalid, red)        // 提供了备用值，--invalid是无效变量，则会采用备用值 red
}

.element {
  --color: red;  // 只作用于 .element 元素及其后代元素
}

i {
  --foo: initial;                         // 无效变量
  --color: var(--foo);                                        // 无效变量
  background-color: var(--color, orange); // --color是无效变量，采用备用值 orange
}

:root {
  --initial: initial; // 无效变量
  --valid: ;                  // 有效变量
}
section {
  background-color: var(--initial, red); // 无效变量，会采用备用值 red
  color: var(--valid, red);                            // 有效变量，备用值被忽略
}

开关：

:root {
  --ON: initial; // 无效变量,相当于开启 var()的备用值
  --OFF: ; // 有效变量,相当于关闭 var()的备用值
}

6. css的~和+
~(波浪号) ： p标签之后的所有ul标签，不用紧挨着
+(加号） ： 二者有相同的父元素，选择紧接在另一个元素后的元素

<p>快乐生活p>
<ul>
  <li>生活li>
ul>
<h1>-------------h1>
<ul>
  <li>1li>
ul> 

P~ul {  // p后面所有的ul标签
  background-color: pink;
}

h2 + h3 {  // 紧跟在h2后面的h3标签，只对h3起作用，不对h2起作用，多个h3标签不起作用
  background-color: pink;
}
    
快乐生活
"">
  
+++
  
+++++++
  
++++++++++

7. aspect-ratio： 16/9; 等比例缩放 宽：高

8. gap

// 多列布局 
.multi__column { 
    gap: 3ch   // 3ch的宽度，那么久只能装下3个0的宽度
} 

// Flexbox布局 
.flexbox { 
    display: flex; 
    gap: 20px 
} 

// Grid布局 
.grid { 
    display: grid; 
    gap: 10vh 20% 
}

​.gap { 
  gap: 20px 30px;
} 
// 等同于 
.gap { 
  row-gap: 20px; 
  column-gap: 30px;
}

9.
min() min(50vw, 500px) 取两个值最小的一个
max() max(50vw, 500px) 取两个值最大的一个
clamp() clamp(100px, 50vw, 500px) 取三个值中间的一个