CSS

渐变背景

background: linear-gradient(direction,color-stop1,color-stop2,...);

第一个参数是方向,后面的是颜色值
direction:
     类型1:to right        //向右渐变,除此之外还有上下左右...
     类型2:to right top    //向右上渐变....[同理]
     类型3:45deg           //直接给个角度

animation动画

<style>
        // 设置动画
        @keyframes move {
            0% {
                margin-top: 0;
            }

           ......

            100% {
                margin-top: 100;
            }
        }
        .box {
            animation: move 3s infinite;    //使用,infinite是循环  linear 均速
        }
    </style>

transition动画:
   transition-property   监听某个属性
   transition-duration    时间

浮动

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden; 
}

文本域

滚动条隐藏:
   overflow-x: hidden;
   overflow-y: hidden;

右下角斜线隐藏:
   resize: none

选中样式:
  :focus {  border: none;  outline: none;  }

超出折叠显示三点

单行:   
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: keep-all;
    white-space: nowrap;
    text-overflow: ellipsis;

多行:

word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

禁止文本被选中

 PC
 -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;

移动端
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;


ontouchstart="return false;"

flex

justify-content:space-between  //元素左右分布