當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

CSS常见布局的几种实现方式(面试常考)

發(fā)布時(shí)間：2023/12/31 CSS 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS常见布局的几种实现方式(面试常考) 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本文將介紹面試中常考的一些CSS布局：

兩欄布局(左邊固定右邊自適應(yīng))
三欄布局(左右固定中間自適應(yīng))
- 流體布局（浮動(dòng)）
- BFC三欄布局
- 雙飛翼布局
- 圣杯布局
- flex
- table布局
- 絕對(duì)定位布局
- 網(wǎng)格布局(Grid布局)

一、兩欄布局

左邊固定，右邊自適應(yīng)

1.通過(guò)設(shè)置浮動(dòng)實(shí)現(xiàn)。

需要兩個(gè)div實(shí)現(xiàn)，一個(gè)div設(shè)置浮動(dòng)，并設(shè)置寬度，另一個(gè)div可以不用設(shè)置任何東西

如果要給右邊塊設(shè)置什么的話下面兩種方法也行：

left左浮動(dòng)并設(shè)置寬度right設(shè)置margin-left為left的寬度也能實(shí)現(xiàn)
left設(shè)置左浮動(dòng)并和寬度right，right設(shè)置over-flow:hidden也能實(shí)現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>兩欄布局——float</title><style>div{height:300px;}.left{width:200px;background-color:gray;float:left;}.main{background-color:pink;/* margin-left:200px; *//* 或者overflow:hidden; */}</style> </head> <body><div class = 'left'></div><div class = 'main'></div> </body> </html>

2. 通過(guò)相對(duì)定位和絕對(duì)定位實(shí)現(xiàn)。

需要三個(gè)div，其中一個(gè)div是父容器，包含兩個(gè)子元素。
兩個(gè)子元素設(shè)置相對(duì)定位，給上邊的子元素設(shè)置寬度，下邊的子元素設(shè)置left,值為上邊子元素的寬度，再設(shè)置right:0。
給父容器設(shè)置相對(duì)定位是因?yàn)榭梢宰屍湓O(shè)置絕對(duì)定位的子元素相對(duì)它進(jìn)行移動(dòng)；給上邊的子元素設(shè)置絕對(duì)定位可以讓下邊的子元素跟它在同一行。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>兩欄布局——absolue</title><style>.outer{position:relative;height:300px;}.left{position:absolute;width:300px;background-color:blue;height:100%;}.main{background-color:yellow;position:absolute;left:300px;right:0;height:100%;}</style> </head> <body><div class = 'outer'><div class = 'left'></div><div class = 'main'></div><div> </body> </html>

3.通過(guò)彈性盒子flex實(shí)現(xiàn)

需要三個(gè)div，其中一個(gè)div是父容器，包含兩個(gè)子元素。
父元素設(shè)置display:flex;上邊子元素設(shè)置寬度，下邊子元素設(shè)置flex:1

div{height:300px;}.parent{display:flex;}.left{flex:0 0 100px;}.right{flex:1 1 auto;}

二、三欄布局

左右固定，中間自適應(yīng)

1.流體布局（浮動(dòng)）

原理: 左右模塊各自向左右浮動(dòng)，并設(shè)置中間模塊的margin值使中間模塊寬度自適應(yīng)

缺點(diǎn): 主要內(nèi)容無(wú)法最先加載，當(dāng)頁(yè)面內(nèi)容較多時(shí)會(huì)影響用戶體驗(yàn)

<!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規(guī)則有這樣的描述：BFC 區(qū)域不會(huì)與浮動(dòng)元素重疊, 因此我們可以利用這一點(diǎn)來(lái)實(shí)現(xiàn) 3 列布局

缺點(diǎn): 主要內(nèi)容模塊無(wú)法最先加載，當(dāng)頁(yè)面中內(nèi)容較多時(shí)會(huì)影響用戶體驗(yàn)。因此為了解決這個(gè)問(wèn)題，有了下面要介紹的布局方案雙飛翼布局

<!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添加一個(gè)容器元素container，設(shè)置center的margin值避開(kāi)側(cè)邊欄，讓left、right飄在兩邊

優(yōu)點(diǎn): 主要內(nèi)容模塊可以?xún)?yōu)先加載，當(dāng)頁(yè)面中內(nèi)容較多時(shí)不會(huì)影響用戶體驗(yàn)。

<!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.圣杯布局

和與雙飛翼布局的區(qū)別: 與雙飛翼布局很像，有一些細(xì)節(jié)上的區(qū)別，相對(duì)于雙飛翼布局來(lái)說(shuō)，HTML 結(jié)構(gòu)相對(duì)簡(jiǎn)單，但是樣式定義就稍微復(fù)雜，也是優(yōu)先加載內(nèi)容主體。

<!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

原理： 設(shè)置父元素 display:flex;再設(shè)置子元素的flex；

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫(xiě)屬性：

flex-grow：項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量
flex-shrink：規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量
flex-basis：項(xiàng)目的默認(rèn)長(zhǎng)度

優(yōu)點(diǎn)：可以先寫(xiě)center，讓他先加載，然后用order屬性，把他排到中間的位置

.container{display:flex;width:100%;height:100px; } .left{flex:0 0 100px;order: 0 /*默認(rèn)為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布局

缺點(diǎn)：無(wú)法設(shè)置欄間距

.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.絕對(duì)定位布局

優(yōu)點(diǎn): 簡(jiǎn)單實(shí)用，并且主要內(nèi)容可以?xún)?yōu)先加載。

.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.網(wǎng)格布局(Grid布局)

grid-template-columns: 100px auto 100px;
用于設(shè)置網(wǎng)格容器的列屬性其實(shí)就相當(dāng)于列的寬度當(dāng)我們需要幾列展示時(shí)
就設(shè)置幾個(gè)值這個(gè)屬性可以接收具體數(shù)值比如100px 也可以接收百分比值
表示占據(jù)容器的寬度
需要注意的是: 當(dāng)給容器設(shè)定了寬度時(shí)
grid-template-columns設(shè)定的百分比值是以容器的寬度值為基礎(chǔ)計(jì)算的
如果未設(shè)置寬度時(shí) 會(huì)一直向上追溯到設(shè)置了寬度的父容器直到body元素。
grid-template-rows: 100px;
用于設(shè)置網(wǎng)格容器的行屬性其實(shí)就相當(dāng)于行的高度
其特性與grid-template-columns屬性類(lèi)似

.container{ display: grid; grid-template-columns: 100px auto 100px; grid-template-rows: 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>

總結(jié)

我個(gè)人還是更喜歡使用flex布局，感覺(jué)用起來(lái)很方便，基本上的布局都能夠完成。

有興趣的可以看看這篇文章

Flex(彈性布局)實(shí)現(xiàn)五大常用布局

本文鏈接：https://blog.csdn.net/qq_39903567/article/details/114751532

總結(jié)

以上是生活随笔為你收集整理的CSS常见布局的几种实现方式(面试常考)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。