1.按钮的缩放：
.className{animation: scaleDrew 1s ease-in-out infinite;}
ease-in-out表示动画执行先慢后快
整体表示在一秒之内动画先慢后快的无限执行
@keyframes scaleDrew {
/* 定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称 */
50% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
transform: scale(0.8)表示水平垂直方向缩放0.8倍。
2.浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px。
3.文本对齐方式：
实现文本两端对齐： text-align: justify;
实现文本居中：text-align: center;
实现文本靠右对齐：text-align: right;
margin有三个值时是上，左右，下（margin：50px 40px 20px）。
4.把antd的两个输入框放一行的做法：
<Form.Item className="oneSort" label="一级分类" name="oneSort" rules={[{ required: true, message: '请输入一级分类' }]} ></Form.Item> <Form.Item className="twoSort" label="二级分类" name="twoSort"></Form.Item>
.oneSort{
display: inline-flex;
width: calc(50% - 4px);
}
.twoSort{
display: inline-flex;
width: calc(50% - 4px);
margin-left: 8px;
}
5.根据状态值显示对应的类名：
.normal {
color: #fb513b;
&.pass{
color: #1FCA8C;
}
&.freeze{
color: #FF9D02;
}
}
6.背景图片适应不同的手机屏幕：
width: 100vw;
height: 100vh;
background: url(img/index.jpg) no-repeat;
background-size: 100% 100%;
如果页面底部有文字就设置距离底端的距离。
7.让p标签不溢出的处理：
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
8.超过两行显示省略号：
display: -webkit-box !important;
text-overflow: ellipsis;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
