導(dǎo)讀在很多人的眼中“高薪”是前端行業(yè)的代名詞，但是不得不說(shuō)，比起高薪，“加班”更是前端開發(fā)的行業(yè)特點(diǎn)，前端人只能在別人羨慕的目光中默默地承受著加班的壓力。但是，....

在很多人的眼中“高薪”是前端行業(yè)的代名詞，但是不得不說(shuō)，比起高薪，“加班”更是前端開發(fā)的行業(yè)特點(diǎn)，前端人只能在別人羨慕的目光中默默地承受著加班的壓力。

但是，不難發(fā)現(xiàn)，相比于經(jīng)驗(yàn)老道的前端人，加班對(duì)于剛進(jìn)入職場(chǎng)的新人要是一種常態(tài)。為什么呢？因?yàn)楣ぷ魅蝿?wù)更少嗎？當(dāng)然不是。因?yàn)槁殘?chǎng)老人在長(zhǎng)期的工作實(shí)踐中掌握了一些能夠提高工作效率的技巧，這些技巧雖然不能減輕你的工作量，但是熟練運(yùn)用卻能極大地幫你提高工作效率，下班比同事早走半小時(shí)絕對(duì)不是夢(mèng)。

下面小職就幫大家總結(jié)了一些CSS在工作中會(huì)常用到的小技巧，一起來(lái)看一下吧。

一、文字水平居中

將一段文字置于容器的水平中點(diǎn)，只要設(shè)置text-align屬性即可。

text-align:center;

二、為body添加行高

不需要分別為每一個(gè) <p>, <h*> 等元素添加行高，而是為body添加:

body {

line-height: 1;

}

這種方式下,文本元素可以很容易從body繼承。

三、容器水平居中

先為該容器設(shè)置一個(gè)明確寬度，然后將margin的水平值設(shè)為auto即可。

div#container {
　width:760px;
　margin:0 auto;
　}

四、逗號(hào)分離的列表

讓列表看起來(lái)更像一個(gè)真正的逗號(hào)分離列表：

ul > li:not(:last-child)::after {

content: ",";

}

使用偽類:not() ，這樣最后一個(gè)元素不會(huì)被添加逗號(hào)。

五、文本顯示優(yōu)化

有些字體在所有的設(shè)備上并不是最優(yōu)顯示，因此讓設(shè)備瀏覽器來(lái)幫忙：

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

需要注意文本顯示優(yōu)化時(shí)請(qǐng)使用optimizeLegibility。同時(shí)，IE/Edge不支持text-rendering。

六、圖片寬度自適應(yīng)

想要讓較大的圖片自動(dòng)適應(yīng)小容器的寬度，CSS可以這樣寫：

img {max-width: 100%}

七、表格單元格等寬

使用表格會(huì)很痛苦，因此使用table-layout：fixed來(lái)保持單元格相同的寬度：

.calendar {

table-layout: fixed;

}

八、使用屬性選擇器選擇空鏈接

顯示沒有文本值但是 href 屬性具有鏈接的 a 元素的鏈接：

a[href^="http"]:empty::before {

content: attr(href);

}

九、3D按鈕

想要按鈕呈現(xiàn)3D效果，只要將它的左上部邊框設(shè)為淺色，右下部邊框設(shè)為深色即可。

div#button {
　background: #888;
　border: 1px solid;
　border-color: #999 #777 #777 #999;
　　}

十、link狀態(tài)設(shè)置順序

需要按照下面的前后順序來(lái)設(shè)置link的四種狀態(tài)。

a:link
a:visited
a:hover
a:active

十一、 CSS優(yōu)先性

如果同一個(gè)容器被多條CSS語(yǔ)句定義，優(yōu)先性的基本規(guī)則是：

行內(nèi)樣式 > id樣式 > class樣式 > 標(biāo)簽名樣式

十二、font-size基準(zhǔn)

瀏覽器的缺省字體大小是16px，你可以先將基準(zhǔn)字體大小設(shè)為10px：

body {font-size:62.5%;}

后面統(tǒng)一采用em作為字體單位，2.4em就表示24px。

h1 {font-size: 2.4 em}

十三、 用圖片充當(dāng)列表標(biāo)志

默認(rèn)情況下，瀏覽器使用一個(gè)黑圓圈作為列表標(biāo)志，可以用圖片取代它：

ul {list-style: none}

　ul li {
　　background-image: url("path-to-your-image");
　　background-repeat: none;
　　background-position: 0 0.5em;
　　}

十四、禁止自動(dòng)換行

如果你希望文字在一行中顯示完成，不要自動(dòng)換行，CSS命令如下：

h1 { white-space:nowrap; }

十五、用圖片替換文字

有時(shí)我們需要在標(biāo)題欄中使用圖片，但是又必須保證搜索引擎能夠讀到標(biāo)題，CSS語(yǔ)句可以這樣寫：

h1 {
　　　　text-indent:-9999px;
　　　　background:url("h1-image.jpg") no-repeat;
　　　　width:200px;
　　　　height:50px;
　　}

不管做什么事情，找對(duì)方法永遠(yuǎn)埋頭苦干更重要。學(xué)會(huì)并且熟練運(yùn)用上面這些CSS小技巧，不僅能夠讓你的CSS技術(shù)看起來(lái)更加專業(yè)，也能大大地提升工作效率，讓你早日實(shí)現(xiàn)下班自由哦。