圣杯布局和双飞翼布局以及自己的理解改变

2016-11-29 本文已影响91人 sunny519111

圣杯布局

圣杯布局和双飞翼布局都是常见的三栏布局，中间自适应，左右2边固定，中间提前渲染。

主要知识点

浮动 float
负边距 margin-left: -...
相对定位 position: relative

主要代码块

  <div class="header">
        <h4>这是一个开头</h4>
    </div>
    <div class="container">
         <div class="main">
            圣杯布局，很久之前就听过，但是一直都没详细了解过，本文是对它实现方式的一些总结，希望可以把这种技术推荐给跟我之前一样对它比较陌生的开发人员.
         </div>
         <div class="left"></div>
         <div class="right"></div>
    </div>
    <div class="footer">
        <h4>这是尾部</h4>
    </div>

对header container footer设置相应的样式

.header{
      height: 40px;
      background: red;
}
.footer{
    height: 40px;
    background: green;
}
.container{
        background: #000;
 }

对main left right设置相应的样式


 .main,.left,.right{
       float: left;
 }
.main{
     width: 100%;
     background:  #35bbaa;
}
//这里就要注意了我们宽度等于父元素的宽度，所以下面的left，right就会由于没有位置向下一排浮动，所以就引发了接下来的负边距（前后摆放）
.left,.right{
     width: 200px;
     height: 200px;
}
.left{
    background:  #abcdef;
    margin-left: -100%;   //通过负边距把元素放到main的前面，值为main元素的宽度
}
.right{
   background: #666;
   margin-left: -200px; //通过负边距把元素放到main的后面，值为自身宽度
}

通过上诉方法我们实现了把三个元素当在同一行中，表面上看效果已经达到了自己的目的，但是我们在输入main中的文字就可以看到问题了，左右2个元素挡住了主要内容的左右部分，什么原因呢？这个就要我们理解浮动元素了，由于left，right设置了左右浮动，所以脱离文本流，所以文字会忽视他们的位置，填充进去了。为了解决这个时候就需要给父元素增加padding来缩小main元素的宽度

对container设置相应的padding和right,left值的改动


.container{
        background: #000;
        padding: 0 200px;  //值为对应的left，right
}
//然后通过定位使left，right，main三个排到一行
.left{
    background:  #abcdef;
    margin-left: -100%;   //通过负边距把元素放到main的前面，值为main元素的宽度
    position: relation;
    left: -200px;
}
.right{
   background: #666;
   margin-left: -200px; //通过负边距把元素放到main的后面，值为自身宽度
   position: relation;
   right: -200px;
}

链接地址：点击查看

以上就是圣杯布局的全部知识点

双飞翼布局

在2006年提出的圣杯布局上，淘宝由于需求在圣杯布局上提出了相应的修改（自古中国出盗版。。。。。）

主要修改内容是

给main元素添加了一个子元素
然后减少了position:relation等定位这4条代码
给miain的子元素添加了一个margin来缩小宽度

主要代码


<div class="header">
        <h4>这是开头</h4>
     </div>
     <div class="container">
        <div class="main">
            <div class="layout">
                    双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
                    多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。
            </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
     </div>
     <div class="footer">
        <h4>这是结尾</h4>
     </div>

       *{
            padding: 0;
            margin: 0;
        }
        .header,.footer{
            height: 40px;
            background: red;
        }
        .container{
            background: #000;
        }
        .container:after{
            display: block;
            clear: both;
            content: "";
        }
        .left,.right{
            float: left;
            width: 200px;
            height: 200px;
        }
        .main{
            float: left;
            width: 100%;
            background: #abcded;
        }
        .main .layout{
            margin: 0 200px;
        }
        .left{
            margin-left: -100%;
            background: #666;
        }
        .right{
            margin-left: -200px;
            background: #acb;
        }

本文章著作权归黄楚才，转载须说明来源