CSS布局之什么是圣杯布局与双飞翼布局

谁践踏了优雅 2022-06-13 14:40 252阅读 0赞

# 圣杯布局与双飞翼布局 #

### 在面试时，你会经常遇到那么一个考题，有left、right、container三个盒子，要求left与right盒子宽度固定，分别固定于浏览器两侧，container位于中间，宽度随浏览器窗口自适应；说白了，就是要你进行两边定宽，中间自适应的三栏布局，并且中间栏要放在文档流前面以优先渲染。而圣杯布局与双飞翼布局就是用来解决这个问题最常见的布局方法。但两者在实现上有一些差异。 ###

## 先给出一个常见的DOM结构： ##

![Center][]

## 先说圣杯布局： ##

### 第一步，设置如下样式： ###

![Center 1][]

#### 给三盒子都加：float:left;  这时，由于container的宽度为100%；所以，一行装不下这三个盒子，left与right会被往下挤： ####

![Center 2][]

#### 这时，给left加margin-left:-100%; 给right加margin-left:-200px; 两个盒子就分别到了自己的位置上去： ####

![Center 3][]

#### 看到这，有人就会说，这不是达到效果了吗？其实，你仔细看就会发现，表面上看是达到效果了，其实，这时的container的宽度是100%；撑满浏览器的，它的左右两边各被left   与right盖住了一部分，这就尴尬了。 ####

### 第二步，给父元素加padding： ###

![Center 4][]

#### 结果是： ####

![Center 5][]

#### 我们发现，这时，虽然container的宽度是对的了，但是left和right也也被挤到里面去了，还是把container的内容盖住了。 ####

### 第三 步，加定位： ###

![Center 6][]

#### 给left与right加position: relative; 然后left相对自己往左偏移自身宽度的距离，让出盖住的部分，right相对自己往右偏移自身宽度，让出盖住的部分，这就可以达到我们想要的效果了： ####

![Center 7][]

#### 至于这三个盒子的高度，就看需求而定了，主要好好利用浮动与定位，相信很简单。 ####

## 再来看双飞翼布局： ##

### 双飞翼布局前期思路与圣杯布局一样，都是利用浮动和margin将三个盒子弄到一行的位子，也就是说在第一步上是一样的。不同的是如何处理被遮盖的问题。   相对圣杯布局，双飞翼布局要在DOM结构上加一个元素： ###

###  ![Center 8][]   在container内部加了一盒显示内容的盒子container\_in的盒子，在布局时，只要left与right不盖住container\_in就可以了。 ###

### 所以，双飞翼布局的css代码如下： ###

![Center 9][]

#### 只要给container加上左右margin，我们就得到了想要的效果： ####

###  ![Center 10][]   相对于圣杯布局来说，双飞翼布局不用给left与right加定位于left、right属性，只要在container内部加一个盒子用于显示内容，并给它设置相应的左右margin就可以了。两种布局各有特点。 ###

## 其实，只要熟练掌握css布局原理，实现这种效果有很多种方法： ##

### 针对第二种DOM结构： ###

1）、

![Center 11][]

2）、

![Center 12][]

### 针对第一种DOM结构： ###

1）、

![Center 13][]

这些布局方式，可能不使用与某些需求，但只要掌握布局原理，做一些适当的改变就可以了。。。

[Center]: /images/20220613/a6c7b223aa1a49a49bc431d75d879f2a.png
[Center 1]: /images/20220613/9a97bc9736004922957236213de55cc2.png
[Center 2]: /images/20220613/1d96e6c200754161ae7ae305fffbca5e.png
[Center 3]: /images/20220613/3e044ba91e904bc4af22c8a6f19381b1.png
[Center 4]: /images/20220613/000ea100554840eabfe9c154284ca700.png
[Center 5]: /images/20220613/46665d89c7e54d67b0fb19ed91f5bd25.png
[Center 6]: /images/20220613/e80f0fbdb026409c9982f348a9336d93.png
[Center 7]: /images/20220613/c9f9350cce044b8886677fa115db6f97.png
[Center 8]: /images/20220613/0926e7554fbd4ec5805b76d7d5dac728.png
[Center 9]: /images/20220613/d821a644249e42428a4363cc9aab0744.png
[Center 10]: /images/20220613/6c30651c4c4e42ac9d9840ccfa44cca2.png
[Center 11]: /images/20220613/9b67130843fa4525805d4da1e0d50d6e.png
[Center 12]: /images/20220613/319412a58bee4a70bc08454f4def4b2a.png
[Center 13]: /images/20220613/edbbdbc57d5748b184d7e2e360cefc05.png