position:fixed失效
正常按照视口的定位，出现元素所有的父级transform, perspective 或 filter不为null会出现positon：fixed失效
- 解决 将元素直接插入操作dom到body下
背景模糊 filter/backdrop-filter
filter作用于当前元素，并且它的后代元素也会继承这个属性backdrop-filter作用于元素背后的所有元素
BFC
-
根元素，也就是 HTML 元素
-
浮动元素，即使用了 float 属性且值不为 none
-
绝对定位元素
-
块级容器（如 display 的值为 inline-blocks、table-cells、table-captions）
-
overflow 的值不为 visible 的元素
-
使用了
display: flow-root的元素。这是新出的值，专门用来创建无副作用的 BFC。兼容性存疑，比较少用。
处理水平居中问题
margin：auto
margin-inline: auto; /* 真正的只是水平居中 */
margin-block /* 真正的只是竖直居中 */
定位insert
类似于top、left、bottom、right合集
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
+ inset: 0;
clamp
clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。
last-child不生效的原因
可能同类型的元素后面出现了一个其他类型的标签
- 选中倒数第二个元素 :nth-last-child(2)
clamp兼容性css
clamp(MIN, VAL, MAX) 其实就是表示 max(MIN, min(VAL, MAX))
样式百分比
- 如果
width和height的值为百分比，那么他的值的参照为父元素的宽高 - margin和padding 父元素的宽度来进行计算的
top和bottom是相对于父元素的高left和right是相对于父元素的宽- 定位
- 先找到有没有定位的元素
- 如果向上找到了定位元素，以定位元素的宽高为参照
- 如果向上没有找到定位元素，就以
html标签为参照
- translate 根据元素自身的大小
fixed定位失效，transform影响普通元素
只要position:fixed；元素的父元素有transform样式，那么这个元素的fixed定位就会失效；无论是transform:translate()，scale()还是rotate()。
