常见布局效果实现方案

盒子居中

  
    

      

    
  
1
2
3
4
5

方案1：flex布局

需不需要垂直居中就自己看需求而定，这里主要是水平居中

     .father {
        width: 100%;
        // height: 600px;
        background-color: #f5f5f5;
        display: flex;
        // align-items: center; 垂直（侧轴）方向的居中
        justify-content: center;  
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: skyblue;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13

方案2：定位 + tramsform

子绝父相：子盒子相对父盒子向下和向右走父盒子宽度的50%；然后在通过translate返回走自身的50%

      .father {
        width: 100%;
        height: 600px;
        background-color: #f5f5f5;
        position: relative;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: skyblue;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

方案3：定位 + margin

子绝父相：但是top/bottom/left/right都为0；通过margin:auto使其居中

      .father {
        width: 100%;
        height: 600px;
        background-color: #f5f5f5;
        position: relative;
      }
      .child {
        height: 200px;
        width: 200px;
        background-color: skyblue;
        margin: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

左侧固定宽度，右侧自适应

    

      
左边
      
右边
    
1
2
3
4

方法1：float+overflow

      .content {
        height: 300px;
        width: 100%;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        float: left;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        overflow: hidden;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

方法2：float+calc

宽度是通过calc来定，位置通过浮动的特点

      .content {
        height: 300px;
        width: 100%;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        float: left;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        width: calc(100% - 200px);
        float: left;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

方法3：inline-block + calc

inline-block,两个盒子的宽度刚好为100%，右边calc动态变化宽度

      .content {
        height: 300px;
        width: 100%;
        font-size: 0;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        display: inline-block;
        vertical-align: top;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        width: calc(100% - 200px);
        display: inline-block;
        vertical-align: top;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

方法4：flex

flex:1 剩下宽度的都分给右边的盒子

      .content {
        display: flex;
        height: 300px;
        width: 100%;
      }
      .left {
        height: 100%;
        width: 200px;
        background-color: pink;
      }
      .right {
        flex: 1;
        background-color: skyblue;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

方法5：position+margin

左边脱离标准流不占位，右边宽度正好利用块级盒子的特点，margin不仅让盒子流出左边空白，宽度页刚好减去了margin值

      .content {
        height: 300px;
        width: 100%;
        position: relative;
      }
      .left {
        background-color: pink;
        height: 100%;
        width: 200px;
        position: absolute;
      }
      .right {
        background-color: skyblue;
        height: 100%;
        margin-left: 200px;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16