这里我把压箱底的代码都贡献出来了，呵呵。
是的，前端需要记的东西太多，平时遇到的问题解决后急需一个能归纳总结的这些问题点的地方，有时候一问题一行代码就能轻松解决而不必再次上网查解决办法。开发效率就是这样攒下来的！
我编码的平台是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=fffhttp://placehold.it/640x320 // 推荐http://placekitten.com/200/300
最后
以上代码不需要背下来，如果你也有和我一样的代码库，希望能一起攒下来！
作者：烈风裘
链接：https://www.jianshu.com/p/25eaac282b0d