(學習影片分享:css影片教學)
#網格佈局能將網頁分成簡單屬性的行和列,CSS頁面佈局科技讓我們可以拾取網頁中的元素,並且控制它們相對正常佈局流、週邊元素、父容器或主視窗/視窗的位置。
聖杯佈局
聖杯佈局是一種三列佈局,兩邊定寬,中間自適應:
css:
* { box-sizing: border-box; } html, body{ width: 100%; height: 100%; margin: 0; } .container{ width:100%; } .container:after{ display: table; content:"."; clear:both; } .container .cl{ float:left; border: 1px solid red; height: 200px; } .main{ width:100%; padding 0 290px 0 320px; background-color: blue; } .sub{ width: 320px; margin-left:-100%; background-color: white; } .extra{ width: 290px; margin-left:-290px; background-color: yellow; } CSS
HTML:
<body> <div class="container"> <div class="cl main"> </div> <div class="cl sub"></div> <div class="cl extra"></div> </div> </body>
聖杯佈局的原理就是當子元素處於浮動狀態時,設定負margin,子元素會疊蓋到兄弟元素之上。
那麼能否用現在想要將其中藍色區域再次劃分成三個區域,相信有很多種辦法。但能否透過嵌套的方式實現呢?我們可以試試看:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <meta http-equiv="window-target" content="_top"> <title>Writing to Same Doc</title> <style type="text/css"> * { box-sizing: border-box; } html, body{ width: 100%; height: 100%; margin: 0; } .container{ width:100%; } .container:after{ display: table; content:"."; clear:both; } .container .cl{ float:left; border: 1px solid red; height: 200px; } .main{ width:100%; padding: 0 290px 0 320px; background-color: blue; } .sub{ width: 320px; margin-left:-100%; background-color: white; } .extra{ width: 290px; margin-left:-290px; background-color: yellow; } </style> </head> <body> <div class="container"> <div class="cl main"> <div class="container"> <div class="cl main"></div> <div class="cl sub"></div> <div class="cl extra"></div> </div> </div> <div class="cl sub"></div> <div class="cl extra"></div> </div> </body> </html>
柵格系統的原理
##假設:Flowline的寬度為W,column的寬度為c,Gutter的寬度為g,Margin的寬度為m,柵格列數為NW = c*N g*(N-1) 2m;g的寬度通常是m的兩倍,所以:W = (c g) * N;把c g記為C,得:W = C * N;大部分的柵格系統都是此公式的變體。Bootstrap的柵格系統
下面我們將一起來看常見的柵格佈局的設計和bootstrap中的設計實作。 BootStrap中合理的使用柵格佈局,必須將列放入row中,row必須放入container中。 container類別在佈局中主要有兩個作用:程式設計學習! !
以上是談談css中的柵格佈局(圖文)的詳細內容。更多資訊請關注PHP中文網其他相關文章!