移动端css问题

段落3行，超出后三个点

font-size: 13px;
line-height: 18px;
color: #7C7E86;
//核心部分
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
overflow: hidden;
1
2
3
4
5
6
7
8
9

一行文字，超过4个字就显示…

width: 7rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block
1
2
3
4
5

隐藏滚动条样式，但是可以滚动

body::-webkit-scrollbar {
    display: none;
}
1
2
3

关于动画

animation-fill-mode : forwards //设置对象状态为动画结束时的状态（可以防止抖动）
transform-origin: 50% 50%;//可以设置旋转动画的圆心
animation: turnAround 3s linear infinite;//动画名称 时间 线性(默认不是线性) 循环次数

//注意，如果主样式里设置了transfrom属性，keyframes也设置了transfrom属性，则会备覆盖
@keyframes turnAround {
0%{}
100%{}
}
1
2
3
4
5
6
7
8
9

space-around

display:flex;
justify-content:space-around/space-between
1
2

区别：
space-between 最左、最右item贴合左侧或右侧边框,item与item之间间距相等。
space-around 每个item 左右方向的margin相等。两个item中间的间距会比较大

线性透明渐变效果

background: linear-gradient(
        to right,
        rgba($color: #000963, $alpha: 0.5) 80%,
        transparent
      );
1
2
3
4
5

p标签设置overflow：hidden后会往上偏一点：

.name {
    color: #fffeb0;
    display: inline-block;
    max-width: 75px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;//解决往上偏的问题
  }
1
2
3
4
5
6
7
8
9

img进来时src为空，后面src有数据了但是大小撑不起来（设置了大小也不管用）

//在设置大小的基础上设置 display: block;
width: 97px;
height: 97px;
border: 2px solid #57aeff;
border-radius: 50%;
z-index: 2;
display: block;
1
2
3
4
5
6
7

小米手机padding失效
设置display：flex后，align-item：end部分机型失效

取消IOS长按保存

user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
1
2
3
4
5

css隐藏滚动条

https://blog.csdn.net/u010227042/article/details/125324439

scrollbar-width: none;（仅限firefox）
-ms-overflow-style: none;（仅限IE 10+）
.element::-webkit-scrollbar {
    display: none; /* Chrome Safari */
}
1
2
3
4
5

移动端input会有阴影

-webkit-appearance: none;
1

scroll卡顿（iphone 8）

-webkit-overflow-scrolling: touch; //使用硬件加速，就好使了
1

参考：scroll问题

瀑布流布局
1、缺点：适用于数量固定的需求。如果数据有加载更多需求，那所有数据会重新排布一次。
其实是左右分布，第一列全部占满后才开始向第二列分布，看起来数据是乱的
column-count: 2;
column-gap: 1.867vw; //0px;
2.缺点：不能紧跟上面最低的元素
float：left
display：bolck

grid布局
display: grid;
grid-column-gap: 10px;
grid-row-gap: 8px;
grid-template-columns: auto auto;