圣杯布局、双飞翼布局、flex布局和绝对定位布局的几种经典布局的具体实现示例

题目要求：针对如下DOM结构，编写css，实现三栏水平布局，其中left、right分别位于左右两侧，left宽度为200px，right宽度为300px，main在中间，宽度自适应

要求：允许增加额外的DOM节点，但不能修改现有的节点顺序

 

      
main
      
left
      
right

圣杯布局和双飞翼布局针对的都是三列布局，左右栏固定，中间自适应的网页布局。布局要求：

• 三列布局，中间宽度自适应，两边定宽
• 中间栏要在浏览器中优先展示渲染
• 允许任意列的高度最高

1. 圣杯布局

(1) 设置基本样式

  .main{
      background-color: blue;
  }
  .left{
      width: 200px;
      background-color: red;
  }
  .right{
      width: 300px;
      background-color: aqua;
  }

如下所示：

效果图

(2) 设置container的padding，使之空出左右的空间， 效果如图：

.container{
    padding: 0 300px 0 200px;
}

效果图

(3) 将main、left、right设置左浮动，并设置高度

  .main, .left, .right{
      float: left;
      min-height: 100px
  }

如果出现以下情况：

效果图

则需要设置main的宽度为100%

.main{
    wdith: 100%;
}

将main撑开。如图所示：

效果图

（4）设置left和right的margin-left
明显圣杯布局left、main、right是依次并排的，但是目前的效果是left和right都在下一行，这里使用的技巧就是负的外边距，margin-left

.left{
  margin-left: -100%
}
.right{
  margin-left: -300px;
}

负的外边距让元素沿着文档流向左移动。如果数值比较大就会移动到上一行。
设置left部分的margin-left为-100%，就会使得left往左移动一个整行的宽度，一直移到上一行的开头，并且覆盖了main的部分。left上移之后，right就是处于当前行的开头位置。这个时候设置right部分的margin-left为负宽度，right就会移动到上一行的末尾。

效果图.png

（5）接下来只要使left和right分别挪到这两个位置就可以。可以使用相对定位移动

.left{
  position: relative;
  left: -200px;
}
.right{
  position: relative;
  right: -300px;
}

最终效果图

完整代码如下：

    
    



    

        
main
        
left
        
right
    

2. 双飞翼布局

圣杯布局和双飞翼布局解决问题的方案前一部分是相同的，不同之处在于解决“中间栏div不背遮挡”的思路不一样。他的html结构发生了变化，添加了一个元素。

 

        
main
    
    
left
    
right

解决的思路是content添加外边距。代码如下：

   
   




   

       
main
   
   
left
   
right

双飞翼布局比圣杯布局多使用了一个div但是少用了4个css属性，比圣杯布局更加直接简洁。双飞翼比圣杯布局多创建一个div，但是不用相对布局

3. Flex布局

任何一个容器都可以指定为Flex布局，flex布局将成为未来布局的首选方案
(1) 首先将container设置成一个flex容器

.container{
  display: flex;
  min-height: 100px;
}

那么container里面的三个子元素自动成为容器成员，即成为flex项目，简称为项目
(2) 对这三个项目的初始设置（颜色等）

效果图

(3) 通过order进行布局
由于元素的顺序不能更改，从上图可知三个项目的排序不一样了。为了使left排在第一个我们可以通过设置 flex容器下的order属性来更改顺序。

.left{
  order: -1;
}

对order属性来说，越小排序越靠前，默认为0。

效果图

(4) 设置main的flex-grow属性，撑满剩余空间

.main{
 flex-grow: 1
}

效果图

(5) 用flex-basic设置left和right的宽度

.left{
 flex-basic: 200px;
}
.right{
 flex-basic: 300px;
}

最终效果图

完整代码如下：

    
    



    

        
main
        
left
        
right
    

4. 绝对定位布局

绝对定位布局和相对定位布局不同。绝对定位元素会脱离文档流，不占据空间。相对定位元素实际上被当作是普通文档流的一部分，因为它是根据自身在普通文档流的位置进行定位的。

因为绝对定位的元素脱离的文档流，所以可以覆盖页面上的其他元素。并且通过设置z-index来控制他们的堆叠顺序。

可以通过position: absolution+margin来实现三栏布局。
具体代码实现如下：

    
    



    

        
main
        
left
        
right