前言
最近忙里偷閑，給自己加油充電的時(shí)候，發(fā)現(xiàn)自己腦海中布局這塊非常的凌亂混雜，于是花了一些時(shí)間將一些常用的布局及其實(shí)現(xiàn)方法整理梳理了出來(lái)，在這里，分享給大家。
單列布局
單列布局是最常用的一種布局，一般是將一個(gè)元素作為容器，設(shè)置一個(gè)固定的寬度，水平居中對(duì)齊。
單列布局一般有兩種形式：

(圖片來(lái)源：https://blog.csdn.net/Ace_Arm/article/details/81036129)
一欄布局
一欄布局頭部、內(nèi)容、底部寬度一致
效果圖

代碼實(shí)現(xiàn)
html

一欄布局（通欄）

一欄布局（通欄）頭部和底部寬度一致，占滿整個(gè)頁(yè)面，中間內(nèi)容區(qū)域?qū)挾容^小不占滿屏幕。

效果圖

代碼實(shí)現(xiàn)

html

2列布局
2列布局的使用頻率也非常高，其實(shí)現(xiàn)效果主要就是將頁(yè)面分割成左右寬度不等的兩列。一般寬度較小的一列會(huì)設(shè)置為固定寬度，作為側(cè)邊欄之類的，而另一列則充滿剩余寬度，作為內(nèi)容區(qū)。
在后臺(tái)管理系統(tǒng)及api文檔中使用較為廣泛。
效果圖
先來(lái)看看效果：

代碼實(shí)現(xiàn)
實(shí)現(xiàn)兩列布局的方法有很多，這里主要介紹兩種方法。
calc函數(shù)
calc() 函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值。實(shí)現(xiàn)思路很簡(jiǎn)單，側(cè)邊欄寬度固定，設(shè)置絕對(duì)定位，使其脫離文檔流，內(nèi)容區(qū)域通過(guò)calc()函數(shù)計(jì)算剩余寬度并設(shè)置寬度，再加一個(gè)margin-left，值為側(cè)邊欄的寬度。
代碼如下：
html

flex屬性

通過(guò)flex屬性實(shí)現(xiàn)思路也很簡(jiǎn)單，將父元素設(shè)置為flex，側(cè)邊欄寬度固定，內(nèi)容區(qū)域設(shè)置flex:1即可充滿剩余區(qū)域。

代碼如下：

html

3列布局
3 列布局在日常開(kāi)發(fā)中使用頻率也是很高的，其按照左中右的順序進(jìn)行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應(yīng)，能根據(jù)屏幕大小做響應(yīng)。
效果圖
還是先來(lái)看看效果圖

代碼實(shí)現(xiàn)
三列布局的實(shí)現(xiàn)方法也很多，這里主要介紹兩種（雙飛翼布局、圣杯布局、flex布局）
在介紹雙飛翼布局和圣杯布局之前要先說(shuō)一下margin設(shè)置負(fù)值的作用：
當(dāng)margin的值設(shè)為負(fù)值的時(shí)候，元素會(huì)對(duì)應(yīng)的像那個(gè)放向移動(dòng)，比如margin-left為負(fù)值，元素則會(huì)左移

雙飛翼布局
代碼如下：
html

如果不考慮瀏覽器兼容問(wèn)題的話，運(yùn)用flex布局是最簡(jiǎn)單的方式。

垂直方向的布局（sticky footer）
這種布局將頁(yè)面分成上、中、下三個(gè)部分，上、下部分都為固定高度，中間部分高度不定。當(dāng)頁(yè)面高度小于瀏覽器高度時(shí)，下部分應(yīng)固定在屏幕底部；當(dāng)頁(yè)面高度超出瀏覽器高度時(shí)，下部分應(yīng)該隨中間部分被撐開(kāi)，顯示在頁(yè)面最底部。
這種布局也稱之為sticky footer，意思是下部分粘黏在屏幕底部。
代碼實(shí)現(xiàn)
首先我們先構(gòu)建簡(jiǎn)單的HTML代碼

其中content為我們的內(nèi)容區(qū)。下面開(kāi)始介紹解決方法。
為內(nèi)容區(qū)域添加最小的高度
這種方法重要用vh(viewpoint height)來(lái)計(jì)算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度。例如我們可以添加如下樣式：

從而這個(gè)問(wèn)題就解決了，但是如果頁(yè)面的footer高度不同怎么辦?每一個(gè)頁(yè)面都要重新計(jì)算一次，這是很麻煩的，所以這種方法雖然簡(jiǎn)單但卻是不推薦的。
使用flex布局
這種方法就是利用flex布局對(duì)視窗高度進(jìn)行分割。footer的flex設(shè)為0，這樣footer獲得其固有的高度;content的flex設(shè)為1，這樣它會(huì)充滿除去footer的其他部分。
代碼如下：

這樣的布局簡(jiǎn)單使用，比較推薦。

在content的外面可以添加一個(gè)wrapper

這種方法就是在content的外面添加一個(gè)包裹容易，將html代碼改成這樣：

文章來(lái)源網(wǎng)絡(luò)，侵刪

想要了解更多可以點(diǎn)擊：

https://www.bilibili.com/video/BV1L7411N77n?from=search&seid=18173054450757190303