這篇文章主要講解了“DIV CSS優(yōu)化技巧有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“DIV CSS優(yōu)化技巧有哪些”吧！
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名與空間、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、站前網(wǎng)站維護(hù)、網(wǎng)站推廣。
1、border(CSS邊框)簡(jiǎn)寫(xiě)：
1)、4個(gè)邊邊框?qū)挾葹?px，顏色為#000
border-color:#000; border-style:solid; border-width:1px
可以簡(jiǎn)寫(xiě)為：
border:1px solid #000;
2)、單獨(dú)上、下、左、右邊框簡(jiǎn)寫(xiě)
左邊：
border-left-color:#000; border-left-style:solid; border-left-width:1px
簡(jiǎn)寫(xiě)：
border-left:1px solid #000
右邊：
border-right-color:#000; border-right-style:solid; border-right-width:1px
簡(jiǎn)寫(xiě)：
border-right:1px solid #000
上邊：
border-top-color:#000; border-top-style:solid; border-top-width:1px
簡(jiǎn)寫(xiě)：
border-top:1px solid #000
下邊：
border-bottom-color:#000; border-bottom-style:solid; border-bottom-width:1px
簡(jiǎn)寫(xiě)：
border-bottom:1px solid #000
3)、技巧性簡(jiǎn)寫(xiě)邊框
有時(shí)只設(shè)置3邊的邊框時(shí)候，我們可以技巧性減少代碼量。
假如我們不設(shè)置上邊框，而其他3邊為1px實(shí)現(xiàn)黑色邊框。
傳統(tǒng)代碼：
重慶分公司
重慶分公司
Div{border-right:1px solid #000;border-bottom:1px solid #000;border-left:1px solid #000}簡(jiǎn)寫(xiě)：
Div{border:1px solid #000;border-top:0}這樣達(dá)到相同效果也大大地減少CSS代碼量
了解更多css邊框優(yōu)化壓縮教程。
2、padding（CSS padding）簡(jiǎn)寫(xiě)：
1)、四邊設(shè)置padding內(nèi)補(bǔ)白屬性
傳統(tǒng)思維：
Padding-left:2px;Padding-right:3px;Padding-top:4px;Padding-bottom:5px
可以css padding簡(jiǎn)寫(xiě)：
Padding:4px 3px 5px 2px
2）、只對(duì)3邊設(shè)置padding
假如我們不對(duì)“上”設(shè)置padding，其它3邊設(shè)置padding屬性
傳統(tǒng)：
Padding-left:2px;Padding-right:3px;Padding-bottom:5px
簡(jiǎn)寫(xiě)：
Padding:0 3px 5px 2px
3邊相同情況：
傳統(tǒng)：
Padding-left:2px;Padding-right:2px;Padding-bottom:2px
簡(jiǎn)寫(xiě)：
Padding:0 2px 2px 2px;
3、margin簡(jiǎn)寫(xiě)
Margin與padding縮寫(xiě)類似
1）、四邊間距設(shè)置縮寫(xiě)：
傳統(tǒng)：
Margin-left:2px;Margin-right:3px;Margin-bottom:5px;Margin-top:4px;
簡(jiǎn)寫(xiě)：
Margin:4px 3px 5px 2px
2)、四邊設(shè)置距離相同縮寫(xiě)
傳統(tǒng)：
Margin-left:2px;Margin-right:2px;Margin-bottom:2px;Margin-top:2px;
簡(jiǎn)寫(xiě)：
Margin:2px
3）、上下相同、左右相同
Margin-left:2px;Margin-right:2px;Margin-bottom:5px;Margin-top:5px;
簡(jiǎn)寫(xiě)：
Margin:5px 2px
4、background簡(jiǎn)寫(xiě)
background-color:#000;
可以簡(jiǎn)寫(xiě)為
background:#000;
background-image:url(圖片地址)
可簡(jiǎn)寫(xiě)為：
background:url(圖片地址)
CSS背景比較常用的樣式屬性，包括單獨(dú)設(shè)置一個(gè)背景顏色、單獨(dú)設(shè)置背景為圖片、單獨(dú)設(shè)置背景圖片是否重復(fù)，重復(fù)是全部重復(fù)還是按照X橫向或Y縱向重復(fù)。接下來(lái)我們介紹background背景樣式常用簡(jiǎn)寫(xiě)與注意。
1）、單獨(dú)設(shè)置背景一種顏色的背景優(yōu)化
background-color:#CCC
優(yōu)化為：
background:#CCC
2）、背景為圖片，X橫向重復(fù)平鋪
background-image:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif); background-position:0 0; background-repeat:repeat-x
簡(jiǎn)寫(xiě)：
background:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif) repeat-x 0 0;
2）、背景為圖片，Y縱向重復(fù)平鋪
background-image:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif);
background-position:0 0; background-repeat:repeat-y
CSS簡(jiǎn)寫(xiě)優(yōu)化為：
background:url(http://www.thinkcss5.com/images2012/logo.gif) repeat-y 0 0;
3）、背景為圖片，不重復(fù)平鋪CSS壓縮
background-image:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif);
background-position:0 0; background-repeat:no-repeat
簡(jiǎn)寫(xiě)：
background:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif) no-repeat 0 0;
4）、背景為圖片，網(wǎng)頁(yè)全背景X和Y重復(fù)平鋪
background-image:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif);
簡(jiǎn)寫(xiě)合并：
background:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif) ;
5）、背景為黑色，圖片向X橫向重復(fù)平鋪
background-color:#CCC;background-image:url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif); background-position:0 0; background-repeat:repeat-x;
簡(jiǎn)寫(xiě)合并：
background:#CCC url(http://www.創(chuàng)新互聯(lián).com/img201207/創(chuàng)新互聯(lián)-logo-2012.gif) repeat-x 0 0;
這里注意顏色與圖片前后順序。
5、font簡(jiǎn)寫(xiě)
font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;
可簡(jiǎn)寫(xiě)為：
font:12px/12px Arial, Helvetica, sans-serif;
1、刪除多余空格字符
我們常常寫(xiě)CSS代碼時(shí)候CSS樣式單詞之間會(huì)多html空格，我們可以在開(kāi)發(fā)完CSS代碼時(shí)候，可以利用軟件快速刪除多余空格字符
標(biāo)點(diǎn)符號(hào)字空格字符優(yōu)化
例子：
div{ float:left; width:100px; height:100%;}刪除空格后：
div{float:left;width:100px;height:100%;}
去掉空格優(yōu)化壓縮后的CSS代碼
刪除空格，在開(kāi)發(fā)CSS過(guò)程不必刪除，只需要在開(kāi)發(fā)完成后利用如DW軟件批量替換刪除掉多余空格即可。
2、刪除每個(gè)選擇器最后一個(gè)分號(hào)
刪除分號(hào)前CSS代碼
代碼：
div{float:left;width:100px;height:100%;} .創(chuàng)新互聯(lián){float:left;width:100px;height:100px;}簡(jiǎn)寫(xiě)刪除分號(hào)壓縮后：
div{float:left;width:100px;height:100%} .創(chuàng)新互聯(lián){float:left;width:100px;height:100px}
去掉最后一個(gè)分號(hào)
刪除空格與換行，讓代碼都擠一起。
刪除選擇器之間換行空格截圖
簡(jiǎn)寫(xiě)刪除選擇器換行占位
CSS代碼：
div{float:left;width:100px;height:100%} .創(chuàng)新互聯(lián){float:left;width:100px;height:100px} /* www.創(chuàng)新互聯(lián).com */簡(jiǎn)寫(xiě)縮寫(xiě)優(yōu)化：
div{float:left;width:100px;height:100%}.創(chuàng)新互聯(lián){float:left;width:100px;height:100px}
/* www.創(chuàng)新互聯(lián).com */
簡(jiǎn)寫(xiě)刪除換行，依然可以借助DW軟件進(jìn)行操作刪除。
這里主要介紹是CSS代碼的共用屬性提取來(lái)達(dá)到節(jié)約代碼、維護(hù)方便，CSS實(shí)例如下：
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}他們都有相同高度、寬度、浮動(dòng)、文字大小，而只有內(nèi)容居左居右不同(你可能需要了解CSS居中)，我們就可以提取他們相同屬性
優(yōu)化壓縮后:
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;} .yangshi_b{text-align:right; }注意觀察以上代碼，自己理解，不懂可到CSS論壇提出問(wèn)題。
感謝各位的閱讀，以上就是“DIV CSS優(yōu)化技巧有哪些”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)DIV CSS優(yōu)化技巧有哪些這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
