布局&栅格

2018-12-09 本文已影响0人 dosher_多舍

布局方式

先聊聊布局方面的知识，先列据一个实现三栏水平布局（左右定宽，中间自适应）案列，目前有圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局。

圣杯布局 & 双飞翼布局（都是三列左右栏固定中间栏自适应的网页布局）。

相同点：

三列布局，两边定宽，中间自适应；
中间栏要在浏览器中优先展示渲染；
允许任意列的高度最高；

差异点：

双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了

DOM节点结构：

圣杯布局：

<!-- html -->
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
<!-- css -->
<style>
.container {
    <!-- padding位置出左右盒子，main盒子宽度为父盒子宽度减padding -->
    padding: 0 300px 0 200px;
}
.left, .main, .right {
    <!-- 差异点，需设置定位使盒子左右移动位置 -->
    position: relative;
    <!-- 保持高度一致 -->
    min-height: 130px;
    <!-- 向左浮动 -->
    float: left;
}
.left {
    <!-- 左盒子向左偏移 -->
    left: -200px;
    <!-- 负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行 -->
    margin-left: -100%;
    background: green;
    width: 200px;
}
.right {
    <!-- 盒子向右偏移 -->
    right: -300px;
    margin-left: -300px;
    background-color: red;
    width: 300px;
}
.main {
    background-color: blue;
    width: 100%;
}
</style>

双飞翼布局：

<!-- html -->
<div class="container"> 
　　<div class="main">
    　　<div class="content">main</div> 
    </div>
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
<!-- css -->
<style type="text/css">
.left, .main, .right {
    <!-- 三者浮动 -->
    float: left;
    min-height: 130px;
    text-align: center;
}
.left {
    <!-- 利用 maigin-left 使盒子浮在 main 之上且左边位置 -->
    margin-left: -100%;
    background: green;
    width: 200px;
}

.right {
    <!-- 使盒子浮动于 main 之上右边位置 -->
    margin-left: -300px;
    background-color: red;
    width: 300px;
}
.main {
    background-color: blue;
    width: 100%;
}
.content{
    <!-- 左右外边距到需求位置 -->
    margin: 0 300px 0 200px;
}
</style>

双飞翼布局比圣杯布局多使用了一个div，少用大致4个css属性，比圣杯布局思路更直接和间接一点。

Flex弹性布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局， Flex 布局将成为现代浏览器的首选方案。

<!-- html -->
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
<!-- css -->
<style>
.container{
    <!-- 父盒子指定为flex布局方式，main、left和 right这三个子元素自动成为容器成员 -->
    display: flex;
    min-height: 130px;
}
.main{
    <!-- 填充空余空间，分配比列为 1（只有一个 item 的话多少都是一样） -->
    flex-grow: 1;
    background-color: blue;
}
.left{
    <!-- 可以通过Flex容器下的项目的属性“order”属性来设置排序位置，越小越靠前 -->
    order: -1;
    <!-- 设置固定宽度 -->
    flex-basis: 200px;
    background-color: green;
}
.right{
    <!-- 设置固定宽度 -->
    flex-basis: 300px;
    background-color: red;
}
</style>

绝对定位布局

绝对定位position: absolute使元素的位置与文档流无关，因此不占据空间。PS：这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

<!-- html -->
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
<!-- css -->
<style type="text/css">
.container{
    <!-- 父盒子设置相对定位设定位置 -->
    position: relative;
}
.main,.right,.left{
    top: 0;
    height: 130px;
}
.main{
    <!-- 偏移相对位置自适应 -->
    margin: 0 300px 0 200px;
    background-color: blue;
}
.right{
    <!-- 设置绝对定位 -->
    position: absolute;
    width: 300px;
    <!-- 设置右边位置 -->
    right: 0;
    background-color: red;
}
.left{
    <!-- 设置绝对定位 -->
    position: absolute;
    width: 200px;
    background-color: green;
    <!-- 设置左边位置 -->
    left: 0;
}
</style>

栅格布局

栅格

以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，通俗一点的就是在一个特定区域内划分出有规律的格子，并依靠这些格子进行有规律的版面布局。

栅格布局的作用

提高生产力 ；通过在网格的划分，元素更容易堆放而且在跨浏览器上面具有一致性，使我们可以专心的注意布局而不是兼容上。
具有灵活性 ；无论是什么样的布局，都可以拆分到粒度为一个网格的大小。
支持响应式设计 ；栅格系统本身能很好的和响应式设计结合在一起，或者说，我们的栅格系统是基于响应式设计的。

栅格布局的使用

现大多数UI框架设计上都会设计栅格化系统，比如bootstrap(jquery)、element(vue)、antD(react)等。

Bootstarp

Bootstrap 的栅格化系统采用将页面布局分为12列，再根据页面宽度采用预定义类控制模块占用宽度比例（宽度百分比）的思想，实现响应式布局。

工作规范

container (.container-fluid)> .row > .column ;采用容器内行 (row) 列 (column) 布局方式，.column 必须包含在 .row 中，.row 必须包含在 .container 中；.container 可以包含多个 .row，.row 可以包含多个 .column ；
展示的内容应当放置于 .column类中，并且只有.column可以作为.row的子元素；
使用类似于.row 、.col-xs-4等预定义类，快速创建栅格化布局；
栅格类适用于屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格化类，比如.col-md-*在.container-fludid宽度≥992px时生效；

媒介分类

Bootstrap将屏幕大小分为4类，主要关键点是媒体查询 @media。

/* xs 屏幕大小小于768px */
@media (max-width: 767px) { ... }

/* sm 屏幕最小宽度为768px */
@media (min-width: 768px) { ... }

/* md 屏幕最小宽度为992px */
@media (min-width: 992px) { ... }

/* lg 屏幕最小宽度为1200px */
@media (min-width: 1200px) { ... }

实例

<!-- 每一个col-md-* 必须在row之内 -->
<div class="row">
    <!-- col-md-* *值加起来等于 12 ，bootstarp栅格为 12 格-->
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
</div>
<div class="row row4">
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-6">.col-md-6</div>
</div>

elementUI

官网中对Layout 布局的定义是：通过基础的 24 分栏，迅速简便地创建布局.Element是基于vue.js开发的UI框架，其设计的栅格系统也与Bootstrap类似，可选flex方式满足现代浏览器，组件开发的目的都是为了解决基本布局定位的问题。

工作规范

主要组件为 Row 与 Col , 其中 Row 为行布局容器, Col 为列布局容器.

Row 是行布局容器,从功能上来说它的作用是控制内部元素的排列方式，提供 gutter 属性来指定每一栏之间的间隔，将 type 属性赋值为 flex，可以启用 flex 布局；
Col 是列布局容器,通过 Col 组件的 span 属性我们就可以自由地组合布局，提供 offset 属性指定分栏偏移的栏数等。

媒介分类

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：

xs  <768px
sm  ≥768px
md  ≥992px
lg  ≥1200px
xl  ≥1920px

实列

<el-row :gutter="20">
  <el-col :span="6">
    <div class="grid-content bg-purple"></div>
  </el-col>
  <el-col :span="6" :offset="6">
    <div class="grid-content bg-purple"></div>
  </el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6" :offset="6">
    <div class="grid-content bg-purple"></div>
  </el-col>
  <el-col :span="6" :offset="6">
    <div class="grid-content bg-purple"></div>
  </el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" :offset="6">
    <div class="grid-content bg-purple"></div>
  </el-col>
</el-row>
<!-- 五种尺寸 -->
<el-row :gutter="20">
  <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
    <div class="grid-content bg-purple"></div>
  </el-col>
</el-row>

antD

antD是Ant Design 团队基于 React 开发的一套企业级后台UI框架，其栅格整个设计建议区域按照 24 等分的原则进行划分

工作规范

支持 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序

通过 row 在水平方向建立一组 column（简写col）
你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素
栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用 .col-8 来创建
如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列

媒介规范

参照 Bootstrap 的响应式设计，预设六个响应尺寸：

xs   <576px
sm   ≥576px
md   ≥768px
lg   ≥992px
xl   ≥1200px
xxl  ≥1600px

实例

import { Row, Col } from 'antd';

ReactDOM.render(
  <div>
    <Row>
      <Col span={8}>col-8</Col>
      <Col span={8} offset={8}>col-8</Col>
    </Row>
    <Row>
      <Col span={6} offset={6}>col-6 col-offset-6</Col>
      <Col span={6} offset={6}>col-6 col-offset-6</Col>
    </Row>
    <Row>
      <Col span={12} offset={6}>col-12 col-offset-6</Col>
    </Row>
  </div>,
  mountNode
);

怎么实现一个基本栅格化？

1. 首先思考栅格的组成？

通常一个基本的栅格化系统包括：

container: 包裹整个栅格系统的容器
rows: 行
columns: 列
gutters: 各列的间的空隙

2. 创建容器 (The Container)

为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度max-width。

.grid-container {
    width : 100%;
    max-width : 1200px; 
}

3. 创建行 (The Row)

行元素用于防止里面的列（ column ）溢出到其他的行。通常会使用clearfix来清除浮动，因为我们是通过浮动来制作栅格系统的。


/*-- 清除浮动 -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
    clear:both;
}

4. 创建列 (The Column)

列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。

列的位置

Floats 、 inline-blocks 、 display-table 、 display-flex 他们都可以实现栅格布局中，列的定位。先选取使用float，如果列都是空的，浮动的列都会贴在彼此的顶部。为了避免这种情况：

[class*='col-'] {
    float: left;
    min-height: 1px; 
}

列的宽度

由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66

[class*='col-'] {
    float: left;
    min-height: 1px; 
    width: 16.66%; 
}

这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。

.col-1 {
    width: 16.66%; 
}
.col-2 {
    width: 33.33%; 
}
.col-3 {
    width: 50%; 
}
.col-4 {
    width: 66.664%;
}
.col-5 {
    width: 83.33%;
}
.col-6 {
    width: 100%;
}

列的间隙 (Column Gutters)

由于列的宽度单位是响应式的百分比(%)，我们给列元素的间距是固定单位的padding（px单位），为了避免复杂的计算，我们规定所有的盒子模型为 border-box 类型。

[class*='col-'] {
    /*-- 将栅格系统里的列元素设为 border box --*/
    box-sizing: border-box; 
    float: left;
    min-height: 1px; 
    width: 16.66%; 
    /*-- 设置间隙 --*/
    padding: 12px;
}

5. 增加响应式

为了适配更多分辨率的布局，我们只需改变列的宽度。

比如当屏幕宽度小于1000px时，为了布局更简洁，我们使用两倍列的宽度，一行六列变为了一行三列。

@media all and (max-width:1000px){
    .col-1{ width: 33.33%; }
    .col-2{ width: 50%; }
    .col-3{ width: 100%; }
    .col-4{ width: 100%; }
    .col-5{ width: 100%; }
    .col-6{ width: 100%; }

    .row .col-2:last-of-type{
        width: 100%; 
    }

    .row .col-5 ~ .col-1{
        width: 100%; 
    }
}

当屏幕宽度比1000px还小时

@media all and (max-width:700px){
    .col-1{ width: 50%; }
    .col-2{ width: 100%; }
    .col-3{ width: 100%; }
    .col-4{ width: 100%; }
    .col-5{ width: 100%; }
    .col-6{ width: 100%; }
}

6. 完成Completed!

<!DOCTYPE html>
<html lang="zn">

<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>
  <style>
    .grid-container {
      width: 100%;
      max-width: 1200px;
    }

    /*-- 使用 cleafix 清除浮动 -- */
    .row:before,
    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    [class*='col-'] {
      float: left;
      min-height: 1px;
      width: 16.66%;
      /*-- 设置列的左右间隙 -- */
      padding: 12px;
      box-sizing: border-box;
      background-color: #FFDCDC;
    }

    .col-1 { width: 16.66%; }
    .col-2 { width: 33.33%; }
    .col-3 { width: 50%; }
    .col-4 { width: 66.66%; }
    .col-5 { width: 83.33%; }
    .col-6 { width: 100%; }
    .outline,
    .outline * {
      outline: 1px solid #F6A1A1;
    }

    /*-- 列的额外内容样式 --*/
    [class*='col-']>p {
      background-color: #FFC2C2;
      padding: 0;
      margin: 0;
      text-align: center;
      color: white;
    }

    @media all and (max-width:1000px) {
      .col-1 { width: 33.33%; }
      .col-2 { width: 50%; }
      .col-3 { width: 100%; }
      .col-4 { width: 100%; }
      .col-5 { width: 100%; }
      .col-6 { width: 100%; }
      .row .col-2:last-of-type { width: 100%; }
      .row .col-5~.col-1 { width: 100%; }
    }

    @media all and (max-width:700px) {
      .col-1 { width: 50%; }
      .col-2 { width: 100%; }
      .col-3 { width: 100%; }
      .col-4 { width: 100%; }
      .col-5 { width: 100%; }
      .col-6 { width: 100%; }
    }

  </style>
</head>

<body>
  <div class="grid-container outline">
    <!-- col-1 -->
    <div class="row">
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
    </div>
    <!-- col-2 -->
    <div class="row">
      <div class="col-2"><p>col-2</p></div>
      <div class="col-2"><p>col-2</p></div>
      <div class="col-2"><p>col-2</p></div>
    </div>
    <!-- col-3 -->
    <div class="row">
      <div class="col-3"><p>col-3</p></div>
      <div class="col-3"><p>col-3</p></div>
    </div>
    <!-- col-4 -->
    <div class="row">
      <div class="col-4"><p>col-4</p></div>
      <div class="col-2"><p>col-2</p></div>
    </div>
    <!-- col-5 -->
    <div class="row">
      <div class="col-5"><p>col-5</p></div>
      <div class="col-1"><p>col-1</p></div>
    </div>
    <!-- col-6 -->
    <div class="row">
      <div class="col-6"><p>col-6</p></div>
    </div>
  </div>
</body>

</html>

>1000px

<1000px

<700px

布局&栅格

布局方式

圣杯布局 & 双飞翼布局（都是三列左右栏固定中间栏自适应的网页布局）。

Flex弹性布局

绝对定位布局

栅格布局

工作规范

媒介分类

实例

工作规范

媒介分类

实列

工作规范

媒介规范

实例

1. 首先思考栅格的组成？

2. 创建容器 (The Container)

3. 创建行 (The Row)

4. 创建列 (The Column)

5. 增加响应式

6. 完成Completed!

猜你喜欢

热点阅读