CSS高频实用属性记录

1. 关键字：currentcolor

currentColor是CSS中的一个特殊的颜色值，它表示当前元素的color属性的值。您可以使用currentColor来将同样的颜色应用到其他需要颜色的属性上，例如border-color, background-color等。

例如，如果您想让一个段落的文本和边框都是红色，您可以这样写：

p {
  color: red;
  border: 2px solid currentColor;
}

这样，无论您如何改变color属性的值，边框颜色都会跟随变化。这可以避免重复编写相同的颜色值，并且方便维护。

2. flex的gap属性

gap属性是CSS中用于设置多列元素、flex容器或者grid容器的行间距和列间距的属性。它是row-gap和column-gap的缩写，可以同时指定两个方向的间距，也可以只指定一个方向的间距。

在flex布局中，您可以使用gap属性来给flex项目之间添加空隙，而不需要使用margin或者padding。例如，如果您想让一行水平排列的flex项目之间有24像素的空隙，您可以这样写：

.flex-container {
  display: flex;
  gap: 0 24px;
}

这样，无论您如何调整flex容器或者flex项目的宽度，空隙都会保持不变。这可以避免使用justify-content或者align-items来调整对齐方式，并且更加灵活。

3. aspect-ratio

aspect-ratio是CSS中用于设置元素的宽高比的属性。它可以接受一个比例值，例如16/9，表示元素的宽度是高度的16/9倍。也可以接受auto值，表示元素使用自身的固有宽高比。

在CSS中，您可以使用aspect-ratio属性来给元素设置一个固定或者最小或者最大的宽高比，而不需要使用padding或者媒体查询。例如，如果您想让一个图片元素保持4/3的宽高比，无论其父容器的大小如何变化，您可以这样写：

img {
  aspect-ratio: 4/3;
}

这样，图片元素的高度会根据其宽度自动调整，以保持4/3的比例。这可以避免图片被拉伸或者压缩，并且适应不同的屏幕尺寸。

4. scroll-behavior

scroll-behavior是CSS中用于设置元素在滚动时的行为的属性。它可以接受两个值，auto或者smooth。auto表示元素在滚动时会立即跳转到目标位置，smooth表示元素在滚动时会平滑地过渡到目标位置。

在CSS中，您可以使用scroll-behavior属性来给元素添加平滑滚动的效果，而不需要使用JavaScript或者插件。例如，如果您想让一个可滚动的容器在点击内部链接时平滑地移动到对应的锚点，您可以这样写：

.scroll-container {
  overflow-y: scroll;
  scroll-behavior: smooth;
}

这样，当您点击容器内部的链接时，容器会以一种平缓的方式移动到链接指向的位置。这可以提高用户体验，并且减少代码量。

5. scroll-snap

scroll-snap可以用于实现一些常见的滚动效果，例如分页文章、轮播图、分步表单等。它可以让用户在滚动时感觉到每个元素之间的边界，并且在停止时自动对齐到合适的位置¹。

水平滚动和垂直滚动的属性主要有两个，scroll-snap-type和scroll-snap-align。scroll-snap-type用于设置滚动容器的吸附类型，它可以接受一个轴参数（x或者y）和一个严格度参数（mandatory或者proximity）。轴参数表示容器沿哪个方向进行吸附，严格度参数表示吸附效果有多强烈。例如，如果您想让一个水平滚动的容器在每次停止时必须对齐到最近的子元素，您可以这样写：

.scroll-container {
  scroll-snap-type: x mandatory;
}

scroll-snap-align用于设置子元素的吸附位置，它可以接受一个水平参数（start、center或者end）和一个垂直参数（start、center或者end）。这些参数表示子元素在水平方向和垂直方向上应该对齐到容器的哪个位置。例如，如果您想让一个垂直滚动的容器在每次停止时自动对齐到最近子元素的中心位置，您可以这样写：

.scroll-container {
  scroll-snap-type: y mandatory;
}

.scroll-item {
  scroll-snap-align: center;
}

下面是一些使用scroll-snap实现不同效果的例子：

分页文章：使用垂直方向上强制性地吸附，并且让每个页面占据整个视口高度。
轮播图：使用水平方向上强制性地吸附，并且让每张图片占据整个视口宽度。
分步表单：使用水平方向上强制性地吸附，并且让每个表单项占据整个视口宽度。
瀑布流布局：使用垂直方向上非强制性地吸附，并且根据图片高度设置不同的吸附位置。

6. font-display

font-display是CSS中用于控制自定义字体在加载和渲染时的行为的属性。它可以让您优化网页的性能和用户体验，避免出现字体闪烁或者不可见的问题。

在CSS中，您可以使用font-display属性来给@font-face规则设置一个显示模式，例如auto、swap、fallback、optional或者block。这些模式表示当自定义字体还没有加载完成时，浏览器应该如何处理元素的文本内容。

例如，如果您想让一个自定义字体在加载完成之前使用系统默认字体，并且在加载完成后立即切换到自定义字体，您可以这样写：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

这样，当您使用MyFont字体的元素在页面上显示时，它们会先使用系统默认字体，并且在自定义字体加载完成后立即切换到MyFont。这可以实现一种叫做FOUT（Flash of Unstyled Text）的效果，并且保证了文本内容始终可见。

其他的显示模式有不同的效果和适用场景，您可以根据您的需求和偏好来选择合适的模式。下面是一些简单的介绍：

auto：浏览器默认模式，可能会出现FOIT（Flash of Invisible Text）或者FOUT。
swap：上面介绍过的模式，始终使用系统默认字体直到自定义字体加载完成。
fallback：类似于swap，但是有一个短暂的阻塞期，在此期间浏览器会尝试加载自定义字体。如果超过阻塞期还没有加载完成，则使用系统默认字体，并且在自定义字体可用后切换。
optional：类似于fallback，但是浏览器会根据网络状况和用户偏好来决定是否下载自定义字体。如果下载失败或者放弃下载，则永远不会切换到自定义字体。
block：与auto相反，始终不显示文本内容直到自定义字体加载完成。

7. :focus-visible

:focus-visible是CSS中用于控制元素在获得焦点时的样式的伪类。它可以让您根据用户的输入方式（鼠标或者键盘）来展示不同形式的焦点，从而提高网页的可访问性和用户体验。

在CSS中，您可以使用:focus-visible伪类来给元素设置一个特定的样式，当元素匹配:focus伪类并且浏览器认为焦点应该可见时，这个样式就会生效。例如，如果您想让一个按钮在使用键盘切换焦点时有一个粉色的背景色，您可以这样写：

button:focus-visible {
  background-color: pink;
}

这样，当您使用键盘（比如Tab键）来切换到按钮时，它会有一个粉色的背景色。但是如果您使用鼠标来点击按钮，它就不会有这个样式。

注意：:focus-visible伪类还没有被所有浏览器支持，所以您可能需要使用一些兼容性方案或者polyfill来实现相同的效果。Firefox支持一个类似的前缀伪类:-moz-focusring。

8. :where

:where()是CSS中用于选择符合一组选择器中任意一个的元素的伪类函数。它可以让您简化和优化您的CSS代码，避免重复或者冗余的选择器。

在CSS中，您可以使用:where()伪类函数来给一组选择器作为参数，当元素匹配这组选择器中的任意一个时，就会被选中。例如，如果您想让header、main或者footer元素内部的段落在鼠标悬停时变成红色，您可以这样写：

:where(header, main, footer) p:hover {
  color: red;
}

这样，当您将鼠标移动到header、main或者footer元素内部的任意一个段落时，它就会变成红色。

:where()伪类函数与:is()伪类函数非常相似，它们都可以接受一组选择器作为参数，并且都可以匹配符合其中任意一个选择器的元素。但是它们之间有一个重要的区别：:where()伪类函数的特异性（specificity）始终为0，而:is()伪类函数的特异性等于它参数中最高的特异性。

特异性是CSS中用于决定哪个样式规则优先应用于元素的一种机制。不同类型的选择器有不同的特异性值，通常越具体越高。例如，ID选择器（如#foo）比类选择器（如.foo）具有更高的特异性。当一个元素匹配多个样式规则时，具有最高特异性值的规则会生效。

因此，在使用:where()和:is()时，您需要注意它们对特异性的影响。例如：

/* This rule has a specificity of 0 */
:where(#foo) p {
  color: blue;
}

/* This rule has a specificity of 100 */
#foo p {
  color: green;
}

在这个例子中，即使第一个规则使用了ID选择器#foo作为参数，但是由于它是在:where()伪类函数内部，所以它的特异性为0。而第二个规则直接使用了ID选择器#foo，并且没有使用任何伪类函数，所以它的特异性为100。因此，在页面上ID为foo的元素内部的段落都会显示为绿色而不是蓝色。

9. :has

:has()是CSS中用于选择符合一组相对选择器中任意一个的元素的伪类函数。它可以让您根据一个元素的后代或者任何后续元素来确定其样式。

在CSS中，您可以使用:has()伪类函数来给一组相对选择器作为参数，当元素的后代或者任何后续元素匹配这组选择器中的任意一个时，就会被选中。例如，如果您想让包含有img标签的div元素有一个边框，您可以这样写：

div:has(img) {
  border: 1px solid black;
}

这样，当页面上有一个div元素包含了img标签时，它就会有一个黑色的边框。

10. object-fit

object-fit是CSS中用于设置可替换元素（例如<img>或<video>）的内容应该如何调整大小以适应其容器的属性。

在CSS中，您可以使用object-fit属性来给一个可替换元素指定一个关键字，来决定它的内容如何填充或者保持它的原始比例。object-fit属性可以取以下几个值：

fill - 这是默认值。图片会被拉伸或者压缩以填充给定的尺寸，可能会破坏它的原始比例
contain - 图片会保持它的原始比例，但是会被缩放以适应给定的尺寸，可能会留有空白
cover - 图片会保持它的原始比例，但是会被缩放以填充给定的尺寸，可能会被裁剪

假设我们有一张图片，它的原始尺寸是300x200像素，如下所示：

<img src="paris.jpg" alt="Paris">

如果我们想让这张图片适应一个200x300像素的容器，我们可以使用以下几种object-fit值：

fill - 图片会被拉伸或者压缩以填充给定的尺寸，可能会破坏它的原始比例。代码如下：

img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}

contain - 图片会保持它的原始比例，但是会被缩放以适应给定的尺寸，可能会留有空白。代码如下：

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}

cover - 图片会保持它的原始比例，但是会被缩放以填充给定的尺寸，可能会被裁剪。代码如下：

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}

11. pointer-events

pointer-events是CSS属性，它定义了元素是否对指针事件（如鼠标点击或触摸）做出反应。

pointer-events有以下几种可能的值：

auto: 元素正常响应指针事件。
none: 元素不响应任何指针事件。
visiblePainted: SVG内容中的元素只在可见和被绘制时响应指针事件。
visibleFill: SVG内容中的元素只在可见和被填充时响应指针事件。
visibleStroke: SVG内容中的元素只在可见和被描边时响应指针事件。
visible: SVG内容中的元素只要可见就响应指针事件。
painted: SVG内容中的元素只要被绘制就响应指针事件。
fill: SVG内容中的元素只要被填充就响应指针事件。
stroke: SVG内容中的元素只要被描边就响应指针事件。
all: SVG内容中的元素总是响应指针事件。

如果你想让一个div不受其下面链接点击的影响，你可以给这个div设置pointer-events: none;。这样，这个div就不会成为指针事件的目标，而指针事件可以直接传递给它的后代元素（如链接）。

例如，你可以使用以下CSS代码来实现这个效果：

div {
  pointer-events: none;
}

这样，如果你的HTML结构类似于以下代码：

<div>
  <a href="https://www.bing.com">Bing</a>
</div>

那么，当你点击div时，实际上是点击了链接，而不是div本身。

那么有一个问题，pointer-events是否会影响js事件的冒泡行为呢？

pointer-events会影响事件冒泡，但具体取决于事件类型和元素的设置。

一般来说，如果一个元素设置了pointer-events: none;，那么它不会成为指针事件的目标，也不会触发任何事件侦听器。但是，如果它的子元素设置了pointer-events: auto;或其他值，那么指针事件可以传递给子元素，并且在事件冒泡过程中，父元素也会触发相应的事件侦听器。

例如，如果你有以下HTML结构：

<div id="parent" onclick="alert('parent clicked')">
  <div id="child" style="pointer-events: none;" onclick="alert('child clicked')">
    Child
  </div>
</div>

那么，当你点击child时，实际上是点击了parent，而且只会弹出"parent clicked"的提示框。

但是，如果你改变child的样式为：

#child {
  pointer-events: auto;
}

那么，当你点击child时，就会先弹出"child clicked"的提示框，然后再弹出"parent clicked"的提示框。

另外，有些特殊的事件类型（如mouseenter和mouseleave）不会冒泡，所以pointer-events对它们没有影响。