常用CSS样式使用技巧-原创手记-慕课网

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

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

我编码的平台是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