html、css、js前端用到的小技巧

1. 文本超出一行显示省略号

div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

2. 文本超出多行显示省略号

div {
  display: -webkit-box;
  -webkit-line-clamp:  2;  // 行数
  -webkit-box-orient: vertical;
  overflow: hidden;
}

3. iOS手机容器滚动条滑动不顺畅

div {
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

4.修改滚动条样式

//隐藏
// 火狐浏览器
div {
    scrollbar-width: none;
}
// 谷歌浏览器webkit
div::-webkit-scrollbar {
    display: none;
}  

::-webkit-scrollbar:滚动条整体部分
::-webkit-scrollbar-thumb:滚动条小方块(上下或左右拖拉那个小部件)
::-webkit-scrollbar-track:滚动条滑动轨道
::-webkit-scrollbar-button:滚动条两端的小按钮

5.三角形角标

div {
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-top-color: black;
}

6.iOS的audio/video无法自动播放、循环播放问题

let media=  document.getElementById('media');
let state = 0;
document.addEventListener('touchstart', function() {
  if(state === 0) {
    media.play();
    state = 1;
  }
},false);
document.addEventListener('WeixinJSBridgeReady', function() {
  media.play();
},false);
media.onended = function() {
  media.load();
  media.play();
}

7.水平垂直居中

// 1.position定位
div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 50px;
  margin: auto;
}

// 2.flex 通过父级控制子级居中
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

8.图片懒加载

图片懒加载可以帮助提升网站的性能和响应能力。图片懒加载可以避免立即加载那些不在屏幕中立即显示的图片素材，当用户滚动临近图片时再去开始加载。

// 可以通过为图片文件添加loading="lazy"的属性来实现:

9.输入提示

当用户在进行输入搜索功能时，如果能够给出有效的提示，这会大大提升用户体验。输入建议和自动完成功能现在到处可见，我们可以使用Javascript添加输入建议，方法是在输入框上设置事件侦听器，然后将搜索到的关键词与预定义的建议相匹配。
其实，HTML也是能够让我们来实现预定义输入建议功能的，通过标签来实现。需要注意的是，使用时这个标签的id属性需要和input元素的list属性一致。

请选择您的餐品:

10.Picture标签

针对只有一个尺寸的图片素材的时候，我们往往可以通过CSS的object-fit属性来进行裁切适配。但是有些时候需要针对不同的分辨率来显示不同尺寸的图片的场景的时候呢？这时候我们可以用HTML提供的标签，它允许我们来添加多张图片资源，并且根据不同的分辨率需求来展示不同的图片。

11.Base URL

当我们的页面有大量的锚点跳转或者静态资源加载时，并且这些跳转或者资源都在统一的域名下时，我们可以用标签来做简化处理。

    


// https://www.xxxx.com/990525
  990525
// https://www.xxxx.com/990555
  990555

12.页面重定向

我们经常会遇到有些站点会有这样一个功能，“5s后页面将跳转”。这个交互可以嵌入到HTML中，直接通过标签，设置http-equiv="refresh"来实现。

// content=" 重定向发生的秒数;URL='重定向的目标地址' "

13.卡券效果

.coupon {
    width: 300px;
    height: 100px;
    line-height: 100px;
    margin: 50px auto;
    text-align: center;
    position: relative;
    background: radial-gradient(circle at right bottom, transparent 10px, #eee 0) top right /50% 50px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #eee 0) top left / 50% 50px no-repeat, radial-gradient(circle at right top, transparent 10px, #eee 0) bottom right / 50% 50px no-repeat, radial-gradient(circle at left top, transparent 10px, #eee 0) bottom left / 50% 50px no-repeat;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}

效果图