簡單的柵格系統-流式布局(類似bootstrap的柵格系統)
-
什么是流式布局
- 所謂流式布局，就是頁面元素的寬度按照屏幕進行適配調整。簡單來說，就是 HTML 頁面中的元素會根據分辨率的不同而變化大小，但位置並不會有任何變化。
- 這種布局的主要問題就是，如果屏幕尺度跨度太大，那么在相對其原始設計而言過小或過大的屏幕上不能正常顯示。
-
創建流式布局
- 流式布局通常被分為 12 列。將 HTML 頁面的寬度設置為 100%，這樣 HTML 頁面會根據瀏覽器窗口大小的變化而自動伸縮。
- 計算每列所占的百分比：
100% / 12 列 = 8.33% - 根據以上的計算結果，設置 CSS 的 class：
.col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} - 將所有列設置為浮動（一般為左浮動）稍加padding
[class*='col-']{ float: left; padding: 1%; } - 將 HTML 頁面中所有的元素 box-sizing 設置為 border-box。
- 當 box-sizing 的值為 content-box（默認值），標准盒模型。元素尺寸計算公式：
寬度和高度都不包含內容的邊框（border）和內邊距（padding）。width = 內容的寬度，height = 內容的高度 - 當 box-sizing 的值為 border-box，IE 怪異模式（Quirks mode）使用的 盒模型 。元素尺寸計算公式：
此時外邊距和邊框將會包括在盒子中。width = border + padding + 內容的寬度，height = border + padding + 內容的高度
- 當 box-sizing 的值為 content-box（默認值），標准盒模型。元素尺寸計算公式：
最終如CSS/small-grid.css;可預覽效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>高仿柵格系統</title> <!--柵格系統--> <link rel="stylesheet" href="css/small-grid.css"> <!----> <link rel="stylesheet" href="css/index.css"> </head> <body> <div class="main small-container"> <!--一列12個--> <div class="small-row"> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> <div class="col-1 have-border">A</div> </div> <div class="small-row"> <div class="col-1 have-border">A</div> <div class="col-11 have-border">B</div> </div> <!--一列6個--> <div class="small-row"> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> <div class="col-2 have-border">A</div> </div> <div class="small-row"> <div class="col-2 have-border">A</div> <div class="col-10 have-border">B</div> </div> <!--4個--> <div class="small-row"> <div class="col-3 have-border">A</div> <div class="col-3 have-border">A</div> <div class="col-3 have-border">A</div> <div class="col-3 have-border">A</div> </div> <div class="small-row"> <div class="col-3 have-border">A</div> <div class="col-9 have-border">B</div> </div> <!--3個--> <div class="small-row"> <div class="col-4 have-border">A</div> <div class="col-4 have-border">A</div> <div class="col-4 have-border">A</div> </div> <div class="small-row"> <div class="col-4 have-border">A</div> <div class="col-8 have-border">B</div> </div> <div class="small-row"> <div class="col-5 have-border">A</div> <div class="col-7 have-border">B</div> </div> <div class="small-row"> <div class="col-6 have-border">A</div> <div class="col-6 have-border">B</div> </div> </div> </body> </html>
*{ margin: 0; padding: 0; border: 0; list-style: none; box-sizing: border-box; } .small-container{ width: 100%; } .small-container,.small-row{ box-sizing: border-box; } .small-row::before, .small-row::after{ content: ''; display: block; visibility: hidden; clear: both; zoom: 1; } [class*='col-']{ float: left; padding: 1%; } .col-1{ width: 8.33%; } .col-2{ width: 16.66%; } .col-3{ width: 25%; } .col-4{ width: 33.33%; } .col-5{ width: 41.66%; } .col-6{ width: 50%; } .col-7{ width: 58.33%; } .col-8{ width: 66.66%; } .col-9{ width: 75%; } .col-10{ width: 83.33%; } .col-11{ width: 91.66%; } .col-12{ width: 100%; }