常用标签（12文字换行/15滚动条）

1.文本超出两行显示省略号

 //一行

   white-space: nowrap;

    text-overflow: ellipsis;

    overflow: hidden;

    word-break: break-all;

//两行

overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
text-overflow: ellipsis;

 

2.左右位置互换

  display: -webkit-flex;
    /* Safari */
    -webkit-flex-direction: row-reverse;
    /* Safari 6.1+ */
    display: flex;
    flex-direction: row-reverse;

3.上下位置互换（当一排多个内容时  可通过order调整子类位置）

order: -1;

4.小三角形

i{
    width: 0;
    height: 0;
    overflow: hidden;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;

      /* top就是倒三角，bottom就是上三角，left,right类似 */

    border-bottom: 12px solid #fff;
}

5.鼠标移入图片放大

div{

overflow: hidden;

}

div img{

cursor: pointer;

transition: all .5s;

-o-transition: all .5s;

-ms-transition: all .5s;

-moz-transition: all .5s;

-webkit-transition: all .5s;

}

div img:hover{

transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-moz-transform: scale(1.1);

} 

6.水平、垂直居中+换行（加在父级上）

display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;

方法二：

display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-align:center;
-moz-box-align:center;
box-align:center;
-webkit-box-pack:center;
-moz-box-pack:center;
box-pack:center;

6_1.Y轴居中

.jj_nr_wz {

    display: flex;

    justify-content: center;

    /* align-items: center; */

    /* 换主轴方向 */

    flex-direction: column;

    height: 100%;

}

 6_2.使用绝对定位absolute水平垂直居中

        position: absolute;

        top: 50%;

        left: 50%;

        /* 移动自身盒子上下一般的位置 */

        transform: translate(-50%,-50%);

6_1.两边对齐

 

 

justify-content: space-between;

 

8.设置文本框内提示文字

   /* 谷歌 */

input::-webkit-input-placeholder{
color:red;
font-size:20px;
}

input::placeholder{
color:red;
font-size:20px;
}

9.transform动画

9_1.将盒子旋转180度

                    transform: rotateY(180deg);

                    -webkit-transform: rotateY(180deg);

                    -moz-transform: rotateY(180deg);

                    -ms-transform: rotateY(180deg);

                    -o-transform: rotateY(180deg);

9_2.盒子上移

        -webkit-transform: translateY(-10px);

        -moz-transform: translateY(-10px);

        -ms-transform: translateY(-10px);

        -o-transform: translateY(-10px);

        transform: translateY(-10px)

 10.文字间隔

 letter-spacing：1px

 

11.背景渐变

 background: linear-gradient( to right, #e5e8f5, #ccdafe) no-repeat;

 background: -webkit-linear-gradient( left,  #e5e8f5, #ccdafe) no-repeat;

12.文字换行/文字三行

word-wrap: break-word;
word-break: break-all;

/

.three-column { padding: 1em; -moz-column-count: 3; -moz-column-gap: 1em; -webkit-column-count: 3; -webkit-column-gap: 1em; column-count: 3; column-gap: 1em; }

 

13.媒体查询640布局

    <meta name="viewport" content="width=640, user-scalable=no, viewport-fit=cover"> 

 

14.文字竖排

 writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/ 
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  

15.滚动条样式

 .test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  .test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #535353;
  }
  .test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background   : #ededed;
  }

　　渐变文字

  color: transparent;

    background: linear-gradient(to bottom, #6f81a4, #bfc9de);

    background: -webkit-linear-gradient(top, #6f81a4, #bfc9de);

    background-clip: text;

    -webkit-background-clip: text;

 //图片变背景

object-fit: cover;
object-position: center;
width: 100%;
height: 100%;