分享前端小干货

今天分享一下前端方面的小知识,亲测实用有效

1、css写三角形角标

元素宽高设置为0,通过border属性来设置,让其它三个方向的border颜色为透明或者和背景色保持一致,剩余一条border的颜色设置为需要的颜色。

2、水平垂直居中

定位或者flex

父级控制子元素居中

3、单行文本超出显示…

4、多行文本超出显示…

5、IOS手机容器滚动条滑动不流畅

6、ios audio无法自动播放、循环播放的问题

ios手机在使用audio或者video播放的时候,个别机型无法实现自动播放。这个我深有体会,曾经做小程序的时候,播放视频,ios手机就是不能自动播放。以下是解决的代码

7、解析get参数

通过replace方法获取url中的参数键值对,可以快速解析get参数。

8、字符串常用的方法
        includes();

        字符串中是否包含某个字符串,其实就是indexOf的替代方案,用起来更好看

        startsWith();

        字符串是否为某个字符串开始,一般用来判断url是否有http

        endsWith();

        字符串是否为某个字符串结尾。判断后缀名最好用。

        repeat(number);

        得到一个重复number次的字符串。

         'abc'.padEnd(5, '1'); // abc11;

        用给定的字符串在尾部拼接到指定长度,第一个参数为长度,第二个参数为用于拼接的值。

        'abc'.padStart(5, '1'); // 11abc;

        用给定的字符串在首部拼接到指定长度第一个参数为长度,第二个参数为用于拼接的值。

9、隐藏页面元素

display-none: 元素不会占用空间,在页面中不显示,子元素也不会显示。

opacity-0: 元素透明度将为0,但元素仍然存在,绑定的事件仍旧有效仍可触发执行。

visibility-hidden:元素隐藏,但元素仍旧存在,占用空间,页面中无法触发该元素的事件。

10、滚动条样式修改

隐藏div元素的滚动条

div::-webkit-scrollbar 滚动条整体部分

div::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动

div::-webkit-scrollbar-track 滚动条的轨道

div::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。

div::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分

div::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处

div::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

注意此方案有兼容性问题,一般需要隐藏滚动条时我都是用一个色块通过定位盖上去,或者将子级元素调大,父级元素使用overflow-hidden截掉滚动条部分。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值