前端实现常见布局效果

元素堆叠效果

我们将使用HTML和CSS的position 属性来构建3个重叠的div。定位布局是给元素设置 position 属性从而控制元素显示在不规则的位置，偏向于单个元素定位操作。
（1）static 静态定位：页面元素定位的默认值，出现在正常流中；
（2）fixed 固定定位：元素相对于页面窗口是固定位置的，即使窗口滚动它也不会移动，fixed 属性是脱离文档流的
relative 相对定位：以自身作为参照物，对象不可层叠、不脱离文档流，通过 top, bottom, left, right 定位；
（3）absolute 绝对定位，选择最近一个设置有相对定位的父元素进行绝对定位，若没有则以 body 的坐标原点为参照。与其他元素重叠，脱离文档流，不占空间，通过 top, bottom, left, right 定位；
（4）sticky 粘性定位：基于滚动位置来定位，在 relative 和 fixed 之间切换，当超出页面目标区域时，就是 fixed 固定在目标位置，否则为 relative；元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效，否则其行为与相对定位相同。

<div class="rectangle_wrapper">
  <div class="rectangle1">Div 1</div>
  <div class="rectangle2">Div 2</div>
  <div class="rectangle3">Div 3</div>
</div>

.rectangle_wrapper {
  height: 50px;
  width: 200px;
  position: relative; //子div在父div上进行相对布局
}
.rectangle1,
.rectangle2,
.rectangle3 {
  position: absolute; //每个子div的位置是绝对的
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

元素水平（垂直）排列

弹性（flex）布局，弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
flex-direction：控制水平还是垂直

<div class="flexbox">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
 .flexbox {
            width: 500px;
            background: bisque;
            display: flex;
            flex-direction: row;    
            justify-content: space-around;
            align-items: center;
            padding: 10px;
        }
.flexbox div {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
        border: 1px solid #fefefe;
        margin: 5px;
    }

网格布局

网格布局是二维的，包含了行和列，与弹性布局相似

<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
</div>

.box {
        border: solid 5px gray;
        display: inline-grid;
        grid-template-rows: repeat(3, 100px);
        grid-template-columns: repeat(3, 100px);
    }

    .box div {
        background: burlywood content-box;
        padding: 10px;
        border: 1px black dashed;
        text-align: center;
        line-height: 80px;
        color: #fff;
    }

Element的行列布局

详细介绍：https://element.eleme.io/#/zh-CN/component/layout
通过基础的 24 分栏，迅速简便地创建布局。
将 type 属性赋值为 ‘flex’，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>