必看的css布局小技巧分享

來源：懂視網責編：小OO 時間：2020-11-27 18:52:41

必看的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。

推薦度：

點擊下載本文 文檔為doc格式

導讀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。

下面小編就為大家帶來一篇必看的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; }

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

必看的css布局小技巧分享

推薦度：

點擊下載本文 文檔為doc格式

標簽：分享技巧布局

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

必看的css布局小技巧分享

必看的css布局小技巧分享

必看的css布局小技巧分享

最新推薦

猜你喜歡

熱門推薦