双飞翼布局、圣杯布局、定位方法布局、flex布局（三栏布局的多种实现方式）--html基本知识（学习笔记）

最近，对常用的三栏布局的实现方式，进行了总结回顾，在此mark一下。

    常见的三栏布局方式，是将一个网页分为左列、中列和右列三部分，并且我们要得到的效果是：左列和右列宽度恒定，中间列的宽度根据游览器窗口的大小自适应。在本文中，我们用了四种方式来实现，分别为双飞翼布局、圣杯布局、定位方法布局和flex布局。

    在游览器的显示效果如下所示：

一、双飞翼布局

    （1）布局样式：

 

       
header1
       
 
 

        
content1
        
left1
        
right1
 
 
footer1
 

        注意：在整个的DOM结构中，content1中间的放在最前面。

（2）style样式

*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
  .left1,.right1,.content1{ float: left; min-height: 200px;}
  .left1,.right1{ width: 200px;}
  .left1{ background: darkgreen; margin-left: -100%;}
  .right1{ background: cornflowerblue; margin-left: -200px;}
  .content1{width: 100%; background: darkgoldenrod; padding: 0 200px; box-sizing: border-box;}

①使用float:left，让left、right和content三部分浮动起来；②设置content的宽度为width:100%，这样content将占据article父元素的全部宽度，以达到自适应的形式；③实现左列和右列固定宽度，采用了margin负值；④.left{width:200px;margin-left:-100%;}，固定左列宽度为200px，当margin-left:-100%时，左列会脱离自己所在的行，向上一行浮动；⑤定义右列的浮动偏移（margin负值），.right{width:200px;margin-left:-200px;}。

    注意：content使用box-sizing,去节省了一个标签。

   （3）双飞翼布局的优点：

    ①兼容性好，兼容主流的游览器，包括IE6（淘宝首页也运用了这种兼容性很好的双飞翼布局）；

    ②因为在DOM中content1在三列结构的最前面，所以可以实现主要内容的优先加载。

二、圣杯布局

    （1）布局样式：

 

        
header2
       
  
  

       
content2
       
left2
       
right2
  
  
footer2

      注意：在整个的DOM结构中，content2中间的放在最前面。

    （2）style样式

*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
.content2,.left2,.right2{ position: relative; float: left; min-height: 200px;}
.article2{padding: 0 200px; }
.left2,.right2{ width: 200px;}
.left2{ background: darkgreen; margin-left: -100%; left: -200px;}
.right2{ background: cornflowerblue; margin-left: -200px; right: -200px;}
.content2{width: 100%; background: darkgoldenrod; }

    ①圣杯布局是一种相对布局，首先设置父元素article2的位置，.article2{padding:0 200px;};

    ②将主体部分的三个子元素都设置左浮动，.content2,.left2,.right2{float:left;};

    ③设置content2的宽度为width:100%,让其单独占满一行；

    ④设置left2和right2负的外边距（负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行），设置left部分的margin-left为-100%，就会使left向左移动一整行的宽度，由于left左边是父元素的边框，所以left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了content2的部分。left上移过后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾；

    ⑤使用相对定位移动left和right部分，.left{left:-200px;},.right{right:-200px;}。

三、定位方法布局

    （1）布局样式：

        
header3
       
     
   

       
left3
       
content3
       
right3
   
   
footer3

    （2）style样式

*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
.article3{ position: relative; overflow: hidden; padding: 0 200px;}
.content3,.left3,.right3{min-height: 200px;}
.left3,.right3{ width: 200px;}
.left3{ background: darkgreen; position: absolute; left: 0; top: 0;}
.right3{ background: cornflowerblue; position:absolute; top: 0; right: 0;}
.content3{width: 100%; background: darkgoldenrod; }

        绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

        提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。

        注意：content3同样可以定位，那么就是{position:absolute;left:200px; right:200px;top:0;} 最为常用该布局方式。

四、Flex布局

       （1）布局样式：

 

        
header4
       
     
   

       
left4
       
content4
       
right4
   
   
footer4

       （2）style样式

*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
.article4{ display: flex;}
.content4,.left4,.right4{min-height: 200px;}
.left4,.right4{ width: 200px;}
.left4{ background: darkgreen; }
.right4{ background: cornflowerblue;}
.content4{ background: darkgoldenrod; flex-grow: 1; }

        Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性。

        任何一个容器都可以指定为Flex布局，所以，flex布局将成为未来布局的首选方案。

        对于flex布局的一些具体实现，可参见阮一峰大神的flex布局教程语法篇点击打开链接。

        ①将article4块设置为一个flex容器，那么article下的left4,right4,content4这三个子元素自动成为容器成员，称为flex项目；②项目根据内容进行弹性布局；③可以通过order属性设置排列顺序，对于order属性：定义项目的排列顺序，越小越靠前，默认为0；④通过项目属性flex-grow设置content4的放大比例，将空余的空间用content4来填充，使三个项目不满一行；默认为0，也就是对剩余空间不做处理；⑤设置left4和right4的固定宽度，不仅可以用width来设置，也可以通过项目属性flex-basis来设置。

        使用flex布局是一件很简单的事情，不在为浮动、定位，不受控制的div而烦恼了。

        注意：另外还有 grid布局，暂时浏览器兼容不好，但是几年后那就不一定了。

        四种布局在游览器下的显示情况如下：

    参考博客：CSS中经典的双飞翼布局 点击打开链接

                    CSS圣杯布局、双飞翼布局、flex布局和绝对定位布局的几种经典布局的具体实现实例 点击打开链接

                    圣杯布局和双飞翼布局（前端面试必看）点击打开链接 https://www.jianshu.com/p/f9bcddb0e8b4

版权声明：本文为博主原创文章，未经博主允许不得转载。