这里我把压箱底的代码都贡献出来了，呵呵。

是的，前端需要记的东西太多，平时遇到的问题解决后急需一个能归纳总结的这些问题点的地方，有时候一问题一行代码就能轻松解决而不必再次上网查解决办法。开发效率就是这样攒下来的！

我编码的平台是Mac，平时使用的是SnippetsLab软件管理我的代码片段，遇到好的代码或者好的Idea都会摘抄下来，便于以后直接使用。希望你也有我一样的习惯，节省时间快速开发，回家多陪陪家人！

不多说，步入正题！

常用样式使用技巧

单行显示带省略号

这个代码需要固定宽度，或者设置最大宽度值。

.single-line{
    width:100px;
    display:block; //如果是块儿级元素可以不用加
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行显示能控制行数

line-height是用于防止内容内撑开，导致下面有文字残余。

.multi-line{
    line-height: 130%; // 可能需要
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //显示的行数 
    -webkit-box-orient: vertical;
}

链接(a标签)的边框与背景

a标签默认为inline，如果想设置边框和背景，请将display设置inline-block；

强制内核渲染

比如说360浏览器是分兼容模式和极速模式，兼容模式使用的是IE内核，而极速模式使用的Chrome的内核(webkit)，因此强制内核渲染也是必须的。另外，即使是在IE下，默认使用的内核也是不同的。

//强制使用IE7模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE8″>
<meta http-equiv=“X-UA-Compatible” content=“IE=8″>  

// 对于目前来说加上下面的代码就好了
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">

空白图片的base64

搜藏到你的代码库中吧，这个不常用，但是需要的时候还是很抓狂的。

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

不要滚动条

html ::-webkit-scrollbar {
    /*不要滚动条*/
    display: none;
}
@-ms-viewport {
    width: device-width;
}

关于input/textarea

/*取消输入框默认有内部阴影*/
input,
textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

： 
/*取消input和textarea的聚焦边框*/
input{outline:none} 

/*取消textarea可拖动放大*/
textarea{resize:none} 

/*placeholder设置颜色*/
textarea::-webkit-input-placeholder{
  color:#be916a;
}

/*input placeholder文字垂直居中(Mobile & PC)*/
input{
　　line-height: normal; /* for non-ie */  
　　line-height: 22px\9; /* for ie */  
}

/*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

图片灰度

-webkit-filter:grayscale(100%)
filter:gray;
filter:grayscale(100%)

指示元素边界

试试将代码复制到console中执行：

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

移动端去掉长按选择

div,span,p,img{
  -webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
  -moz-user-select: none;
}

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

a, img {
    -webkit-touch-callout: none; 
/*禁止长按链接与图片弹出菜单*/
}

display:inline-block 间隙去除

.wrapper{
　　font-size:0
 }
.inlineblock{
    display: inline-block;  
    letter-spacing: normal;
    word-spacing: normal;
}

<div class='wrapper'>
    <div class="inlineblock"></div>
</div>

响应式代码

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

无限滚动

.revolve{
    animation: revolve 2s linear infinite;
}
@-webkit-keyframes revolve {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes revolve {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

清除浮动

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

FontAwesome类

<i class="fa fa-icon"></i>

固定宽度：fa-fw
加边框：fa-border
左右浮动：fa-pull-lef/fa-pull-right
旋转：fa-spin
转动：fa-rotate-90/fa-rotate-180/fa-rotate-270/
镜像：fa-flip-horizontal/fa-flip-vertical
反色：fa-inverse

BEM规范

一句就够了！

block__element--modifier

移动端overflow-y 滑动时能顺滑点

 -webkit-overflow-scrolling:touch;

画1px的细线

.border1px{  position: relative;}
.border1px:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid red;
    border-left:1px solid red;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

文字上划斜线

这个常用于电商网站比如将原价用斜线划掉，这里我们用到before

.diagonal:before{
    position: absolute;
    content: "";
    left: 0; 
    top: 42%;
    right: -10%;
    border-top: 2px solid;
    border-color: #333;
    transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
}

占位图生成地址

http://www.atool.org/placeholder.png?size=500x200&text=aTool全站广告位征集&&bg=836&fg=fff
http://placehold.it/640x320 // 推荐
http://placekitten.com/200/300

最后

以上代码不需要背下来，如果你也有和我一样的代码库，希望能一起攒下来！