必看的css布局小技巧分享

下面小編就為大家帶來一篇必看的css布局小技巧分享。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.max-width:

當頁面左右寬度縮小時，為了避免出現左右捲軸的糟糕體驗，就可以用到max-width啦！頁面比寬度小時，會自動縮小哦～

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

2.box-sizing:

對元素設定box-sizing:border-box後，確定寬度後再設定padding和border，不會改變寬度。可以對全域設定，解決瀏覽器安全色問題的寫法如下：

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

3.overflow:auto

邊框自適應內容的大小，不會出現overflow的情況。

IE相容方案：

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

4.響應式設計－媒體查詢

運用媒體查詢後，可以根據不同的頁面寬度設定不同的布局，方法如下：

//頁面寬度大於600px時，nav模組浮動於左側   @media screen and (min-width: 600px) {   nav {       float: left;       width: 25%;   }   section {       margin-left: 25%;   }   }   //頁面寬度小於599時，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; }