必看的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; }

以上是必看的css佈局小技巧分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！