CSS开发技巧总结

随着各浏览器WEB标准的日趋统一，CSS在WEB世界中扮演的角色也愈发的重要。本文根据小莫在工作中遇到的问题，整理出来的一些比较实用的css技巧。希望能帮助大家解决实际项目开发中遇到的的问题。

禁止用户选中文本

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

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

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

消除transition闪屏

.css {
      -webkit-transform-style: preserve-3d;
      -webkit-backface-visibility: hidden;
      -webkit-perspective: 1000;
}

过渡动画（在没有启动硬件加速的情况下）会出现抖动的现象， 以上的 解决方案只是改变 视角 来启动硬件加速的一种方式；

启动硬件加速的 另外一种方式： 

.css {
      -webkit-transform: translate3d(0,0,0);
      -moz-transform: translate3d(0,0,0);
      -ms-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
}

启动硬件加速最常用的方式：translate3d、translateZ、transform，在opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）。弊端： 硬件加速会导致 CPU性能占用量过大，电池电量消耗加大 ；因此 尽量避免泛滥使用硬件加速。

will-chang属性，一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，其它属性并不会变成复合层，下面有用法介绍）

will-change提高页面滚动、动画等渲染性能

/* 关键字值 */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform;        /* 示例 */
will-change: opacity;          /* 示例 */
will-change: left, top;        /* 两个示例 */

will-change的使用也要谨慎，遵循最小化影响原则，不要这样直接写在默认状态中，因为will-change会一直挂着：

.will-change {  
    will-change: transform;  
    transition: transform 0.3s;
}
.will-change:hover {  
    transform: scale(1.5);
}

如果使用JS添加will-change, 事件或动画完毕，一定要及时remove. 比方说点击某个按钮，其他某个元素进行动画。点击按钮(click)，要先按下(mousedown)再抬起才出发。因此，可以mousedown时候打声招呼, 动画结束自带回调：

dom.onmousedown = function() {    
    target.style.willChange = 'transform';
};
dom.onclick = function() {    
    // target动画...
};
target.onanimationend = function() {    
    // 动画结束回调，移除will-change    
    this.style.willChange = 'auto';
};

禁止长按链接与图片弹出菜单

-webkit-touch-callout: none;

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

/*不换行*/
white-space:nowrap;

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

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

CSS3 calc() 的使用

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

/* basic calc */
.simpleBlock {
    width: calc(100% - 100px);
}
 
/* calc in calc */
.complexBlock {
    width: calc(100% - 50% / 3);
    padding: 5px calc(3% - 2px);
    margin-left: calc(10% + 10px);
}

盒子垂直水平居中

我是垂直居中元素我是垂直居中元素我是垂直居中元素我是垂直居中元素我是垂直居中元素我是垂直居中元素

/*方法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; 
}

伪元素实现换行，替代换行标签

《CSS SECRET》 中对 br 标签的描述是，这种方法不仅在可维护性方面是一种糟糕的实践，而且污染了结构层的代码，运用 after 伪元素，可以有一种非常优雅的解决方案

inline-element ::after{
    content:"\A";
    white-space: pre;
}

通过给元素的 after 伪元素添加 content 为 “\A” 的值。这里 \A 表示的是什么呢？有一个 Unicode 字符是专门代表换行符的：0x000A 。 在 CSS 中，这个字符可以写作 “\000A”， 或简化为 “\A”。这里我们用它来作为 ::after 伪元素的内容。也就是在元素末尾添加了一个换行符的意思。而 white-space: pre; 的作用是保留元素后面的空白符和换行符，结合两者，就可以轻松实现在行内级元素末尾实现换行。

增强用户体验，使用伪元素实现增大点击热区

尤其是在移动端，按钮通常都很小，但是有时由于设计稿限制，我们不能直接去改变按钮元素的高宽。那么这个时候有什么办法在不改变按钮原本大小的情况下去增加他的点击热区呢？这里，伪元素也是可以代表其宿主元素来响应的鼠标交互事件的。借助伪元素可以轻松帮我们实现，我们可以这样写：

.btn::befoer{    
    content:"";    
    position:absolute;    
    top:-10px;    
    right:-10px;    
    bottom:-10px;    
    left:-10px;
}

导航栏分割线最后一个标签是没有分割线（简写）

.nav li:not(:last-child) {
    border-right: 1px solid #666;
}

用逗号分隔的列表最后一个让他没有逗号（简写）

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

给空连接使用属性选择符

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

文本显示优化

html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/*上面代码可以让字体在我们的设备中最优显示！*/

禁用鼠标事件

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

.disabled { pointer-events: none; }

网站快速变灰

每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。

html {
    filter: grayscale(100%);/*IE浏览器*/
    -webkit-filter: grayscale(100%);/*谷歌浏览器*/
    -moz-filter: grayscale(100%);/*火狐*/
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);/*谷歌浏览器*/
}

图片无法撑满div

如图所示：

/*方法1：*/
img{
    vertical-align: top;
}

/*方法2：*/
img{
    display: block;
}

/*方法3：*/
img{
    vertical-align: bottom;
}

css实现单行文本溢出显示

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
/*当然还需要加宽度width属来兼容部分浏览。*/

实现多行文本溢出显示

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

/*
适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
注：
1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性。    
2、display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示。    
3、-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
*/

display：inline-block的元素之间的间隙

/*方法1：给父元素设置*/
font-size：0px；

/*方法2：取消掉换行符
如这样：测试1测试2测试3或者    测试1测试2测试3     测试1测试2测试3方法3：使用margin负值*/
div a {
    display: inline-block;
    margin-right: -3px;
}


/*方法4：使用浮动

另外还有使用letter-spacing、word-spacing等方法。*/

文章来源：CSS开发技巧总结 | 猿小莫的博客