实用css小技巧

display应用

在取消了ul/ol的默认样式{padding:0;list-style-type:none;}的时候；ul的li设置成了行内块（display:inline-block）的话，这时候Li与li之间会产生相当于行内文字的字符间距的距离，取消该距离就采用font-size:0;
user-select 禁止用户选中文本

div {
    user-select: none; /* Standard syntax */
}

清除手机tap事件后element 时候出现的一个高亮

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

修改浏览器的滚动条样式 ::-webkit-scrollbar-thumb

可以修改浏览器的滚动条样式。IE火狐可能不支持。

使用CSS transforms 或者 animations时可能会有页面闪烁的bug

-webkit-backface-visibility: hidden;

-webkit-touch-callout 禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

transform-style: preserve-3d 让元素支持3d

div {
    -webkit-transform: rotateY(60deg); /* Chrome, Safari, Opera */
    -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

perspective 透视

这个属性的存在决定你看到的元素是2d还是3d。一般设置在包裹元素的父类上。

.div-box {
    perspective: 400px; 
}

css实现不换行、自动换行、强制换行

//不换行
white-space:nowrap;

//自动换行
word-wrap: break-word; 
word-break: normal; 

//强制换行
word-break:break-all;

box-sizing 让元素的宽度、高度包含border和padding

{
    box-sizing: border-box;
}

calc() function, 计算属性值

https://www.w3schools.com/cssref/func_calc.asp

div {
    width: calc(100% - 100px);
}```
上面的例子就是让宽度为100%减去100px的值，项目中很适用，IE9以上

 

垂直居中

```<div class="box box1"><span>我是垂直居中元素</span></div>
<div class="box box2"><span>我是垂直居中元素</span></div>
<div class="box box3"><span>我是垂直居中元素</span></div>
<div class="box box4"><span>我是垂直居中元素</span></div>
<div class="box box5"><span>我是垂直居中元素</span></div>
<div class="box box6"><span>我是垂直居中元素</span></div>

方法1：dispaly:table-cell

.box1{ text-align:center; display:table-cell; vertical-align:middle; }

方法2：display:flex

.box2{ display:flex; justify-content:center; align-items:center; text-align:center; }

方法3：translate(-50%,-50%)

.box3{ position:relative;} .box3 span{ position:absolute; left:50%; top:50%; -webkit-transform:translate(-50%,-50%); width:100%; text-align:center; }

方法4：display:inline-block

.box4{ text-align:center; font-size:0; } .box4 span{ vertical-align:middle; display:inline-block; font-size:16px; } .box4:after{ content:''; width:0; height:100%; display:inline-block; vertical-align:middle; }

方法5：margin:auto

.box5{ display:flex; text-align:center; } .box5 span{ margin:auto; }

方法6：display:-webkit-box

.box6{ display:-webkit-box; -webkit-box-pack: center; -webkit-box-align: center; text-align:center; }

参考文章
http://www.cnblogs.com/moedong/p/6645483.html?utm_source=itdadao&utm_medium=referral

http://www.cnblogs.com/coco1s/p/5667853.html

https://juejin.im/post/58da53b7ac502e0058e70abf

http://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/