1. css编写超出元素宽度的中文显示省略号
p{
white-space: normal;
display: -webkit-box;
-webkit-line-clamp: 2; // 显示的行数
-webkit-box-orient: vertical;
overflow: hidden;
}
2. 只显示一行文字
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3. 移动端横向滚动
ul {
-webkit-overflow-scrolling: touch; // IOS设备滑动流畅 允许独立的滚动区域和触摸回弹
white-space: nowrap; // 不换行
overflow-y: hidden; // 设置横向可滚动
}
ul li {
display: inline-block;
}
4. 清除input border fouce阴影
input {
outline: none;
}
5. css三角形
.triangle-up {
height: 0;
width: 0;
border: 12px #e5c3b2 solid;
border-color: transparent transparent #e5c3b2 transparent;
}
6. line-height 比 height 多一，这样就上下居中了
ul li {
height: 30px;
line-height: 31px;
}
7. 背景图片固定不动
.parent-box {
height: 100px;
background: url('') center center no-repeat fixed;
background-size: cover;
}
8. hover动效
div {
transform: translateY(-100%);
transition: .2s all ease-in-out;
&:hover {
transform: translateY(100%);
}
}
9. 清空select样式
select {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
10. 点击链接弹出拨打电话号码
<a class="contact-box" href="tel:400-167167-24167">
11. ios移动端滑动优化：
.list{
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
