當前位置：首頁 >

简单的栅格系统

發布時間：2025/3/17 32 豆豆

生活随笔收集整理的這篇文章主要介紹了简单的栅格系统小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

簡單的柵格系統-流式布局(類似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 + 內容的高度
    此時外邊距和邊框將會包括在盒子中。

最終如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"><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><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><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><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 容器中不支持中文的解决方法