这里我把压箱底的代码都贡献出来了，呵呵。
是的，前端需要记的东西太多，平时遇到的问题解决后急需一个能归纳总结的这些问题点的地方，有时候一问题一行代码就能轻松解决而不必再次上网查解决办法。开发效率就是这样攒下来的！
我编码的平台是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模式来解析
// 对于目前来说加上下面的代码就好了
空白图片的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;
}
响应式代码
@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类
固定宽度：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
最后
以上代码不需要背下来，如果你也有和我一样的代码库，希望能一起攒下来！