CSS圣杯布局与双飞翼布局

一.圣杯布局

有些时候我们需要随着浏览器的窗口缩小，侧边栏不会改变，主体内容自适应，就会用到圣杯布局。
基本的思想;将主体和侧边栏放在一个div下
给这个div设置时用padding留下侧边栏的模块。将主体部分设置宽度自适应。再用margin-left属性和relative属性定位侧边栏。
先来看看效果图：

具体操作如下：

1.先设置整体框架

<div id="container">
  <header class="head">head</header>
  <article class="article">
   <section class="main">main</section>
   <aside class="left">left</aside>
   <aside class="right">right</aside>
  </article>
  <footer class="foot">foot</footer>
 </div>
 
 

2.设置主体部分样式

#container .article{
 overflow: hidden;
 padding: 0 200px;
 min-width: 300px;
 
 

 
 

1.先设置溢出隐藏
2.用padding预留侧边栏的位置
3.设置最小宽度

3.设置主要内容的样式

#container .main{
 width:100%;
 height: 500px;
 background: red;
 float: left;
}
 
 

1.将宽度设置为自适应，浮动方式设置为左浮动。这样就充满了整个主体部分的空间（先设置主体内容样式的目的是浏览器先加载主体）

4.设置侧边栏样式

当我们只设置侧边栏背景时会发现如图（截不下了）

这时我们将侧边栏设置为左浮动会发现

原因是三个div都是左浮动，但是由于空间被mainz充满，所以侧边栏被挤了下来。
所以我们用margin-left：-100%；来使第一个左侧边栏至于main的左侧，如下：

可以看到侧边来并没有到达预想的位置，此时，再用relative相对定位使左侧边栏左移:
右侧设置同理。
具体代码如下：

#container aside{
  width: 190px;
  height: 500px;
  background: pink;
  position:relative;
}
#container .left{
 margin-left: -100%;
 left: -200px;
 float: left;
}
#container .right{
 margin-left: -190px;
 left:200px; 
 float: left;
 
 

1.设置浮动方式
2.设置左外边距，实现同处一行
3.使用相对定位置于预期位置

二.双飞翼布局

双飞翼布局源自UDE团队，和圣杯布局实现效果相同。但是思路有所改变。
基本思想是，在主体部分内嵌套一个div，设置这个div的外边距实现预留位置，在原有的圣杯布局上摒弃了position定位，减少了设计步骤。
具体步骤：

1.设置主体部分的样式

#container section{
 width: 100%;
 float: left;
}
 
 

 
 
1
2
3

2.设置嵌套的div样式

.main{
 margin: 0 200px;
 height: 500px;
 background: red;
}
 
 

用margin预留左右侧边栏位置

3.设置左右两侧侧边栏样式

#container article .left{
 background: pink;
 height: 400px;
 width: 190px;
 margin-left: -100%;
 float: left; 
}
#container article .right{
 background: pink;
 height: 400px;
 width: 190px;
 margin-left: -190px;
 float: left;
}
 
 

 
 

达到如下效果：


缩小浏览器，主要内容自适应如下;

两者的区别：

1.双飞翼与圣杯布局相比多创建了一个div（为了控制外边距）

2.双飞翼布局不用设置相对定位和偏移量

3.双飞翼使用margin，圣杯布局使用padding实现空出位置

注：实际开发中一般使用flex弹性盒子布局，但是不兼容早期IE浏览器，有些时候还需手动设置。