CSS 常用但容易忘的样式

1、文字超出展示省略号

p{ /*单行*/
	width:200px;  /*设置宽度*/
	overflow:hidder;/*超过隐藏*/
	text-overflow:ellipsis;/*超过的文字将以...的形式展现，其他还有直接截断等*/
	white-space:nowrap;/*强制不换行展示*/
}
p {/*多行*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
 }

2、placeholder样式

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */}
input::-moz-placeholder { /* Firefox */}
input:-ms-input-placeholder { /* IE 10+ */}

3、垂直居中方法

/*伪元素*/
.box-wrap:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em; //微调整空格
}
.box {
     display: inline-block;
     vertical-align: middle;
}
/*flex*/
.box-wrap {
     height: 300px;
     justify-content:center;
     align-items:center;
     display:flex;
     background-color:#666;
 }
/*transform*/
 .box-wrap {
     width:100%;height:300px;
     background:rgba(0,0,0,0.7);
     position:relative;
}
.box{
    position:absolute;
    left:50%;top:50%;
    transform:translateX(-50%) translateY(-50%);
    -webkit-transform:translateX(-50%) translateY(-50%);
}
/*margin*/
.box-wrap {
    position: relative;
    width:100%;height:300px;
    background-color:#f00;
}
.box-content{
    position: absolute;
    top:0;left:0;bottom:0;right:0;
    width:50%;height:50%;
    margin:auto;background-color:#ff0;
}

4、滚动条样式

.scroll::-webkit-scrollbar{ /*滚动条整体样式*/ }
.scroll::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ }
.scroll::-webkit-scrollbar-track { /*滚动条里面轨道*/ }

5、实现隐藏滚动条同时又可以滚动

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari *//*隐藏滚动条*/
}
.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */ 
  overflow-x: hidden; overflow-y: auto;
}

6、绘制三角形

/*无边框*/
div {
    width: 0;height: 0;/*设置宽高为0*/
    border-width: 0 40px 40px;/*除上侧其他方向设置border*/
    border-style: solid;
    border-color: transparent transparent red;/*除下测其他方向隐藏*/
}
/*有边框*/
div:after {
	/*生成div的三角后，再内部再次生成一个三角*/
    content: "";position: absolute;
    top: 1px;left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

7、css选取第n个标签元素

first-child first-child 表示选择列表中的第一个标签。
last-child last-child 表示选择列表中的最后一个标签
nth-child(3) 表示选择列表中的第 3 个标签
nth-child(2n) 这个表示选择列表中的偶数标签
nth-child(2n-1) 这个表示选择列表中的奇数标签
nth-child(n+3) 这个表示选择列表中的标签从第 3 个开始到最后。
nth-child(-n+3) 这个表示选择列表中的标签从 0 到 3，即小于 3 的标签。
nth-last-child(3) 这个表示选择列表中的倒数第 3 个标签。

8、文字之间的间距

p{
  text-indent：10px；//单词抬头距离
  letter-spacing：10px；//间距
}

9、实现文字竖向排版

.wrap {
    height: 210px;
    line-height: 30px;
    text-align: justify;
    writing-mode: vertical-lr;  //从左向右    
    writing-mode: tb-lr;        //IE从左向右
    //writing-mode: vertical-rl;  -- 从右向左
    //writing-mode: tb-rl;        -- 从右向左
}

10、使用硬件加速

在浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而提升性能。硬件加速在移动端尤其有用，因为它可以有效的减少资源的利用。
目前主流浏览器会检测到页面中某个DOM元素应用了某些CSS规则时就会开启，最显著的特征的元素的3D变换。如果不使用3D变形，我们可以通过下面方式来开启：

.wrap {
    transform: translateZ(0);
}

11、CSS加载动画

.dom{
  -webkit-animation:circle 1s infinite linear;
}
@keyframes circle{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

12、全屏背景

.backgroundImage{
  background-image: url(./img/bg.jpg);
  width:100%;
  height:100%;//父级高不为100%请使用100vh
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

13、解决1px边框变粗问题

出现1px变粗的原因，比如在2倍屏时1px的像素实际对应2个物理像素。

.dom{
  height: 1px;
  background: #dbdbdb;
  transform:scaleY(0.5);
}