实现三栏布局的六种方式

本文转载（https://www.jianshu.com/p/3046eb050664）

六种布局方式：圣杯布局、双飞翼布局、Flex布局、绝对定位布局、表格布局、网格布局

一.圣杯布局

 

圣杯布局是指布局从上到下分为header、container、footer，然后container部分定为三栏布局。

基础HTML：　　

 1 <body>
 2     <div class="container">
 3         <!-- 优先渲染 -->
 4         <div class="center">
 5             center
 6         </div>
 7         <div class="left">
 8             left
 9         </div>
10         <div class="right">
11             right
12         </div>
13     </div>
14 </body>

基础CSS：

 1  .container {
 2      overflow: hidden;
 3  }
 4  .container > div {
 5      position: relative;
 6      float: left;
 7      height: 100px;
 8  }
 9  .center {
10      width: 100%;
11      background-color: red;
12  }
13  .left {
14      width: 200px;
15      background-color: green;
16  }
17  .right {
18      width: 200px;
19      background-color: blue;
20  }

对于container，给他设置一个overflow:hidden使其成为一个BFC（块级格式化上下文）。BFC的作用: 

1.消除Margin Collapse

2.容纳浮动元素

3.阻止文本换行

使三栏浮动，并相对定位，给左右两个容器设置200px的宽度，中间的容器设置100%的宽度。此时left和right被相对于父元素container宽度的100%的center挤到下面。

步骤：

1.发left放在center上方：由于浮动的原因，给left设置margin-left:100%即可使左侧栏浮动到center上方，并位于center左侧之上。

2.同样设置right margin-left:-200px,这里的长度等于right的长度。

3.这时center的两侧被left和right覆盖了，因此给container设置padding：0 200px

4.由于left和right也同时往中间缩，因为给left和right分别设置left:-200px;right:-200px,往两侧分别偏移自身的宽度去覆盖掉contaniner使用padding后的空白位置。

这时，圣杯布局就完成了，但是在拖到很小的时候布局会乱，一下是最终样式：

.container {
  overflow: hidden;
  padding: 0 200px;
}
.container > div {
  position: relative;
  float: left;
  height: 100px;
}
.center {
  width: 100%;
  background-color: red;
}
.left {
  width: 200px;
  background-color: green;
  margin-left: -100%;
  left: -200px;
}
.right {
  width: 200px;
  background-color: blue;
  margin-left: -200px;
  right: -200px;
}

二.双飞翼布局

 

 

这种布局方式同样分为header、container、footer。圣杯布局的缺陷在于center是在container的padding中的，因此宽度小的时候会出现混乱。

双飞翼布局给center部分报过了一个main，通过设置margin主动的把页面撑开。

基础HTML：

 1 <div class="container">
 2   <!-- 优先渲染 -->
 3   <div class="center">
 4     <div class="main">
 5       center
 6     </div>
 7   </div>
 8   <div class="left">
 9     left
10   </div>
11   <div class="right">
12     right
13   </div>
14 </div>

步骤1和步骤2同圣杯布局

区别：

第三步：给main设置margin：0 200px，同时设置overflow：hidden，使其成为一个BFC。

这时窗口宽度过小时就不会出现混乱的情况了，关键点在于内容部分是包裹在main中。

最终样式如下：

 1 .container {
 2   overflow: hidden;
 3 }
 4 .container > div {
 5   position: relative;
 6   float: left;
 7   height: 100px;
 8 }
 9 .center {
10   width: 100%;
11   background-color: red;
12 }
13 .left {
14   width: 200px;
15   background-color: green;
16   margin-left: -100%;
17 }
18 .right {
19   width: 200px;
20   background-color: blue;
21   margin-left: -200px;
22 }
23 .main {
24   height: 100%;
25   margin: 0 200px;
26   background-color: rosybrown;
27   overflow: hidden;
28 }

3.Flex布局

 

 

Flex布局是由CSS3提供的一种方便的布局方式。

基础HTML：同圣杯布局

步骤：

1.给container设置为一个flex容器：display：flex

2.center的宽度设置为width：100%，left和right设置为200px

3.为了不让left和right被center设置的100%压缩，给left和right设置flex-shrink：0（定义项目的缩小比例，默认为1，如果空间不足则项目缩小，如果有一项为0，其他为1，当空间不足时，前者不缩小）。

4.使用order属性给三个部分的DOM结构进行排序：left：order：1，center:order:2,right:order:3

flex布局是一种极其灵活的布局方式，最终样式如下：（flex存在浏览器兼容性）

 1 .container {
 2   display: flex;
 3 }
 4 .center {
 5   background-color: red;
 6   width: 100%;
 7   order: 2;
 8 }
 9 .left {
10   background-color: green;
11   width: 200px;
12   flex-shrink: 0;
13   order: 1;
14 }
15 .right {
16   background-color: blue;
17   width: 200px;
18   flex-shrink: 0;
19   order: 3;
20 }

4.绝对定位布局

 

基础HTML和圣杯布局一样。

步骤：

1.给container设置position：relative和overflow：hidden，因为绝对定位的元素的参照物为第一个position不为static的祖先元素。

2.left向左浮动，right向右浮动。

3.center使用绝对定位，通过设置left和right把两边撑开。

4.center设置top：0，bottom:0使其高度撑开。

.center {
    position: absolute;
    left: 200px;
    right: 200px;
    top: 0;
    bottom: 0;
}

这种方式的缺点是依赖于left和right的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。

5.table-cell 布局

 

 

表格布局的好处是能使三栏的高度统一。

基础HTML：

 1 <body>
 2     <div class="container">
 3         <div class="left">
 4             left
 5         </div>
 6         <!-- 这时的center要放在中间 -->
 7         <div class="center">
 8             center
 9         </div>
10         <div class="right">
11             right
12         </div>
13     </div>
14 </body>

步骤：

1.给三栏都设置表格单元：display：table-cell

2.left和right width:200px , center width:100%

3.这时left和right都被到两边去了，因此要分别设置min-widht：200px 确保不会被挤压。

最终样式：

 1   .container {
 2         overflow: hidden;
 3         position: relative;
 4     }
 5     .container > div {
 6         display: table-cell;
 7         height: 100%;
 8     }
 9     .center {
10         margin: 0 200px;
11         width: 100%;
12         background: red;
13     }
14     .left {
15         width: 200px;
16         min-width: 200px;
17         background-color: green;
18     }
19     .right {
20         width: 200px;
21         min-width: 200px;
22         background-color: blue;
23     }

这种布局方式能使得三栏的高度是统一的，但不能使center放在最前面得到最先渲染。

6.网格布局

 

 

网格布局可能是最强大的布局方式了，使用起来极其方便，但目前而言，兼容性不好。网格布局，可以将页面分割成过个区域，或者用来定义内部元素的大小，位置，图层关系。

基础HTML：

 1 <body>
 2     <div class="container">
 3         <div class="left">
 4             left
 5         </div>
 6         <!-- 这时的center要放在中间 -->
 7         <div class="center">
 8             center
 9         </div>
10         <div class="right">
11             right
12         </div>
13     </div>
14 </body>

步骤：

1.给container设置为display：grid

2.设置三栏的高度：grid-template-rows：100px

3.设置三栏的宽度，中间自适应，两边固定：grid-template-columns：200px auto 200px；

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

仅这四条样式命令就能完成三栏布局，可见网格布局之强大。

总结：

1.圣杯布局、双飞翼布局、flex布局的center高度不受两边影响，取决于其自身内容所占高度。

2.绝对布局center高度取决于两侧的高度(因为是通过设置top：0，bottom:0 把高度撑开的)

3.table-cell布局能让三栏高度统一，但是不能优先渲染center

4.网格布局也不能优先渲染center，但布局简单，存在兼容性问题。

5.flex布局也存在兼容性问题。

6.圣杯布局在页面缩小时会出现错乱问题。

　

posted @ 2019-06-09 17:13  lauzhishuai  阅读(3231)  评论(0)  编辑  收藏  举报