布局总结记录：居中、整页、多列、圣杯、双飞翼等布局看过来！

布局大致划分为以下几种，

浮动布局：float：left/right
定位布局：position：relative/absolute/fixed
表格布局：table
弹性布局：display：flex/inline-flex
栅格布局：display:grid/inline-grid
响应式布局：em/rem/vw/vh/vmin/vmax、媒体查询

在这诸多的布局中，比较喜欢和实用的是浮动布局、定位布局和弹性布局，表格布局实用较少，因为稍有改动就会引起整个table的回流，对于栅格布局目前兼容性不是很好。后面主要介绍常见的实用的布局如居中布局、整页布局、多列布局、圣杯布局和双飞翼布局，下面就开始上代码，大快朵颐吧！

居中布局：要求水平居中和垂直居中

案例1：已知外层盒宽高和内层盒宽高

<div class="outer">
    <div class="center"></div>
</div>

方法一：使用margin间距

 1  <style>
 2       .outer{
 3           width: 200px;
 4           height: 200px;
 5           background: #ece6ae;
 6           overflow: hidden;
 7       }
 8         .center{
 9             width: 50px;
10             height: 50px;
11             background: #99478d;
12             margin: 75px auto;
13         }
14 </style>

方法2：使用行内块元素属性text-algin:center,line-height

 1   <style>
 2       .outer{
 3           width: 200px;
 4           height: 200px;
 5           background: #ece6ae;
 6           text-align: center;//水平居中
 7           line-height: 200px;//垂直居中
 8           font-size: 0;//消除居中差异
 9       }
10         .center{
11             display: inline-block;//将子元素变为行内款元素
12             width: 50px;
13             height: 50px;
14             vertical-align: middle;//调整垂直居中
15             background: #99478d;
16         }
17     </style>

方法三：将内层元素变为表格元素，使用属性 vertical-align: middle；

 1     .outer{
 2           width: 200px;
 3           height: 200px;
 4           background: #ece6ae;
 5           display: table-cell;
 6           vertical-align: middle;
 7       }
 8         .center{
 9             width: 50px;
10             height: 50px;
11             background: #99478d;
12             margin: 0 auto;
13         }

方法三：定位position

 1 .outer{
 2           width: 200px;
 3           height: 200px;
 4           background: #ece6ae;
 5           position: relative;
 6       }
 7         .center{
 8             width: 50px;
 9             height: 50px;
10             background: #99478d;
11             position: absolute;
12             left: 50%;
13             top: 50%;
14             margin: -50px 0 0 -50px;
15         }

方法四：使用flex最简洁的代码来了

 1  .outer{
 2           width: 200px;
 3           height: 200px;
 4           background: #ece6ae;
 5           display: flex;
 6           justify-content: center;
 7           align-items: center;
 8       }
 9         .center{
10             width: 50px;
11             height: 50px;
12             background: #99478d;
13         }

除去宽高背景色代码，最最简洁的代码，有木有！！！

1  .outer{
2       display: flex;
3    } 
4  .center{
5      margin: auto;
6    }

案例2：已知外层盒宽高，内层盒为行内元素且宽高不详，上面的方法一二三统统不能实现了，喔豁！！！

别急不是还有方法四flex的两种写法来救场嘛，开始表演

<div class="outer">
    <span class="center">哈哈哈</span>
</div>

.outer{
          width: 200px;
          height: 200px;
          background: #ece6ae;
          display: flex;
      }
 .center{
            margin: auto;
            background: #997890;
 }

.outer{
    width: 200px;
    height: 200px;
    background: #ece6ae;
    display: flex;
    justify-content: center;
    align-items: center;
 }
.center{
   background: #997890;
}

整页即全屏布局：分为上中下，顶部、底部、主体三部分，三部分占满全屏，顶部和底部固定主体自适应。

方法一：使用calc属性计算（注意块元素宽高的继承）

 1 <style>
 2         body,html{
 3             width: 100%;
 4             height: 100%;
 5         }
 6         header{
 7             height: 50px;
 8             background: #8e5b8c;
 9         }
10         main{
11             height: calc(100% - 100px);
12             background: aquamarine;
13         }
14         footer{
15             height: 50px;
16             background: #721e8e;
17         }
18 </style>
19 <body>
20     <header></header>
21     <main></main>
22     <footer></footer>
23 </body>

View Code

方法二：使用position定位

<style>
        body,html{
           position: relative;
        }
        header{
            position: absolute;
            top: 0;
            height: 50px;
            width: 100%;
            background: #8e5b8c;
        }
        main{
            position: absolute;
            top: 50px;
            bottom: 50px;
            width: 100%;
            background: aquamarine;
        }
        footer{
            position: absolute;
            bottom: 50px;
            width: 100%;
            height: 50px;
            background: #721e8e;
        }
</style>
<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

View Code

方法三：使用flex

<style>
        .full{
            display: flex;
            flex-direction: column;
            width: 300px;
            height: 300px;
        }
        header {
            height: 50px;
            background-color: #f66;
        }
        footer {
            height: 50px;
            background-color: #66f;
        }
        main {
            flex: 1;
            background-color: #3c9;
        }
</style>
<div class="full">
    <header></header>
    <main></main>
    <footer></footer>
</div>

View Code

多列布局：两列布局，一侧固定宽度，另一侧宽度自适应；三列布局，分为左中右，中间内容自适应，两侧固定宽度；其他均等宽度多列布局等；

两列布局

方法一：使用间距和浮动

<style>
        .two-column{
          width: 300px;
            height: 300px;
        }
        .left{
            width: 50px;
            height: 100%;
            float: left;
            background: aquamarine;
        }
        .right{
            height: 100%;
            margin-left: 50px;
            background: #994197;
        }
 </style>
<div class="two-column">
    <div class="left"></div>
    <div class="right"></div>
</div>

View Code

方法二：BFC不会与float box重叠原理，使用float、overflow

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .two-column{
 7           width: 300px;
 8             height: 300px;
 9         }
10         .left{
11             width: 50px;
12             height: 100%;
13             float: left;
14             background: aquamarine;
15         }
16         .right{
17             overflow: hidden;
18             height: 100%;
19             background: #994197;
20         }
21 </style>
22 <div class="two-column">
23     <div class="left"></div>
24     <div class="right"></div>
25 </div>

View Code

方法三：使用flex，代码更为简洁

 1  <style>
 2         .two-column{
 3             display: flex;
 4             width: 300px;
 5             height: 300px;
 6         }
 7         .left {
 8             width: 50px;
 9             background-color: #f66;
10         }
11         .right {
12             flex: 1;
13             background-color: #66f;
14         }
15 </style>
16 <div class="two-column">
17     <div class="left"></div>
18     <div class="right"></div>
19 </div>

View Code

三列和两列的布局是一个道理的，这里也不多赘述了，贴贴多列并且均列的布局

方法一：使用flex

 <style>
        .more-column{
            display: flex;
            width: 300px;
            height: 300px;
        }
        .column{
            flex: 1;
        }
        .column:nth-child(1){
            background: aquamarine;
        }
        .column:nth-child(2){
            background: aqua;
        }
        .column:nth-child(3){
            background: olivedrab;
        }
        .column:nth-child(4){
            background: #3a806b;
        }
    </style>
<div class="more-column">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

View Code

方法二：将块元素变为行内元素

<style>
        .more-column{
            width: 300px;
            height: 300px;
        }
        .column{
            width: 25%;
            height: 100%;
            display: inline-block;
            margin-left: -5px;
        }
       
</style>
<div class="more-column">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

View Code

方法三：使用浮动

 1 <style>
 2         .more-column{
 3             width: 300px;
 4             height: 300px;
 5             overflow: hidden;
 6         }
 7         .column{
 8             float: left;
 9             width:calc(100% / 4);
10             height: 100%;
11         }
12     </style>
13 
14 <div class="more-column">
15     <div class="column"></div>
16     <div class="column"></div>
17     <div class="column"></div>
18     <div class="column"></div>
19 </div>

View Code

圣杯和双飞翼是一个布局，只是名字叫法不一样，哈哈被套路了吧！

 1 <style>
 2         body{
 3             display: flex;
 4             min-height: 100vh;
 5             flex-direction: column;
 6         }
 7         header, footer {
 8             flex: 1;
 9         }
10         .main{
11             display: flex;
12             flex: 1;
13         }
14         .center{
15             flex: 1;
16         }
17         .left,.right{
18             flex: 0 0 12em;
19         }
20 </style>
21 <body>
22 <header>header</header>
23 <div class="main">
24     <div class="left">left</div>
25     <div class="center">center</div>
26     <div class="right">right</div>
27 </div>
28 <footer>footer</footer>
29 </body>

佳物不独来，万物同相携。