常用样式
1.多行显示...
.line2-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
line-clamp: 2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
2.粘性布局填坑
1.父元素（除了body和固定高度的html标签）都不可以使用除overflow：visible以外的值
2.兄弟元素可能造成塌陷，可以添加清除浮动伪元素解决该问题
3.兼容ios低版本 position: -webkit-sticky;
3.哀悼黑白色页面
<html style="filter:grayscale(1);-webkit-filter:grayscale(1)"> ... </html>
4.文字渐变色
background-image: linear-gradient(to bottom, #FFF1E1, #CFB17A);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
边框渐变色
border: 4px solid transparent;
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
5.子元素高度不定，根据内容定高时，所有子元素高度自动变为最高的子元素的高度
父元素设置display:flex; 子元素设置align-items: stretch;-webkit-box-align: stretch;
6.子元素flex为1时，里面内容超出显示省略号
flex为1时，会自适应撑满父元素，这是内容如果超出子元素，子元素会被撑开
<div class="parent"><div class="child"><div class="content">我是你爸爸，你是我的啥？</div></div>
给子元素添加width，多少都可以，这样会告诉浏览器，子元素是定宽的，不能被里面内容撑开
而flex优先级大于width，所以子元素宽度只会是撑满父元素的宽度
.parent {
.child {
flex: 1;
width: 0;
.content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
7.点九图
html元素的边框设置为图片，边框的宽度由width控制，通过slice控制分割为9块内容，详情请看MDN
border-image-source: url(image.png);
border-image-slice: 30% 0 13% 0 fill;
border-image-width: 75px 0 35px 0;
8.子元素为fixed，根据父元素定位
transform, perspective 或 filter 属性不为 none的父元素
兼容性
1. 兼容ios底部安全区域
bottom: 10px; // 不兼容env和constant的保底
bottom: calc(bottom: constant(safe-area-inset-bottom) + 10px); /* 兼容 iOS < 11.2 */
bottom: calc(env(safe-area-inset-bottom) + 10px); /* 兼容 iOS >= 11.2 */
2. 兼容低版本滚动条隐藏
* {
scrollbar-width: none;
-ms-overflow-style: none; /* IE 10+ */
-webkit-tap-highlight-color: transparent;
}
*::-webkit-scrollbar {
display: none;
}
如果是隐藏html，body的滚动条需要额外加上，虽然不知道理由但是管用
html, body {
overflow: auto;
height: 100%;
}
3.兼容低版本touch事件元素获取
$('#letterTab').on('touchstart', (evt) => {
const targetElement = document.elementFromPoint(evt.touches[0].pageX, evt.touches[0].pageY);
}
4.ios滚动有卡顿
html,
body {
-webkit-overflow-scrolling: touch;
}
5.省略号居中问题
由于设置的font-family不正确导致
比如font-family: PingFangSC-Medium;
6.ios图片点击蓝框
img {
outline: none;
-webkit-tap-highlight-color: transparent;
}
7.解决bfcached问题
history.scrollRestoration = 'auto'
5.微信分享规范
2、分享设计规范
- 分享标题：14字以内，建议使用朋友般亲切的口吻
- 分享图标：尺寸120*120，大小不超过10K，不支持GIF格式。必须采用https协议。
- 分享描述：20字以内，对标题的简要解读。
- 分享链接：外链页面所在服务器至少能支持每秒1500次的访问压力，且每次访问的响应时间200ms以内。必须采用https协议。
- 分享行为：页面上无分享按钮，页面上无诱导分享行为，包含但不限于分享后才能看到特定的信息，分享后才能进行下一步流程，分享后可以获得奖励等
- 分享文案：分享时“文案”和“图片”可以正常显示，分享后链接可以访问。
- 分享标题和描述不能出现敏感词汇(敏感词：红包、现金、到账等)，否则会导致部分不可预知的问题。比如分享者可以看到分享图标，被分享者看不到图标等。
注：分享的图标链接和分享链接尽量保持为同一域名下的资源。否则可能会出现分享不成功或分享图标不显示的情况。
6. 页面二级页返回一级页，页面置顶问题
history.scrollRestoration = 'auto'
7.ios输入框点击失效问题
user-select: auto;
8.ios回弹效果禁用
overscroll-behavior: none;
9.ios下css的filter不生效
使用div加上以下属性覆盖在需要filter的地方
-webkit-backdrop-filter: blur(5rpx);
backdrop-filter: blur(5rpx);
