css的一些布局

css中的水平垂直居中布局：

<div class="father">
    <div class="child">

    </div>
  </div>

标签层级关系

1.通过position配合margin

.father {
      width: 800px;
      height: 800px;
      background-color: cornsilk;
      position: relative;
    }

    .child {
      width: 150px;
      height: 150px;
      background-color: darkcyan;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -75px 0 0 -75px;
    }

.father {
      width: 800px;
      height: 800px;
      background-color: cornsilk;
      position: relative;
    }

    .child {
      width: 150px;
      height: 150px;
      background-color: darkcyan;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

2.通过position配合transform

.father {
      width: 800px;
      height: 800px;
      background-color: cornsilk;
      position: relative;
    }

    .child {
      width: 150px;
      height: 150px;
      background-color: darkcyan;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

3.使用flex弹性盒子

.father {
      width: 800px;
      height: 800px;
      background-color: cornsilk;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .child {
      width: 150px;
      height: 150px;
      background-color: darkcyan;
      display: inline-block;
    }

css中的三栏其中左右两栏宽度固定，中间栏自适应

<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
  </div>

标签层级关系

1.使用flex弹性盒子

.box {
      width: 1300px;
      height: 400px;
      background-color: cornsilk;
      display: flex;
    }

    .left {
      width: 300px;
      height: 400px;
      background-color: red;
    }

    .center {
      flex: 1;
      height: 400px;
      background-color: rgb(91, 218, 218);
    }

    .right {
      width: 450px;
      height: 400px;
      background-color: blue;
    }

2.使用float方法

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
  </div>

标签层级关系，注意中间栏显示的标签要放到最后面

.box {
      width: 1300px;
      height: 400px;
      background-color: cornsilk;
    }

    .left {
      float: left;
      width: 300px;
      height: 400px;
      background-color: red;
    }

    .center {
      height: 400px;
      margin: 0 310px;
      background-color: rgb(91, 218, 218);
    }

    .right {
      float: right;
      width: 300px;
      height: 400px;
      background-color: blue;
    }

3.使用position定位法

.box {
      width: 1300px;
      height: 400px;
      background-color: cornsilk;
      position: relative;
    }

    .left {
      width: 300px;
      height: 400px;
      background-color: red;
      position: absolute;
      left: 0;
    }

    .center {
      height: 400px;
      margin: 0 310px;
      background-color: rgb(91, 218, 218);
    }

    .right {
      width: 300px;
      height: 400px;
      background-color: blue;
      position: absolute;
      right: 0;
    }