CSS常见布局的几种实现方式(面试常考)
本文將介紹面試中常考的一些CSS布局：
- 兩欄布局(左邊固定右邊自適應)
- 三欄布局(左右固定中間自適應)
- 流體布局（浮動）
- BFC三欄布局
- 雙飛翼布局
- 圣杯布局
- flex
- table布局
- 絕對定位布局
- 網格布局(Grid布局)
一、兩欄布局
左邊固定，右邊自適應
1.通過設置浮動實現。
需要兩個div實現，一個div設置浮動，并設置寬度，另一個div可以不用設置任何東西
如果要給右邊塊設置什么的話下面兩種方法也行：
- left左浮動并設置寬度right設置margin-left為left的寬度也能實現
- left設置左浮動并和寬度right，right設置over-flow:hidden也能實現
2. 通過相對定位和絕對定位實現。
需要三個div，其中一個div是父容器，包含兩個子元素。
兩個子元素設置相對定位，給上邊的子元素設置寬度，下邊的子元素設置left,值為上邊子元素的寬度，再設置right:0。
給父容器設置相對定位是因為可以讓其設置絕對定位的子元素相對它進行移動；給上邊的子元素設置絕對定位可以讓下邊的子元素跟它在同一行。
3.通過彈性盒子flex實現
需要三個div，其中一個div是父容器，包含兩個子元素。
父元素設置display:flex;上邊子元素設置寬度，下邊子元素設置flex:1
二、三欄布局
左右固定，中間自適應
1.流體布局（浮動）
原理: 左右模塊各自向左右浮動，并設置中間模塊的margin值使中間模塊寬度自適應
缺點: 主要內容無法最先加載，當頁面內容較多時會影響用戶體驗
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>三欄布局——float</title><style>div {height: 200px;}.left {float: left;width: 100px;}.right {float: right;width: 100px;}.center {margin-left: 100px;margin-right: 100px;}</style> </head><body><div class="left" style="background-color:rgb(6, 235, 44)"></div><div class="right" style="background-color:rgb(9, 134, 236)"></div><div class="center" style="background-color:red"></div> </body></html>2.BFC 三欄布局
原理: BFC規則有這樣的描述：BFC 區域不會與浮動元素重疊, 因此我們可以利用這一點來實現 3 列布局
缺點: 主要內容模塊無法最先加載，當頁面中內容較多時會影響用戶體驗。因此為了解決這個問題，有了下面要介紹的布局方案雙飛翼布局
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>三欄布局——BFC</title><style>div {height: 200px;}.left {float: left;width: 100px;}.right {float: right;width: 100px;}.center {overflow: hidden;}</style> </head><body><div class="left" style="background-color:rgb(6, 235, 44)"></div><div class="right" style="background-color:rgb(9, 134, 236)"></div><div class="center" style="background-color:red"></div> </body></html>3.雙飛翼布局。
原理：給center添加一個容器元素container，設置center的margin值避開側邊欄，讓left、right飄在兩邊
優點: 主要內容模塊可以優先加載，當頁面中內容較多時不會影響用戶體驗。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>三欄布局——雙飛翼</title><style>.container {float: left;width: 100%;}.center {margin-left: 100px;margin-right: 100px;height: 100px;}.right {float: left;margin-left: -100px;/*自身寬度*/width: 100px;height: 100px;}.left {float: left;margin-left: -100%;/*基于父元素百分比的外邊距*/width: 100px;height: 100px;}</style> </head><body><div class="container"><div class="center" style="background-color:red"></div></div><div class="left" style="background-color:rgb(6, 235, 44)"></div><div class="right" style="background-color:rgb(9, 134, 236)"></div> </body></html>4.圣杯布局
和與雙飛翼布局的區別: 與雙飛翼布局很像，有一些細節上的區別，相對于雙飛翼布局來說，HTML 結構相對簡單，但是樣式定義就稍微復雜，也是優先加載內容主體。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>三欄布局——雙飛翼</title><style>.container {margin-left: 100px;margin-right: 100px;}.center {float: left;width: 100%;height: 100px;}.left {float: left;margin-left: -100%;position: relative;left: -100px;width: 100px;height: 100px;}.right {float: left;margin-left: -100px;position: relative;right: -100px;width: 100px;height: 100px;}</style> </head><body><div class="container"><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="left" style="background-color:red"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div></div> </body></html>5.flex
原理： 設置父元素 display:flex;再設置子元素的flex；
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性：
- flex-grow：項目將相對于其他靈活的項目進行擴展的量
- flex-shrink：規定項目將相對于其他靈活的項目進行收縮的量
- flex-basis：項目的默認長度
優點：可以先寫center，讓他先加載，然后用order屬性，把他排到中間的位置
.container{display:flex;width:100%;height:100px; } .left{flex:0 0 100px;order: 0 /*默認為0*/ } .right{flex:0 0 100px;order:2 } .center{flex:1 1 auto;order:1 }<div class="container"><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="left" style="background-color:red"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div> </div>6. table布局
缺點：無法設置欄間距
.container{display:table;width:100%; } .left,.center,.right{display:table-cell; } .left{width:100px;height:100px; } .right{width: 100px;height:100px; }<div class="container"><div class="left" style="background-color:red"></div><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div> </div>7.絕對定位布局
優點: 簡單實用，并且主要內容可以優先加載。
.container{position:relative; } .center{margin-left:100px;margin-right:100px;height:100px; } .left{position:absolute;left:0;top:0;width:100px;height:100px; } .right{position:absolute;right:0;top:0;width:100px;height:100px; }<div class="container"><div class="left" style="background-color:red"></div><div class="center" style="background-color:rgb(9, 134, 236)"></div><div class="right" style="background-color:rgb(6, 235, 44)"></div> </div>8.網格布局(Grid布局)
grid-template-columns: 100px auto 100px;
用于設置網格容器的列屬性 其實就相當于列的寬度 當我們需要幾列展示時
就設置幾個值 這個屬性可以接收具體數值比如100px 也可以接收百分比值
表示占據容器的寬度
需要注意的是: 當給容器設定了寬度時
grid-template-columns設定的百分比值是以容器的寬度值為基礎計算的
如果未設置寬度時 會一直向上追溯到設置了寬度的父容器 直到body元素。
grid-template-rows: 100px;
用于設置網格容器的行屬性 其實就相當于行的高度
其特性與grid-template-columns屬性類似
總結
我個人還是更喜歡使用flex布局，感覺用起來很方便，基本上的布局都能夠完成。
有興趣的可以看看這篇文章
Flex(彈性布局)實現五大常用布局
本文鏈接：https://blog.csdn.net/qq_39903567/article/details/114751532
總結
以上是生活随笔為你收集整理的CSS常见布局的几种实现方式(面试常考)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux切换管理员
- 下一篇： 在html创建色块,一道CSS题:不能改