关于整理在学习css过程中所遇到的未曾涉略过的知识

前言

本文章将记录自己在工作/学习过程中所遇到的比较冷门、非经常使用的css，以及记录最新的css3属性，便于自己后续查阅学习！

外观属性

这里将整理与布局、外观相关的属性！

column-gap

CSS中用于设置多列布局中列与列之间的间距的属性，当使用CSS的多列布局(column-count或者column-width)时，可以使用column-gap来定义列与列之间的间距，这个属性值也可以在flex布局中使用

clip-path

CSS中用于裁剪元素的属性，它可以通过定义一个裁剪路径来隐藏元素中的部分区域，从而创建非矩形的可见区域，一般有 👇 的几种取值：

url(#id): 引用SVG中定义的裁剪路径；
inset(): 指定一个矩形区域来裁剪元素；
circle(): 创建一个圆形裁剪路径；
ellipse(): 创建一个椭圆形的裁剪路径；
polygon(): 创建一个多边形裁剪路径

3d属性/变化相关

👇 将整理关于css中的3d效果的相关属性:

transfrom: 用于元素变形的工具，包括有旋转(rotateX、rotateY、rotateZ)、缩放(scaleX、scaleY、scaleZ)、移动(translateX、translateY、translateZ)和倾斜(skewX、skewY、skewZ);
transfrom-origin: 改变一个元素变换的原点，在制作3d效果时，调整这个原点非常有用，因为它将影响到元素绕x轴、y轴和z轴的旋转以及缩放方式；
perspective: 给定3d变换元素定义一个透视效果，一个较小的值将会产生强烈的3d效果，而一个较大的值则将会产生较弱的3d效果；
perspective-origin: 定义了透视点的位置，影响着3d变换元素时如何被观察的，可以通过修改这个属性来改变观察3d变换的视角，进一步增强3d效果；
backface-visibility: 决定当元素旋转时元素的背面是否可见，这对于创建翻转效果非常有用；
transform-style: 设置子元素是位于3d空间中还是平面中，也就是是否能够观察到其3d变化的效果！

backface-visibility

用于控制元素背面在旋转时是否可见的属性，一般在实现元素翻转效果时有用，允许开发者决定当元素的背面对着观察者时，是应该显示还是隐藏的，其语法如下：

1
2
3

element {
  backface-visibility: visible|hidden;
}

visible: 默认值，当元素背面向着观察者时，它是可见的；
hidden: 当元素背面向着观察者时，元素背面不可见。

perspective

用于3d变换元素提供透视效果，透视是一种视觉效应，表示人肉眼观察远近物体时的视觉差异，远处的物体看起来比近处的小，通过这个属性，可以模拟到这种现象，让位于屏幕上的2d平面中的元素呈现出3d空间的深度感，其语法规则如下：

1
2
3

element{
  perspective: value;
}

value(长度值): 定义观察者于”z=0”平面之间的距离，数值越小，透视效果越强烈，给人的感觉时用户距离物体更近，否则则相反。

⚠ perspective属性应该应用于包含3d变换元素的父元素上，而不是直接应用于进行3d变换的元素本身，另外一种方式时在3d变换的元素上进行transform: perspective(value);设置，这种是应用元素局部透视效果！

perspective-origin

定义在进行3d变换时透视点(即消失点)的位置，透视点时观察者视线与3d元素交汇的点，它影响了3d变换元素的视觉效果，决定了元素如何在三维空间内呈现，通过调整perspective-origin属性，开发者可以改变用户感知到的3d元素的方向和深度，从而创造出不同的视觉效果， 👇 是其语法：

1
2
3

element{
  perspective-origin: x-axis y-axis;
}

x-axis: 定义透视点沿水平方向的位置，可以是带单位的数值，也可以是关键字(top、left、right、bottom)；
y-axis: 定义透视点沿垂直方向的位置，可以是带单位的数值，也可以是关键字(top、left、right、bottom)；

⚠ 默认值是50% 50%，意味着默认情况下，透视点将位于元素的中心位置，或者说是元素水平和垂直方向的中点，就是元素的正中心点！

结合上述的相关属性，实现一个hover绕y轴进行翻转的效果

background-clip与text-fill-color

background-clip: 用于设置背景图/颜色的绘制区域，通过该属性来控制背景的绘制返回，以便于背景可以限制在元素的哪个区域内显示其取值范围有：border-box、padding-box、content-box、text
text-fill-color: 用于指定文本的填充颜色，可以用于定义文本的填充颜色，而不影响文本的描边颜色，默认值是auto，代表取color所声明的值，也可以是某个<color>值
👇 将结合这两个属性，来实现一个渐变的文本效果，通过对背景设置一个渐变的效果，然后将文本的颜色给设置为透明的颜色，就可以实现这样子的一个目的：

🌠 这里需要用到的是background-image而不能直接使用background属性来实现，因为在这种情况下，只有使用background-image才能将动画作用到文本上，否则将只会作用在其背景中！

aspect-ratio

aspect-ratio是CSS中的一个属性，用于设置元素的宽高比，允许我们明确指定元素的宽高比，而无需显示地设置宽度或者高度。 👉 这个属性非常适合创建响应式布局，尤其是在涉及图片、视频等元素时，通过这个这个属性，我们可以确保在不同的尺寸的屏幕上保持一定的宽高比，从而使布局更加稳定与一致
aspect-ratio的属性语法如下：

1	aspect-ratio: <ratio>;

🫤 这里的<ratio>表示一个宽高比的数值或者是一个计算值，比如16/9或者是4/3，也可以是auto关键词！！

css函数

calc()

calc()函数允许在声明css属性值时执行一些计算，用一个表达式作为它的参数，将表达式的结果作为值，这个表达式一般是+、 -、*、/的简单运算组合，
通过使用动态计算的值，可以在不同的环境中灵活地调整布局与样式，而不必硬编码具体的数值！
⚠ 需要注意的是：calc()函数的结果必须是一个长度值、百分比、视窗单位或者字体相对单位，否则将会导致css解析错误！！！
:+1: 而且，在calc()函数的表达式中，操作符两边必须要有空格隔开！！

操作相关

这里将记录与用户操作行为相关，一般包括鼠标、键盘等操作时间！

pointer-events

用于控制元素对于鼠标事件的响应方式，它可能有以下的几种取值：

auto: 元素表现得像没有指定pointer-events属性，事件将在该元素上触发；
none: 元素不响应鼠标事件，事件会穿透到下层元素；
visiblePainted: 元素不响应鼠标事件，但会成为鼠标事件的目标，事件穿透到下层的元素；
visibleFill: 元素不响应鼠标事件，但会成为鼠标事件的目标，事件不会穿透；
visibleStoke: 元素不响应鼠标事件，但会成为鼠标事件的目标，事件不会穿透到下面的元素；
painted: 元素不响应鼠标事件，也不会成为鼠标事件的目标，事件会穿透到下层元素；
fill: 元素不响应鼠标事件，也不会成为鼠标事件的目标，事件不会穿透到下层元素；
stroke: 元素不响应鼠标事件，也不会成为鼠标事件的目标，事件不会穿透到下层的元素。

pointer-events属性可以用于创建一些特殊的交互效果，比如点击穿透、通过遮罩层控制事件响应等等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pointer Events Example</title>
<style>
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
        pointer-events: none; /* 允许事件穿透 */
    }
    .content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        padding: 20px;
    }
</style>
</head>
<body>
    <div class="overlay"></div>
    <div class="content">
        <h2>内容区域</h2>
        <p>这是一些内容。</p>
        <button>按钮</button>
    </div>
</body>
</html>

🌟 在这个例子中，.overlay类的元素是一个半透明的遮罩层，通过设置pointer-events: none;，使得鼠标事件能够穿透该层。这样，即使遮罩层覆盖在内容区域上，用户仍然可以直接与内容区域下方的元素进行交互，而不受遮罩层的影响。

伪类相关

媒体查询

动画相关

布局相关

以下整理关于在实际项目运用过程中布局的相关遗漏的知识点！

sticky粘性定位

在项目过程中，经常性地会需要将一个元素滚动时固定到某个位置，这个时候一般采用position: sticky;粘性定位的方式，通过设置某个元素为粘性定位，并通过传递top、left、bottom、right等位置信息，可精确控制一个元素滚动时固定到某个位置！！
⚠ 但是，在实际的项目过程中， 🈶 一个需要注意的是这个使用了sticky属性的节点，其所在的直接父容器必须要拥有足够的空间，才可以让其滚动都父容器的某个位置，另外，这个父容器不能拥有overflow:hidden属性！！

在flex容器中控制某个item的缩放情况

一般在默认的情况下，flex中的item的尺寸都是填充所在的父容器的尺寸的，但是有一些情况下，不想让这个item保持与其他的item一致的填充方式，因此可以借助于align-self属性，控制item元素自身按照自己既定的方式来填充！

auto关键词

在CSS中，margin: auto;是一个非常有用的属性， 👉 用于自动计算元素的外边距，以便使当前元素在其容器内水平居中，**auto属性值的具体作用取决于其元素的上下文和布局方式，一般而言，设置了margin: auto;属性的元素其宽度必须固定或者可计算**
margin: auto的核心主要在于自动计算外边距以实现居中对齐，具体效果取决于上下文布局环境！

grid布局

auto-fit、auto-fill、repeat()实现响应式布局

auto-fit: css grid布局中的一个关键词，用于定义自动填充网格容器中的网格元素的数量和大小，当使用auto-fit关键词的时候，网格元素会自动填充可用空间，使得网格容器中的网格元素可以自适应容器的大小，同时保持网格的规整布局，一般来说，auto-fit关键词通常与minmax()函数结合使用，用于定义网格的大小范围， 👉 minmax()函数指定的网格元素的最小和最大尺寸，使得网格元素可以根据可用空间自动调整大小
repeat(): 用于重复指定的网格元素来创建网格布局，它接收两个参数：重复次数(可以是数字count，也可以是auto-fit或者auto-fill)和网格元素的定义(可以是长度值，也可以是百分比，也可以是自动调整值auto，也可以是份数比例1fr)
关于auto-fit与auto-fill的区别在于auto-fill不会删除多余的空白列或者是行，将多出来的保留着
👇 是关于这3者的一个运用，并结合媒体查询与aspect-ratio实现自适应缩放填充的效果