javaScript零散知识点

你不知道的css

css，每个前端人的基本技能，或一般或熟练或精通！这里我们就来聊聊那些 你或许不知道的css。

PS：不定时补充更新。

1.flex布局会影响到overflow 
2.table 不支持设置 box-shadow
3. 以下三种情况会导致position: fixed定位错位：

      (1)transform 属性值不为 none 的元素;

      (2).perspective 值不为 none 的元素;

      (3)在 will-change 中指定了任意 CSS 属性
4. inline-block的元素之间会受空白区域的影响，可使用font-size: 0来清除
5. object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。
    object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
    object-position 控制图片位置。
6. 给可滚动容器添加 scroll-behavior: smooth，实现丝滑的滚动。
    还可使用scroll-snap-type 属性优化滚动效果；这个属性规定了一个容器是否对内部滚动动作进行捕捉，并且规定了如何去处理滚动结束状态。让滚动操作结束后，元素停止在适合的位置。
7. font-family: system-ui 能够自动选择本操作系统下的默认系统字体。默认使用特定操作系统的系统字体可以提高性能。
8. :focus-visible：这个选择器可以有效地根据用户的输入方式(鼠标 vs 键盘)展示不同形式的焦点。
9. 行内元素设置padding-top,padding-bottom,margin-top,margin-bottom均不生效。