聖盃佈局 和 雙飛翼佈局 以及 全局佈局的方式

聖盃佈局 以及 雙飛翼佈局

真實名稱: 統稱—”三欄佈局”

佈局原理

聖盃佈局：

利用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

結構層：

視圖層：

效果圖：

.

其實還有利用定位來做到相關的佈局，我個人認爲這些就沒有必要啦，總之，每一種佈局都有敲一遍，感受一下。