实现效果： 左右栏定宽，中间栏自适应 (有时候是固定高度)

 

1 . 绝对定位布局：position + margin

1 
     
      2     
      
       左
      
3     
      
       右
      
4     
      
       中
      
5 
     

1 body,html{ 2     height: 100%; 3     padding: 0; 4     margin: 0; 5    overflow: hidden; 6 } 7     /*左右进行绝对定位*/ 8 .left,.right{ 9     position: absolute;10     height:100%;  11     top: 0;12 }13 .left{14     left: 0;15     width: 100px;16     background: red;17 }18 .right{19     right: 0;20     width: 100px;21     background: blue;22 }23     /*中间用margin空出左右元素所占的空间*/24 .main{25    height:100%; 26    margin: 0 100px 100px 0;   /* 也可让 position的 left和right分别为100px;*/27    background: yellow;28 }29

缺点: 如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况

 

2 . 浮动布局：  float + margin

方法类似 position, 改成 float: left 和 float: right即可

.left {
     float: left;}.right {
     float: right;}.main {
     margin: 0 100px;   // 如不设置margin, main部分将会占满整个父容器}

 

3 . flex布局

　　

.container {
     display: flex;}.main {
     flex: 1;}

 

4  .  table 布局

原理： 将父容器当作表格，子容器当作表格的单元格。

1 .container {2    display: table;  3 }4 5 .container > div {6   display: table-cell;7 }

 

5 . grid网格布局

　　父容器设置为网格，网格的子元素行高rows为100px; 网格子元素列宽分别为 100px auto 100px;

1 .container {2   display: grid;3   grid-template-rows: 100px;4   grid-template-columns: 100px auto 100px;  5 }

 

6. 圣杯布局 （想象成圣杯的主体和两只耳朵）

　　圣杯布局是2006年提出的布局模型概念，在国内由淘宝UED工程师改进并传播， 布局要求：

　　1 ） 三列布局， 中间宽度自适应，两边定宽

　　2 ） 中间栏要在浏览器中优先渲染

　　3 ） 允许任意列的高度最高

     
       　　
      
       main
      
 　　
      
       left
      
 　　
      
       right
      
 
     

1   .container { 2         padding: 0 150px 0 100px; 3     } 4     .left, .main, .right { 5         position: relative; 6         min-height: 100px; 7         float: left; 8     } 9     .left {10         left: -100px;11         margin-left: -100%;12         background: green;13         width: 100px;14     }15     .right {16         right: -150px;17         margin-left: -150px;18         background-color: red;19         width: 100px;20     }21     .main {22         background-color: blue;23         width: 100%;24     }

思路： 圣杯布局用到了浮动float、负边距、相对定位relative，不添加额外标签

1 . 父容器设置内边距，供两边子容器占位 padding: 0 100px 0 150px;

2 . 所有子容器向左浮动 float: left

3 . 设置左右子容器的负外边距，使所有子容器同一行 .left { margin-left: -100%} .right {margin-left: -150px;} , 此时会有部分重叠

4 . 使用相对定位分别移动左右子容器到父容器的左右内边距留白部分 position: relative; left: -100px;  / position: relative; right: -150px;

 

 

7. 双飞翼布局(想象成鸟的身体和两只翅膀)

　　1 )　双飞翼布局是对圣杯布局基础上进行修改 ， 将原本的内边距padding 留白改成在自适应栏内部新增DOM节点， 并设置其外边距margin

　　2 )   然后再对左右栏的左外边距设置为负值。比圣杯布局少了position相对定位

　　3 )  相比圣杯布局， 中间栏内容不会被“遮挡”, 圣杯布局使用中间栏的padding给左右栏占位，双飞翼布局使用中间栏子元素的margin给左右栏占位 

1 
     
       2 　　
      
       3     　　
       
        main
       
 4     
      
5 　　
      
       left
      
 6 　　
      
       right
      
 7 
     

1 .left, .main, .right { 2         float: left; 3         min-height: 100px; 4         text-align: center; 5     } 6     .left { 7         margin-left: -100%; 8         background: green; 9         width: 100px;10     }11 12     .right {13         margin-left: -150px;14         background-color: red;15         width: 150px;16     }17     .main {18         background-color: blue;19         width: 100%;20     }21     .content{22         margin: 0 150px 0 100px;23     }

 

基本思路已经理清楚，可以在实践中看效果。