Css常见用法

div水平居中

div{
  width:80px;
  height:50px;
  border:1px solid red;
  margin:0 auto;
}

绝对定位居中

// 水平垂直居中
div{
  width:200px;
  height:100px;
  border:1px solid red;
  position:absolute;
  top:50%;
  left:50%;
  margin:-50px 0 0 -100px;     // transform: translateX(-50%) translateY(-50%)
}
//水平居中
div{
  width:200px;
  height:100px;
  border:1px solid red;
  position:absolute;
  margin:0 auto;
  left:0;
  right:0;
}

三角形

.triangle{
  width:0;
  height:0;
  border-width:40px;
  border-style:solid;
  border-color:transparent transparent #ff0000 transparent;
}

消除transition闪屏

.css{
  trandform-style:preserve-3d;
  backface-visibility:hidden;
  perspective:1000
}
.css{
  transform:translate3d(0,0,0)
}

文本溢出

// 单行文本溢出
p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
// 多行文本溢出
.text-ellipsis{
  display:-webkit-box;                // 将对象作为弹性伸缩盒子模型显示
  -webkit-box-orient:vertical;        // 设置或检索伸缩盒对象的子元素的排列方式
  -webkit-line-clamp:3;               // 限制一个块元素显示的文本行数
  overflow:hidden;
}

图文不可复制

.page{
  -webkit-user-select: none; 
  -ms-user-select: none; 
  -moz-user-select: none; 
  -khtml-user-select: none; 
  user-select: none;
}

placeholder

input::-webkit-input-placeholder { 
    /* WebKit browsers */ 
    font-size:14px; 
    color: #333; 
} 
input::-moz-placeholder { 
    /* Mozilla Firefox 19+ */
    font-size:14px; 
    color: #333; 
} 
input:-ms-input-placeholder { 
    /* Internet Explorer 10+ */
    font-size:14px; 
    color: #333; 
}