你的位置:首页 > 网页设计

[网页设计]简单的栅格系统


简单的栅格系统-流式布局(类似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">    <!--一列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%;}