面试必问:圣杯布局和双飞翼布局的区别

关于“面试必问:圣杯布局和双飞翼布局的区别”的完整攻略，我来详细讲解一下。

1. 什么是圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是一种流行的三栏布局方式。它们的共同点是：都有一个中心的主体部分、一个左侧辅助栏和一个右侧辅助栏，并且主体部分宽度固定，而辅助栏的宽度可以根据需要而自适应调整。

具体来说：

1. 圣杯布局：在HTML结构中，主体部分的标签最先出现，其次是左侧辅助栏的标签，最后是右侧辅助栏的标签。通过浮动和负边距的技巧，实现左右辅助栏的自适应宽度。

2. 双飞翼布局：在HTML结构中，与圣杯布局相比，左侧辅助栏和右侧辅助栏的位置互换，并采用了内层DIV包裹，外层DIV设定左右边距，而中间主体部分通过设置margin-left和margin-right属性为辅助栏留出空间。

2. 圣杯布局和双飞翼布局的区别

圣杯布局和双飞翼布局虽然都是三栏布局，但它们之间有几个关键的区别：

1. HTML结构不同：圣杯布局，左边栏位于主体部分左侧，右边栏位于主体部分右侧，而且左边栏的位置要在主体部分的前面。双飞翼布局，则是通过内层包裹的div来实现容器的三列布局，左右侧边栏在主体内容的下面。

2. CSS实现不同：圣杯布局和双飞翼布局都是通过浮动和负margin实现的自适应布局。圣杯布局通过为左右边栏设置margin-left和margin-right来“拉”它们到正确的位置，再通过设置同级元素、子元素的负margin值来实现内部对齐。而双飞翼布局则是通过使用嵌套的

   元素和CSS padding来解决空间问题，这样具有良好的浏览器兼容性，但要避免无限制的嵌套造成不必要的影响。

3. 示例说明

以下是两个示例说明：

示例1

假设需要实现一个固定宽度的三栏布局，其中主体部分宽度为600px，左右辅助栏均为200px：

圣杯布局

<div class="c-container">
  <div class="c-main">Main</div>
  <div class="c-left">Left</div>
  <div class="c-right">Right</div>
</div>

.c-container {
  padding-left: 200px;
  padding-right: 200px;
  overflow: hidden;
}

.c-main {
  float: left;
  width: 600px;
  height: 500px;
  background-color: #ccc;
  position: relative;
  left: -200px;
  margin-right: -100%;
}

.c-left {
  float: left;
  width: 200px;
  height: 500px;
  background-color: #f00;
  position: relative;
  left: -200px;
  margin-left: -100%;
}

.c-right {
  float: left;
  width: 200px;
  height: 500px;
  background-color: #00f;
  position: relative;
  right: -200px;
  margin-left: -200px;
}

双飞翼布局

<div class="c-container">
  <div class="c-main"><div class="c-main-inner">Main</div></div>
  <div class="c-left"><div class="c-left-inner">Left</div></div>
  <div class="c-right"><div class="c-right-inner">Right</div></div>
</div>

.c-container {
  margin-left: 200px;
  margin-right: 200px;
  overflow: hidden;
}

.c-container > div {
  float: left;
}

.c-main {
  width: 600px;
  margin-left: -100%;
  padding-left: 200px;
  background-color: #ccc;
}

.c-main-inner {
  margin-left: 200px;
}

.c-left {
  width: 200px;
  margin-left: -200px;
  background-color: #f00;
}

.c-left-inner {
  margin-left: 200px;
}

.c-right {
  width: 200px;
  margin-left: -200px;
  background-color: #00f;
}

.c-right-inner {
  margin-left: 0; 
}

示例2

假设需要实现一个左右边栏宽度固定、中间主要区域宽度自适应的三栏布局：

圣杯布局

<div class="c-container">
  <div class="c-main">Main</div>
  <div class="c-left">Left</div>
  <div class="c-right">Right</div>
</div>

.c-container {
  padding-left: 200px;
  padding-right: 200px;
  overflow: hidden;
}

.c-main {
  margin: 0 200px;
  height: 500px;
  background-color: #ccc;
}

.c-left {
  float: left;
  width: 200px;
  height: 500px;
  background-color: #f00;
  margin-left: -100%;
  position: relative;
}

.c-right {
  float: right;
  width: 200px;
  height: 500px;
  background-color: #00f;
  margin-right: -100%;
  position: relative;
}

双飞翼布局

<div class="c-container">
  <div class="c-main"><div class="c-main-inner">Main</div></div>
  <div class="c-left"><div class="c-left-inner">Left</div></div>
  <div class="c-right"><div class="c-right-inner">Right</div></div>
</div>

.c-container {
  overflow: hidden;
}

.c-container > div {
  float: left;
}

.c-main {
  margin-left: 200px;
  margin-right: 200px;
  height: 500px;
  background-color: #ccc;
}

.c-main-inner {
  margin-left: 200px;
  margin-right: 200px;
}

.c-left {
  width: 200px;
  margin-left: -100%;
  height: 500px;
  background-color: #f00;
}

.c-left-inner {
  margin-left: 100%;
}

.c-right {
  width: 200px;
  margin-left: -200px;
  height: 500px;
  background-color: #00f;
}

.c-right-inner {
  margin-left: 0;
}

以上就是有关“面试必问:圣杯布局和双飞翼布局的区别”的完整攻略。希望能对您有所帮助。