双飞翼布局与圣杯布局再理解

本文主要是介绍双飞翼布局与圣杯布局再理解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

CSS系列之圣杯布局与双飞翼布局

---

---

前言

今天上前端课老师讲了圣杯布局，就想到了双飞翼布局，所以今天有对圣杯布局和双飞翼布局进行了再一次的学习。

---

一、为什么提出圣杯布局？

圣杯布局是国外的一些先辈提出圣杯布局地址，目的是使用css方式优化DOM渲染，希望三栏布局中的中间结构更容易显示出来。

二、圣杯布局

1.html代码

   <div class="header">Header</div><div class="container"><div id="main" class="cloumn">中间内容</div><div id="left" class="cloumn">左边内容</div><div id="right" class="cloumn">右边内容</div></div><div class="foot">Foot</div>

2.样式设置

我们先设置header，foot，给main，left，right设置基本样式,为了让main中的宽度自适应，我们为其试着宽度为100%：

  body{padding: 0;margin: 0;}.header,.foot{width: 100%;background-color: chocolate;height: 100px;}#main {background-color: cornflowerblue;height: 50px;width:100%;}#left {background-color: darkcyan;height: 200px;width: 300px;}#right {background-color: darkgreen;height: 250px;width: 100px;} 

圣杯布局中为了让main先显示出来，对container中三个子元素开启了左浮动和相对定位

  .cloumn{float: left;position: relative;}

可以看到foot被挤上去了，并且颜色也不显示了，这是因为我们对container容器中三个子元素开启了浮动带来的影响，我们对其清除浮动，清除浮动的方法有很多，我们在foot中添加属性clear:both;

  .foot{clear: both;}

可以看到foot出现了。
现在，我们将left移动到main的左边。

1. 首先，我们为container设置padding来给左边和右边留出地方给left和right

  .container {padding-left: 300px;padding-right: 100px;}

2. 其次，我们将left移动到main的左边，我们给其添加css样式margin-left: -100%; 使left与main在同一行

   对于margin-left，如果是同级关系，是元素的左边距到左边元素的右间距之间的距离。如果是父子关系，是元素的左边距到父元素的右内边距之间的距离，所以margin-left：-100%会往上移动一行。细心的会发现，当我们的margin-left每发生一次变化其实都是对我们要移动之前的距离的变化。

   当margin-left为left的宽度减一，还不到整个宽度时
   
   当为整个宽度时
   
   再换一个大小
   
   当为-100%时刚好为一行

  #left {background-color: darkcyan;height: 200px;width: 300px;margin-left: -100%;}

可以看到效果

3. 现在我们让left移动到main左边，因为我们开启了相对定位直接对自身定位就可以了

#left {background-color: darkcyan;height: 200px;width: 300px;margin-left: -100%;left: -300px; }

4. 现在我们让right移动到main的右边，设置margin-right:-100px

  #right {background-color: darkgreen;height: 250px;width: 100px;margin-right: -100px;}

双飞翼布局有一个缺陷，就是当 main 部分的宽小于 left 部分时就会发生布局混乱。

---

三、双飞翼布局

双飞翼布局是淘宝提出的，解决了圣杯布局的缺陷问题，双飞翼布局与圣杯布局不同的地方是对了一个DOM结构，并且也不使用定位了

html代码

   <div class="header">Header</div><div class="container"><div id="main-container" class="cloumn"><div id="main">中间内容</div></div><div id="left" class="cloumn">左边内容</div><div id="right" class="cloumn">右边内容</div></div><div class="foot">Foot</div>

css样式

     body{padding: 0;margin: 0;}.header,.foot{width: 100%;background-color: chocolate;height: 100px;}.foot{clear: both;}.cloumn{float: left;}#main {background-color: cornflowerblue;height: 250px;margin: 0 100px 0 300px;}#main-container{width: 100%;}#left {background-color: darkcyan;height: 200px;width: 300px;margin-left: -100%;}#right {background-color: darkgreen;height: 250px;width: 100px;margin-left: -100px;}

这篇关于双飞翼布局与圣杯布局再理解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---