css知识点简记

1.改变position: fixed; 定位基准元素的方式，父级以上元素的：

　　① tranform属性值不为none的元素

　　② perspective值不为none的元素

　　③ will-change中指定了任意CSS属性

 

2.will-change

　　当我们通过某些行为（点击、移动或滚动）触发页面进行大面积绘制的时候，浏览器往往是没有准备的，只能被动使用CPU去计算与重绘，由于没有事先准备，应付渲染够呛，于是掉帧，于是卡顿。而will-change则是真正的行为触发之前告诉浏览器：“浏览器同学，我待会儿就要变形了，你心理和生理上都准备准备”。于是乎，浏览器同学把GPU给拉上了，从容应对即将到来的变形。

　　用法：（具体用法参考W3C）

.will-change {
    transition: transform 0.3s; 
} 
.will-change:hover {
    will-change: transform; 
} 
.will-change:active {
    transform: scale(1.5);
}

 

3.伪类focus-within

　　该元素或者其后代元素获取到焦点时触发。

 

4.HSL 颜色

　　HSL 颜色模型或色调、饱和度和亮度是表示颜色的另一种方式。

　　CSS hsl 函数接受 3 个值：0 到 360 的数字表示色调，0 到 100 的百分比表示饱和度，0 到 100 的百分比表示亮度。

　　如果你想象一个色轮，色调红色是 0 度，绿色是 120 度，蓝色是 240 度。饱和度指纯色的颜色强度从 0% 或灰色到 100%。亮度是颜色出现的亮度，从 0% 或全黑到 100% 或全白，其中 50% 为中性。

 

5.text-transform属性

　　capitalize - 元素文本中每个单词的第一个字母应该大写。

　　uppercase - 元素文本中的所有字符都应为大写（大写字母）。

　　lowercase - 元素文本中的所有字符都应为小写。

　　none - 不应更改元素文本的大小写。

 

6.display:flex;的gap 属性

　　用来设置网格行与列之间的间隙，该属性是 row-gap 和 column-gap 的简写形式。

 

7.display:grid;的grid-gap属性

　　用来设置网格行与列之间的间隙，是grid-column-gap和grid-row-gap的合并简写形式。

 

8.pointer-events属性

　　设置元素是否对指针事件做出反应：为none可以禁用元素的鼠标事件，但是不影响上级元素，注意：该属性会被后代元素继承

 

9.letter-spacing 属性和word-spacing属性

　　letter-spacing 属性增加（正值）或减少（负值）字符间的空白（字符间距）

　　word-spacing属性增加（正值）或减少（负值）字与字之间的空白

 

10.max函数

　　max() 函数让你可以从一个逗号分隔的表达式列表中选择最大的值作为属性的值。

　　例如：width: max(50%, 300px);

 

11.aspect-ratio属性

　　aspect-ratio为 box 容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸，以及为其他布局函数服务。

　　示例：aspect-ratio: auto; 或者 aspect-ratio: 14 / 9;(纵 / 横)