一些常用的css小技巧

1. 隐藏文件：

保证不会被搜索引擎认为是垃圾信息而被忽略；使屏幕阅读器不会忽略被隐藏的文字。

.text-hidden {
  display:block; 
  overflow: hidden;
  width: 0;
  height: 0;
}复制代码

2. 使容器内设置padding不会撑大容器本身宽高

div{
  box-sizing: border-box;
}复制代码

 

3.使超出宽度的文字以...隐藏

div{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}复制代码

只能用于单行且必须设置宽高

4.清楚浮动的技巧

为父元素添上clearfix，简单好用

.clearfix:after {
  display: table;
  content: '';
  clear: both;
  overflow: hidden;
}
.clearfix {  
  *zoom: 1;
}复制代码

5.图像变灰

img {
  filter: grayscale(100%); 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%);
}复制代码

不用再多使用一张图片就可实现变灰效果

6.页面顶部阴影

body:before {
  content: "";  
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px; 
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  box-shadow: 0px 0px 10px rgba(0,0,0,.8);  z-index: 100;
}复制代码

7.逗号分隔的列表

ul > li:not(:last-child)::after {
    content: ",";
}复制代码

8. 优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：

html { 
  -moz-osx-font-smoothing: grayscale;  
  -webkit-font-smoothing: antialiased; 
  text-rendering: optimizeLegibility;
}复制代码

注：IE /Edge不支持 text-rendering

9. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

a[href^="http"]:empty::before {
  content: attr(href);
}复制代码

10. CSS3 calc() 的使用

calc() 用法类似于函数，能够给元素设置动态的值：

.complexBlock {
  width: calc(100% - 50% / 3);
  padding: 5px calc(3% - 2px);
  margin-left: calc(10% + 10px);
}复制代码

11. 禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个链接如果设置了下面的样式就无法点击了。

.noclick { pointer-events: none; }复制代码

12. 一个p标签,左右两条线用before和after画出来

p{  
  text-align: center;
}

p:after, 
p:before{  
  content: "";  
  position: absolute;  
  top:10px;  
  height: 1px; 
  background: red; 
  width: 200px
}

p:after{  
  left: 0;
}

p:before{  
  right:0;
}复制代码

13.计数器

<div class="choose">
  <label><input type="checkbox">111</label>
  <label><input type="checkbox">222</label>
  <label><input type="checkbox">333</label>
  <label><input type="checkbox">444</label>
  <label><input type="checkbox">555</label>
</div>
<p class="count"></p>复制代码

.choose{
  counter-reset: fruit;
}

.choose input:checked{
  counter-increment: fruit;
}

.count:before{
  content: counter(fruit);
}复制代码

14.user-select 禁止用户选中文本

div {
    user-select: none;
}复制代码

15.清除手机tap事件后出现的一个高亮

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}复制代码

16.触摸屏当中的元素滚动

如果你需要在触摸屏当中为一些元素设置内滚动，那么你不仅需要overflow: scroll / auto ，还需要-webkit-overflow-scrolling: touch;

移动端浏览器在某些时候并不能正确执行overflow: scroll / auto ，它可能会滚动整个页面而不是你想要的那部分。-webkit-overflow-scrolling解决了这个问题，你可以在你的实际项目中体验一下。

17.使用硬件加速

有时候动画可能会导致用户的电脑卡顿，可以在特定元素中使用硬件加速来避免这个问题：

.block {
    transform: translateZ(0);
}复制代码

浏览器会为这个元素进行3D硬件加速。

18.鼠标移入有白光扫过的按钮

button{
  width: 200px;
  height: 50px;
  border-radius: 4px;
  background: #ea6f5a;
  border: none;
  color: #fff;
  position: relative;
}

button:after{
  background: #fff;
  content:"";
  position: absolute;
  width: 50px;
  height: 155px; 
  left: -70px;
  top: -60px;
  opacity: .3;
  transform: rotate(40deg);
  transition: all 1.4s cubic-bezier(0.2, 1, 0.2, 1);
}

button:hover:after{
  left: 60%;
}复制代码

19.css绘制三角小图标

.arrow {  
  width:0px;  
  height:0px;  
  border-left:10px solid transparent;   
  border-right:10px solid transparent;   
  border-bottom:10px solid red; 
  font-size:0px;  line-height:0px;
}复制代码

通过改变边的值来修改小三角指向的方向

20.页面居中弹出层

.popup{  
  position: fixed;  
  margin: auto;  
  top:0; 
  left: 0; 
  right: 0;
  bottom:0;
  z-index:1;
}复制代码

可使弹出层绝对居中于屏幕，记得给你的弹出层设定宽高

                                                                                         

                                                                                          to be continued...