在很多人的眼中“高薪”是前端行业的代名词，但是不得不说，比起高薪，“加班”更是前端开发的行业特点，前端人只能在别人羡慕的目光中默默地承受着加班的压力。
但是，不难发现，相比于经验老道的前端人，加班对于刚进入职场的新人要是一种常态。为什么呢？因为工作任务更少吗？当然不是。因为职场老人在长期的工作实践中掌握了一些能够提高工作效率��技巧，这些技巧虽然不能减轻你的工作量，但是熟练运用却能极大地帮你提高工作效率，下班比同事早走半小时绝对不是梦。
下面小职就帮大家总结了一些CSS在工作中会常用到的小技巧，一起来看一下吧。
一、文字水平居中
将一段文字置于容器的水平中点，只要设置text-align属性即可。
text-align:center;
二、为body添加行高
不需要分别为每一个 <p>, <h*> 等元素添加行高，而是为body添加:
body {
line-height: 1;
}
这种方式下,文本元素可以很容易从body继承。
三、容器水平居中
先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container {
width:760px;
margin:0 auto;
}
四、逗号分离的列表
让列表看起来更像一个真正的逗号分离列表：
ul > li:not(:last-child)::after {
content: ",";
}
使用伪类:not() ，这样最后一个元素不会被添加逗号。
五、文本显示优化
有些字体在所有的设备上并不是最优显示，因此让设备浏览器来帮忙：
html {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
需要注意文本显示优化时请使用optimizeLegibility。同时，IE/Edge不支持text-rendering。
六、图片宽度自适应
想要让较大的图片自动适应小容器的宽度，CSS可以这样写：
img {max-width: 100%}
七、表格单元格等宽
使用表格会很痛苦，因此使用table-layout：fixed来保持单元格相同的宽度：
.calendar {
table-layout: fixed;
}
八、使用属性选择器选择空链接
显示没有文本值但是 href 属性具有链接的 a 元素的链接：
a[href^="http"]:empty::before {
content: attr(href);
}
九、3D按钮
想要按钮呈现3D效果，只要将它的左上部边框设为浅色，右下部边框设为深色即可。
div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}
十、link状态设置顺序
需要按照下面的前后顺序来设置link的四种状态。
a:link
a:visited
a:hover
a:active
十一、 CSS优先性
如果同一个容器被多条CSS语句定义，优先性的基本规则是：
行内样式 > id样式 > class样式 > 标签名样式
十二、font-size基准
浏览器的缺省字体大小是16px，你可以先将基准字体大小设为10px：
body {font-size:62.5%;}
后面统一采用em作为字体单位，2.4em就表示24px。
h1 {font-size: 2.4 em}
十三、 用图片充当列表���志
默认情况下，浏览器使用一个黑圆圈作为列表标志，可以用图片取代它：
ul {list-style: none}
ul li {
background-image: url("path-to-your-image");
background-repeat: none;
background-position: 0 0.5em;
}
十四、禁止自动换行
如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：
h1 { white-space:nowrap; }
十五、用图片替换文字
有时我们需要在标题栏中使用图片，但是又必须保证搜索引擎能够读到标题，CSS语句可以这样写：
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
不管做什么事情，找对方法永远埋头苦干更重要。学会并且熟练运用上面这些CSS小技巧，不仅能够让你的CSS技术看起来更加专业，也能大大地提升工作效率，让你早日实现下班自由哦。
福利来了！职来offer精心总结整理的前端资料，还含有面试辅导资料，包括HTML、CSS、H5+CSS3、JavaScript、JS、react、Vue、uniapp、项目学习等新鲜出炉了！现在起，关注“职来offer”官方公众号，发送信息“领取资料”即可免费自助领取你想要的资料。
