每日经济新闻|下班早走半小时，这些CSS小技巧是不加班的秘诀年会|ai

文章图片

在很多人的眼中“高薪”是前端行业的代名词，但是不得不说，比起高薪， “加班”更是前端开发的行业特点，前端人只能在别人羡慕的目光中默默地承受着加班的压力。

但是，不难发现，相比于经验老道的前端人，加班对于刚进入职场的新人要是一种常态。为什么呢？因为工作任务更少吗？当然不是。因为职场老人在长期的工作实践中掌握了一些能够提高工作效率的技巧，这些技巧虽然不能减轻你的工作量，但是熟练运用却能极大地帮你提高工作效率，下班比同事早走半小时绝对不是梦。
下面小职就帮大家总结了一些CSS在工作中会常用到的小技巧，一起来看一下吧。
一、文字水平居中
将一段文字置于容器的水平中点，只要设置text-align属性即可。
text-align:center;
二、为body添加行高
不需要分别为每一个 <p> <h*> 等元素添加行高，而是为body添加:
body {
line-height: 1;

这种方式下文本元素可以很容易从body继承。
三、容器水平居中
先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container {
　width:760px;
　margin:0 auto;

四、逗号分离的列表
让列表看起来更像一个真正的逗号分离列表：
【每日经济新闻|下班早走半小时，这些CSS小技巧是不加班的秘诀】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\");