css冷知识pointer-events 除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且

除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

:empty CSS 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。注释或处理指令都不会产生影响。

outline和border 很类似，outline不占据空间，绘制于元素内容周围。

flex 设置为以下值之一： auto，initial，none，或一个无单位正数。

默认情况下，元素不会缩短至小于内容框尺寸，若想改变这一状况，请设置元素的min-width 与 min-height属性。

max-content 元素内容固有的（intrinsic）合适宽度。

表示采用 内部元素的 宽度值最大 的那个元素的宽度 作为最终容器的宽度

min-content元素内容固有的最小宽度。

 表示采用 内部元素的 最小宽度值中的 最大值 作为最终容器的宽度

fit-content取以下两种值中的较大值:

固有首选宽度（max-content）和可用宽度（available）两者中的较小值

可表示为：min(max-content, max(min-content, <length-percentage>))
可以使block像inline-block那样实现收缩宽度包裹内容的效果

-webkit-fill-available撑满可用空间

  可以使inline-block像block那样填充整个空间

决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

fixed表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

local 表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

scroll表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。

aspect-ratio 为box容器规定了一个期待的纵横比，这个纵横比可以用来计算自动尺寸 flex + after + padding-top也可实现

    div{
        display: flex;
        width: 100px;
    }
    div:after{
        content:'';
        padding-top:100%;
    }

当用户手动导航或者 CSSOM scrolling API 触发滚动操作时，CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。

css冷知识