這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種實現方式
🥭 寫在最後
本篇文章到這裏就結束了,如果覺着這篇文章對你有所幫助,可以點贊支持一下~
可以將文中的圖片直接保存到本地使用,如果你需要原圖片或者思維導圖源文件可以找我要。
- 用ChatGPT學Nginx是一種什麼體驗
- 【好物分享】分享給前端開發的28個資源(網站、軟件、插件),簡直是提高效率必備
- Vite3.0都來了,你還捲動嗎?(Vite3.0新特性一覽)
- 【好物分享】在命令行讀Markdown,這個感覺太舒服了
- 從0開始使用pnpm構建一個Monorepo方式管理的demo
- 我畫了5張腦圖可以讓你快速入門TypeScript
- 我看着MDN文檔,手寫了幾個數組實例方法
- 淺談JavaScript中的特殊函數
- 如何通過SSH配合VSCode收穫超舒適的遠程開發體驗
- CSS的calc函數不會還有人沒有用吧
- 【戲玩算法】12-圖
- 誰説前端不能搞紅黑樹,用這55張圖拿JS一起手撕紅黑樹
- 簡單總結了10個JavaScript代碼優化小tips
- NaiveUI中看起來沒啥用的組件(文字漸變)實現原來這麼簡單
- 面試官讓我用Flex寫色子佈局,我直接給寫了6個
- Vue3 TS Vite NaiveUI搭建一個項目骨架
- 用一萬多字從頭到尾介紹【函數式編程】
- 這8張腦圖幾乎概括了所有的佈局方案,確定不看看嗎?
- 【戲玩算法】07-字典
- 還在console.log一把梭嗎?console還有其他騷操作