三種方式實現聖杯布局

聖杯布局是一種很常見的css布局。他要求：

本文會用三種方法來實現聖杯布局，分別是浮動，flexbox以及css grid。

這裡是頭部這裡是底部 .header,.footer

.container

這一步驟，首先給底部區域清除浮動，防止跟隨上邊的區域一起浮動。

另外：把中，左，右三個區域設定成度浮動。給左右兩塊區域固定的寬度，中間部分的寬度設定成100%。

這樣實現下來，因為浮動的關係，[middle]會佔據[container]的所有部分，而左右兩塊區域都會被擠到下面，但是，由於第一步設定了內邊距的關係，[container]的左右各剩餘了一塊區域，且寬度與左右區域相同。

這裡是頭部中間部分左邊右邊這裡是底部 .header,.footer .footer .container .container div .middle .left

.right

接下來要做的就是把左右兩塊區域挪到空出來的內邊距空間裡去。

先移動左邊，新加乙個樣式 margin-left:-100%。這樣一來，因為浮動關係，就把左邊塊上移到了[middle]左側，與其交織在一起，而右側欄就自動往左移動。然後再給左側欄乙個偏移量，偏移量恰好是其寬度，這一步要給[container]的position設成relative

這裡是頭部中間部分左邊右邊這裡是底部 .header,.footer .footer .container .container div .middle .left

.right

同上一步的原理一樣，把右側區域也給弄上去，設定負外邊距和本身寬度相同就行了。

這裡是頭部中間部分左邊右邊這裡是底部 .header,.footer .footer .container .container div .middle .left

.right

特別完美~

彈性盒子用來實現聖杯布局特別簡單。只需要把中間的部分用flex布局即可。

這裡是頭部左邊中間部分右邊這裡是底部 .header,.footer .container .middle .left

.right

很簡單，在寫html的時候，因為不再涉及到浮動，只需要按照左中右的順序來寫就可以了。左右兩塊區域的寬度寫死，把中間的區域的flex屬性設定成1就可以了。

grid是一種新的布局方式，截止2023年初，絕大多數瀏覽器都已經支援css grid。

其原理就是把頁面的區域劃分成乙個乙個的網格，就和圍棋的棋盤一樣。

用網格來解決聖杯問題，可以擺脫彈性盒子時需要格外加乙個[container]的問題，也就是左中右三款區域不需要在他們外邊包裝乙個額外的div。

先看一下**：

header left middle right footer body #header #left #right #middle

#footer

簡單說一下**的實現。回頭會專門看一下css grid的細節。

首先給最外層的body設成display:grid。當然，是外層父級元素即可，不一定是body。

grid-row就是說由上到下，#header佔據第1格，#left,#middle,#right佔據第2格，#footer佔據第3格。

而grid-column表示，在橫向從左向右，分成了五格。其中#header和#footer佔據全部。#left佔據第1格，#middle佔據第2到第4格，#right佔據第5格。

不管是實現起來還是理解起來都很方便。

關於css grid，下次繼續總結。

總的來說，我認為使用彈性盒子布局實現聖杯模式是最方便最快速且不用擔心移動端的適配問題。而css grid網格，並不是所有瀏覽器都支援，所以，暫時不太建議大規模使用。至於，第一種方法，面試的時候準備準備還是很有好處的。