圣杯布局 和 双飞翼布局 以及 全局布局的方式

圣杯布局 以及 双飞翼布局

真实名称: 统称—”三栏布局”

布局原理

圣杯布局：

利用relative 和 margin-left 以及 margin-right实现三栏布局。

结构层：

视图层：

先从#main块开始，到#left到#right ,在#left 和 #right设置margin-left 和 margin-right 以及left之前他们渲染出来的图形如下：

效果图：

---

双飞翼

和上述的圣杯布局的区别在于：
1. 没有使用relative
2. 没有设置 margin-right
3.在他们float之后，main的内容会被遮挡，所以会在main里设置一个新的div.main-inner，通过这个main.inner设置padding来避免遮挡

结构层：

视图层：

效果图：

---

全局布局:大概有五种方法 0.0.00.0.0.0.00.0

方法一：利用float + calc
说明：我的calc不知道为什么不起作用 所以我只能手动输入一个值（在.middle中设置height）

结构层：

视图层：

效果图：

。

方法二：利用inline-block + calc

结构层：

视图层：

效果层：

.

方法三：利用table

结构层：

视图层：

效果图

.

方法四：利用flex

结构图：

视图层：

效果图：

.

方法五：利用grid

结构层：

视图层：

效果图：

.

其实还有利用定位来做到相关的布局，我个人认为这些就没有必要啦，总之，每一种布局都有敲一遍，感受一下。