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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值