# 布局方式

1、固定宽度布局：为网页设置一个固定的宽度，通常以 px 做为长度单位，常见于 PC 端网页。

2、流式布局：为网页设置一个相对的宽度，通常以百分比做为长度单位。

3、栅格化布局：将网页宽度人为的划分成均等的长度，然后排版布局时则以这些均等的长度做为度量单位。

4、响应式布局：通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的内容，一般情况下是检测设备屏幕的宽度来实现。（原理：媒体查询，即通过查询 screen 的宽度来指定某个宽度区间的网页布局）

# 栅格系统

栅格系统用于通过一系列的行（row）与列（col-*）的组合来创建页面布局。bootstrap 的栅格系统最大分为 12 份。

# 实现方式

1、纯伸缩布局 flex 方式：这种方式对古老的 IE 浏览器支持性不是很好，所以一般出现在技术比较激进的框架上，如Bootstrap@4.0，Foundation，基于 React 的 antDesign，基于 Vue 的 ElementUI 等等。

/*
 * bootstrap@4.0版本  排版
 */
.row {
  display: flex;
  flex-wrap: wrap;
}
.col-1 {
  flex: 0 0 8.333333%;
}
.col-2 {
  flex: 0 0 16.666667%;
}
.col-3 {
  flex: 0 0 25%;
}
.col-4 {
  flex: 0 0 33.333333%;
}
.col-5 {
  flex: 0 0 41.666667%;
}
.col-6 {
  flex: 0 0 50%;
}
.col-7 {
  flex: 0 0 58.333333%;
}
.col-8 {
  flex: 0 0 66.666667%;
}
.col-9 {
  flex: 0 0 75%;
}
.col-10 {
  flex: 0 0 83.333333%;
}
.col-11 {
  flex: 0 0 91.666667%;
}
.col-12 {
  flex: 0 0 100%;
}

.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}

2、浮动方式：这种方式是为了向下兼容 IE 低版本浏览器，比如用处很广的Bootstrap@3.x版本。

/*
 * bootstrap@3.x版本 排版
 */
[class |= col] { float: left; }
.col-md-1 { width: 8.33333333%; }
.col-md-2 { width: 16.66666667%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.33333333%; }
.col-md-5 { width: 41.66666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.33333333%; }
.col-md-8 { width: 66.66666667%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.33333333%; }
.col-md-11 { width: 91.66666667%; }
.col-md-12 { width: 100%; }

[class |= col] {
    position: relative;
}
/* 向右移动指定的栅格数 */
.col-md-pull-1 { right: 8.33333333%; }
.col-md-pull-2 { right: 16.66666667%; }
.col-md-pull-3 { right: 25%; }
...
/* 向左移动指定的栅格数 */
.col-md-push-1 { left: 8.33333333%; }
.col-md-push-2 { left: 16.66666667%; }
.col-md-push-3 { left: 25%; }
...

3、伸缩和行内结合的方式：雅虎的 Pure。

# 常见居中（水平、垂直）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <style>
    .parent {
      width: 100px;
      height: 100px;
      border: 1px solid #d00;
      margin-bottom: 20px;
    }

    .child {
      width: 50px;
      height: 50px;
      border: 1px solid #0f0;
    }

    .p1 {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /* 方案一 */
    .p11 {
      position: relative;
    }

    .p12 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    /* 方案二 */
    .p21 {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    .p22 {
      display: inline-block;
    }

    /* 方案三 */
    .p31 {
      position: relative;
      margin-top: 20px;
    }

    .p32 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -25px;
      margin-top: -25px;
    }

    /* 方案四 */
    .p41 {
      display: table-cell;
      vertical-align: middle;
    }

    .p42 {
      margin: auto;
    }

    /* 方案五 */
    .p51 {
      position: relative;
      margin-top: 20px;
    }

    .p52 {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }
  </style>
  <body>
    <div class="p1 parent">
      <div class="p2 child"></div>
    </div>
    <div class="p11 parent">
      <div class="p12 child"></div>
    </div>
    <div class="p21 parent">
      <div class="p22 child"></div>
    </div>
    <div class="p31 parent">
      <div class="p32 child"></div>
    </div>
    <div class="p41 parent">
      <div class="p42 child"></div>
    </div>
    <div class="p51 parent">
      <div class="p52 child"></div>
    </div>
  </body>
</html>

← 正则 Require解读 →