這里我把壓箱底的代碼都貢獻(xiàn)出來了，呵呵。

是的，前端需要記的東西太多，平時(shí)遇到的問題解決后急需一個(gè)能歸納總結(jié)的這些問題點(diǎn)的地方，有時(shí)候一問題一行代碼就能輕松解決而不必再次上網(wǎng)查解決辦法。開發(fā)效率就是這樣攢下來的！

我編碼的平臺(tái)是Mac，平時(shí)使用的是SnippetsLab軟件管理我的代碼片段，遇到好的代碼或者好的Idea都會(huì)摘抄下來，便于以后直接使用。希望你也有我一樣的習(xí)慣，節(jié)省時(shí)間快速開發(fā)，回家多陪陪家人！

不多說，步入正題！

常用樣式使用技巧

單行顯示帶省略號(hào)

這個(gè)代碼需要固定寬度，或者設(shè)置最大寬度值。

.single-line{
    width:100px;
    display:block; //如果是塊兒級(jí)元素可以不用加
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

多行顯示能控制行數(shù)

line-height是用于防止內(nèi)容內(nèi)撐開，導(dǎo)致下面有文字殘余。

.multi-line{
    line-height: 130%; // 可能需要
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //顯示的行數(shù) 
    -webkit-box-orient: vertical;
}

鏈接(a標(biāo)簽)的邊框與背景

a標(biāo)簽?zāi)J(rèn)為inline，如果想設(shè)置邊框和背景，請將display設(shè)置inline-block；

強(qiáng)制內(nèi)核渲染

比如說360瀏覽器是分兼容模式和極速模式，兼容模式使用的是IE內(nèi)核，而極速模式使用的Chrome的內(nèi)核(webkit)，因此強(qiáng)制內(nèi)核渲染也是必須的。另外，即使是在IE下，默認(rèn)使用的內(nèi)核也是不同的。

//強(qiáng)制使用IE7模式來解析
<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE8″>
<meta http-equiv=“X-UA-Compatible” content=“IE=8″>  

// 對(duì)于目前來說加上下面的代碼就好了
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1">

空白圖片的base64

搜藏到你的代碼庫中吧，這個(gè)不常用，但是需要的時(shí)候還是很抓狂的。

data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==

不要滾動(dòng)條

html ::-webkit-scrollbar {
    /*不要滾動(dòng)條*/
    display: none;
}
@-ms-viewport {
    width: device-width;
}

關(guān)于input/textarea

/*取消輸入框默認(rèn)有內(nèi)部陰影*/
input,
textarea {
    border: 0; /* 方法1 */
    -webkit-appearance: none; /* 方法2 */
}

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

/*取消textarea可拖動(dòng)放大*/
textarea{resize:none} 

/*placeholder設(shè)置顏色*/
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點(diǎn)擊時(shí)的藍(lán)色外邊框和灰色半透明背景*/
a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

圖片灰度

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

指示元素邊界

試試將代碼復(fù)制到console中執(zhí)行：

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

移動(dòng)端去掉長按選擇

div,span,p,img{
  -webkit-user-select: none;/*禁用手機(jī)瀏覽器的用戶選擇功能 */
  -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>

響應(yīng)式代碼

@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;
  }
}

無限滾動(dòng)

.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);
  }
}

清除浮動(dòng)

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

.clearfix:after {
  clear: both;
}

FontAwesome類

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

固定寬度：fa-fw
加邊框：fa-border
左右浮動(dòng)：fa-pull-lef/fa-pull-right
旋轉(zhuǎn)：fa-spin
轉(zhuǎn)動(dòng)：fa-rotate-90/fa-rotate-180/fa-rotate-270/
鏡像：fa-flip-horizontal/fa-flip-vertical
反色：fa-inverse

BEM規(guī)范

一句就夠了！

block__element--modifier

移動(dòng)端overflow-y 滑動(dòng)時(shí)能順滑點(diǎn)

 -webkit-overflow-scrolling:touch;

畫1px的細(xì)線

.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;
}

文字上劃斜線

這個(gè)常用于電商網(wǎng)站比如將原價(jià)用斜線劃掉，這里我們用到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

最后

以上代碼不需要背下來，如果你也有和我一樣的代碼庫，希望能一起攢下來！