简单的栅格系统-流式布局(类似bootstrap的栅格系统)
-
什么是流式布局
- 所谓流式布局，就是页面元素的宽度按照屏幕进行适配调整。简单来说，就是 HTML 页面中的元素会根据分辨率的不同而变化大小，但位置并不会有任何变化。
- 这种布局的主要问题就是，如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
-
创建流式布局
- 流式布局通常被分为 12 列。将 HTML 页面的宽度设置为 100%，这样 HTML 页面会根据浏览器窗口大小的变化而自动伸缩。
- 计算每列所占的百分比：
100% / 12 列 = 8.33% - 根据以上的计算结果，设置 CSS 的 class：
.col-1 { 8.33%;} .col-2 { 16.66%;} .col-3 { 25%;} .col-4 { 33.33%;} .col-5 { 41.66%;} .col-6 { 50%;} .col-7 { 58.33%;} .col-8 { 66.66%;} .col-9 { 75%;} .col-10 { 83.33%;} .col-11 { 91.66%;} .col-12 { 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%; }