這8張腦圖幾乎概括了所有的佈局方案，確定不看看嗎？

---

theme: fancy highlight: atom-one-light

---

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第18天，點擊查看活動詳情

Hi~，我是一碗周，如果寫的文章有幸可以得到你的青睞，萬分有幸~

🍏 寫在前面

前端佈局不管是在面試過程中還是在工作中都是非常重要的一部分，一個優秀的前端工程師可以在很快的時間內寫出同一種佈局的多種實現方案，練習並掌握CSS佈局方案可以提高我們的頁面開發速度。

這篇文章通過思維導圖的方式總結了八大類前端佈局，每一類最少都包含3個實現方法，由於是腦圖，並不能展示過多的代碼且沒有代碼高亮（這點很不友好），不過我儘可能多的在腦圖中展示了核心CSS代碼，方便參考。

八大類佈局如下圖：

文本包含的圖片數據大於10M，流量用户請選擇性閲讀

🍑 水平居中

水平居中的實現非常簡單，也是最常用的，這裏列舉了7方式如下圖：

🍒 垂直居中

垂直居中的使用率幾乎與水平居中差不多，實現也是非常的簡單，這裏總結了6種常用方式

🍓 水平垂直居中

實現水平垂直居中，只需要將前面的方式進行結合，這裏總結了7種方式。

🫐 兩列布局

所謂的兩列布局就是一列定寬(也有可能由子元素決定寬度)，一列自適應的佈局。最終效果如下所示：

這裏總結了實現兩列布局的6種方式

🍈 三列布局

三列布局主要分為兩種：

• 第一種是前兩列定寬，最後一列自適應，這一種本質上與兩列布局沒有什麼區別，可以參照兩列布局實現。
• 第二種是前後兩列定寬，中間自適應，最終效果圖如下

這裏總結了實現兩列布局的5種方式

🍊 等分佈局

等分佈局就是將一個容器平均分成幾等份，這裏以 4 等分為例，總結了4種實現方式。

🍉 Sticky Footer佈局

Sticky Footer佈局是頁面內容不夠長時，底部欄就會固定到瀏覽器的底部；如果足夠長時，底部欄就後跟隨在內容的後面。如下圖所示：

這裏總結了4種實現方式

🍋 全屏佈局

全部佈局主要應用在後台，主要效果如下所示：

這裏總結了3種實現方式

🥭 寫在最後

本篇文章到這裏就結束了，如果覺着這篇文章對你有所幫助，可以點贊支持一下~

可以將文中的圖片直接保存到本地使用，如果你需要原圖片或者思維導圖源文件可以找我要。