常用css总结

个人博客：

https://chenjiahao.xyz

---

1、让网站快速变灰

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);//谷歌浏览器
}

2、让div如input般可编辑

<div id="test" contentEditable="true"  ></div>  

<div id="test1" contentEditable="true" ></div>  

 <div id="test2" contentEditable="true"></div> 

兼容性如下图：

3、让div禁止选择

<div unselectable="on" onselectstart="return false;">
试试看能否选择
</div>

4、给placeholder设置属性

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

5、清除浮动

.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

6、文字溢出显示省略号

{display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

7、强制换行

//自动换行

div{ 
word-wrap: break-word; 
word-break: normal; 
}

//强制英文单词断行

div{
word-break:break-all;
}

//强制不换行

div{
white-space:nowrap;
}

Ps：未完待续~