CSS实现经典的三栏布局

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

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

 <div class="container">
     <div class="left">左</div>
     <div class="right">右</div>
     <div class="main">中</div>
 </div>

 body,html{
     height: 100%;
     padding:;
     margin:;
    overflow: hidden;
 }
     /*左右进行绝对定位*/
 .left,.right{
     position: absolute;
     height:100%;
     top:;
 }
 .left{
     left:;
     width: 100px;
     background: red;
 }
 .right{
     right:;
     width: 100px;
     background: blue;
 }
     /*中间用margin空出左右元素所占的空间*/
 .main{
    height:100%;
    margin: 0 100px 100px 0;   /* 也可让 position的 left和right分别为100px;*/
    background: yellow;
 }
      

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

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:;
}

4  .  table 布局

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

 .container {
    display: table;
 }
 
 .container > div {
   display: table-cell;
 }

5 . grid网格布局

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

 .container {
   display: grid;
   grid-template-rows: 100px;
   grid-template-columns: 100px auto 100px;
 }

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

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

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

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

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

参考

<div class="container">
　　<div class="main">main</div>
　　<div class="left">left</div>
　　<div class="right">right</div>
</div>

   .container {
         padding: 0 150px 0 100px;
     }
     .left, .main, .right {
         position: relative;
         min-height: 100px;
         float: left;
     }
     .left {
         left: -100px;
         margin-left: -100%;
         background: green;
         width: 100px;
     }
     .right {
         right: -150px;
         margin-left: -150px;
         background-color: red;
         width: 100px;
     }
     .main {
         background-color: blue;
         width: 100%;
     }

思路： 圣杯布局用到了浮动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给左右栏占位

 <div class="container">
 　　<div class="main">
     　　<div class="content">main</div>
     </div>
 　　<div class="left">left</div>
 　　<div class="right">right</div>
 </div>

 .left, .main, .right {
         float: left;
         min-height: 100px;
         text-align: center;
     }
     .left {
         margin-left: -100%;
         background: green;
         width: 100px;
     }
 
     .right {
         margin-left: -150px;
         background-color: red;
         width: 150px;
     }
     .main {
         background-color: blue;
         width: 100%;
     }
     .content{
         margin: 0 150px 0 100px;
     }

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