css常用知识点

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: '请输入一级分类' }]} ><Select /></Form.Item>

 <Form.Item className="twoSort" label="二级分类" name="twoSort"><Select /></Form.Item>

 .oneSort{

  display: inline-flex;

  width: calc(50% - 4px);

}

.twoSort{

  display: inline-flex;

  width: calc(50% - 4px);

  margin-left: 8px;

}

5.根据状态值显示对应的类名：

   <span class="normal" :class="[{'pass':status+'' === '6'},{'freeze':status+'' === '8'}]"></span>

 .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;