简单的栅格系统
簡單的柵格系統-流式布局(類似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（默認值），標準盒模型。元素尺寸計算公式：
width = 內容的寬度，height = 內容的高度
寬度和高度都不包含內容的邊框（border）和內邊距（padding）。 - 當 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%; }?
總結
- 上一篇： HTTP/1.1 Range和Conte
- 下一篇： docker 容器中不支持中文的解决方法