css的幾種佈局方式都在這
阿新 • • 發佈：2019-02-03
說道佈局方式，是我們經常遇到的問題，下面我們就來講解css的常見的一些佈局方式。
1.雙飛翼佈局（兩邊定寬，中間自適應）
主要是通過浮動與margin實現，程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>雙飛翼佈局</title> <style type="text/css"> * { margin: 0; padding: 0; } body { min-width: 700px; } .header, .footer { border: 1px solid #333; background: #aaa; text-align: center; } .left, .main, .right { float: left; min-height: 130px; } .left { margin-left: -100%; width: 200px; background: gold; } .right { margin-left: -220px; width: 220px; background: greenyellow; } .main { width: 100%; } .main-inner { margin-left: 200px; margin-right: 220px; min-height: 130px; background: olivedrab; word-break: break-all; } .footer { clear: both; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="main"> <div class="main-inner"> <h4>main</h4> </div> </div> <div class="left"> <h4>left</h4> </div> <div class="right"> <h4>right</h4> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
效果圖如下：
2.聖盃佈局（兩邊定寬，中間自適應的另一種實現方式，這兩種方式在結構的書寫上還是有不一樣的）
主要是用相對定位與浮動和padding實現，程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>聖盃佈局</title> <style type="text/css"> *{margin: 0;padding: 0;} body{min-width: 700px;} .header, .footer{ border: 1px solid #333; background: #aaa; text-align: center; } .left, .middle, .right{ position: relative; float: left; min-height: 130px; } .container{ padding:0 220px 0 200px; overflow: hidden; } .left{ margin-left: -100%; left: -200px; width: 200px; background: olive; } .right{ margin-left: -220px; right: -220px; width: 220px; background: gold; } .middle{ width: 100%; background: orchid; word-break: break-all; } .footer{ clear: both; } </style> </head> <body> <div class="header"> <h4>header</h4> </div> <div class="container"> <div class="middle"> <h4>middle</h4> </div> <div class="left"> <h4>left</h4> </div> <div class="right"> <h4>right</h4> </div> </div> <div class="footer"> <h4>footer</h4> </div> </body> </html>
效果圖如下：
3.常見的也是最普通的盒模型佈局，定位
這種主要就是利用padding,margin，float ，相對定位，絕對定位以及固定定位的幾種方式佈局。
4.flex彈性盒子佈局：
flex是css提出的一個新屬性，主要用法有這幾個：把容器變成彈性盒子：display：flex ，決定主軸方向：flex-direction：colum(預設為主軸)，換不換行：flex-wrap，主軸對齊方式：justify-content，交叉軸對齊方式：align-items，更多詳細用法可以去flex網站上看。
5.媒體查詢@media，主要是用在移動端的相容不同裝置上的佈局上
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}6.通過rem單位（這個也不能說是佈局方式吧，只是通過螢幕大小自適應字型的變化，rem單位是相對根元素字型大小決定的，我們大可以根據js監聽螢幕變化然後改變根元素字型大小，從而達到縮放字型大小的目的）
function getRootFontsize(){
var root=document.documentElement
//獲取螢幕寬度
var clientwidth=root.clientWidth
//改變根元素字型大小
root.style.fontSize=clientwidth*100/750+"px"
}
window.addEventListener("orientationchange",getRootFontsize)// 監聽橫豎屏變化
window.addEventListener("resize",getRootFontsize)//監聽瀏覽器視窗大小變化7.運用框架：比如elementui有layout佈局，bootstrap有柵格系統，每種UI框架都有自己的佈局方式
element-ui的佈局方式：
<el-row>
<el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
<el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>