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

語言: CN / TW / HK

theme: fancy highlight: atom-one-light


持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第18天,點選檢視活動詳情

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

🍏 寫在前面

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

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

八大類佈局如下圖:

01toc.png

文字包含的圖片資料大於10M,流量使用者請選擇性閱讀

🍑 水平居中

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

02水平佈局.png

🍒 垂直居中

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

03垂直佈局.png

🍓 水平垂直居中

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

04水平垂直佈局.png

🫐 兩列布局

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

04_兩列布局.gif

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

05兩列布局.png

🍈 三列布局

三列布局主要分為兩種:

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

05_三列布局.gif

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

06三列布局.png

🍊 等分佈局

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

07等分佈局.png

🍉 Sticky Footer佈局

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

07_Sticky Footer佈局.png 這裡總結了4種實現方式

08Sticky Footer佈局.png

🍋 全屏佈局

全部佈局主要應用在後臺,主要效果如下所示:

08_全屏佈局.png

這裡總結了3種實現方式

09全屏佈局.png

🥭 寫在最後

本篇文章到這裡就結束了,如果覺著這篇文章對你有所幫助,可以點贊支援一下~

可以將文中的圖片直接儲存到本地使用,如果你需要原圖片或者思維導圖原始檔可以找我要