你不知道的CSS

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

• 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均不生效。