必看的css布局小技巧分享

1.max-width:

當(dāng)頁(yè)面左右寬度縮小時(shí)，為了避免出現(xiàn)左右滾動(dòng)條的糟糕體驗(yàn)，就可以用到max-width啦！頁(yè)面比寬度小時(shí)，會(huì)自動(dòng)縮小哦～

max-width : 500px; 
margin: 0 auto; 
}

2.box-sizing:

對(duì)元素設(shè)置box-sizing:border-box后，確定寬度后再設(shè)置padding和border，不會(huì)改變寬度。可以對(duì)全局設(shè)置，解決瀏覽器兼容問(wèn)題的寫(xiě)法如下：

-webkit-box-sizing : border-box; 
-moz-box-sizing:border-box; 
box-sizing:border-box; 
 }

3.overflow:auto

邊框自適應(yīng)內(nèi)容的大小，不會(huì)出現(xiàn)overflow的情況。

IE兼容方案：

.example{ overflow:auto; zoom:1; }

4.響應(yīng)式設(shè)計(jì)－媒體查詢(xún)

運(yùn)用媒體查詢(xún)后，可以根據(jù)不同的頁(yè)面寬度設(shè)置不同的布局，方法如下：

//頁(yè)面寬度大于600px時(shí)，nav模塊浮動(dòng)于左側(cè) 
@media screen and (min-width: 600px) { 
nav { 
 float: left; 
 width: 25%; 
} 
section { 
 margin-left: 25%; 
} 
} 
//頁(yè)面寬度小于599時(shí)，nav模塊打橫，在上方 
@media screen and (max-width: 599px) { 
nav li { 
 display: inline; 
} 
}

5.文字多列布局：

.three-column { padding :1em; -moz-column-count :3; -moz-column-gap: 1em; -webkit-column-count :3; -webkit-column-gap: 1em; column-count:3; column-gap:1em; }

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com