HTML中常用的布局元素及布局方式1

TML中常用的布局元素：<table>、<div>+CSS

<table>標(biāo)簽：

<table>指的是表格，用表格來搭建界面布局，即用表格的嵌套，來搭建界面布局。

<table>布局優(yōu)勢(shì)：

table優(yōu)勢(shì)：開發(fā)時(shí)間短（使用DW開發(fā)速度快）；純table各瀏覽器不會(huì)有兼容問題；內(nèi)容可自適應(yīng)；在搜索引擎排名能靠前；

但是 table如果布局變更，需要重新開發(fā)；如果table里有div ul 等，可能會(huì)出現(xiàn)瀏覽器兼容問題；加載速度慢；table嵌套的太多，運(yùn)維是非常困難的。

<div>塊級(jí)（block-level）標(biāo)簽：

DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時(shí)可以稱其為圖層。

<div>布局優(yōu)勢(shì)：

一.精簡代碼，減少重構(gòu)難度。

網(wǎng)站使用DIV+CSS布局使代碼很是精簡，css文件可以在網(wǎng)站的任意一個(gè)頁面進(jìn)行調(diào)用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個(gè)門戶網(wǎng)站的話，需手動(dòng)改很多頁面，而且看著那些表格也會(huì)感覺很亂也很浪費(fèi)時(shí)間，但是使用css+div布局只需修改css文件中的一個(gè)代碼即可。

二.網(wǎng)頁訪問速度

使用了DIV+CSS布局的網(wǎng)頁與Table布局比較，精簡了許多頁面代碼，那么其瀏覽訪問速度自然得以提升，也從而提升了網(wǎng)站的用戶體驗(yàn)度。

三.SEO優(yōu)化

采用div-css布局的網(wǎng)站對(duì)于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結(jié)構(gòu)化的代碼更加有利于突出重點(diǎn)和適合搜索引擎抓取。

四.瀏覽器兼容性

若使用table布局網(wǎng)頁，在使用不同瀏覽器情況下會(huì)發(fā)生錯(cuò)位，而div+css則不會(huì)，無論什么瀏覽器，網(wǎng)頁都不會(huì)出現(xiàn)變形情況。

HTML中常用的3種布局方式：

1.流動(dòng)式布局：是HTML網(wǎng)頁默認(rèn)的布局方式

特點(diǎn)：

1.塊級(jí)元素都會(huì)在所處的包含元素內(nèi)自上而下按順序處置延伸分布，且默認(rèn)狀態(tài)下，塊級(jí)元素占整個(gè)文檔流，默認(rèn)寬度為100%。

2.內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布顯示，不占整個(gè)文檔流。

常見的塊級(jí)（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol

常見的內(nèi)內(nèi)聯(lián)（行內(nèi)）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>

2.浮動(dòng)布局（float）

特點(diǎn)：

浮動(dòng)布局依靠【浮動(dòng)屬性 float：left/right/... 】來使標(biāo)簽脫離文檔流，達(dá)到兩個(gè)塊級(jí)元素并排顯示的效果。

float：left ；浮動(dòng)脫離當(dāng)前文檔流浮動(dòng)。

同時(shí)可以依靠【展示屬性display：inline/block/inline-block】來進(jìn)行行內(nèi)元素和塊級(jí)元素的效果切換。從而達(dá)到靈活運(yùn)用塊級(jí)元素和行內(nèi)元素布局的效果。

3.層模型布局又叫定位布局

特點(diǎn)：

當(dāng)我們應(yīng)擁div布局是，在第一層塊界面上來做第二層塊界面的開發(fā)時(shí)，就要用到我們所說的定位布局。

通過運(yùn)用【定位屬性position:absolute/relative/fixed】來進(jìn)行第二層界面的定位布局。

網(wǎng)頁是靜態(tài)的，網(wǎng)頁上的定位

position：absolute ；絕對(duì)定位脫離文檔流，不受浮動(dòng)影響，就是相對(duì)于窗體（body）邊界的margin定位。

position：relative；相對(duì)定位不脫離文檔流，相對(duì)于父級(jí)標(biāo)簽元素的位置定位。

position:fixed；固定位置，不會(huì)受任何因素影響。

滾動(dòng)條移動(dòng)前

滾動(dòng)條移動(dòng)后

優(yōu)先層顯示方法：【屬性：z-index:0/1/2...】

特點(diǎn)：數(shù)值越大，越優(yōu)先顯示。

注意：只有元素使用了position屬性的，才具有z-index屬性。

本文部分內(nèi)容來自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系修改。

家好，我是三木。

這篇文章，替大家匯總了css的布局方式，在每個(gè)布局的結(jié)尾附上了我認(rèn)為比較好的文章鏈接，不僅僅可以當(dāng)作學(xué)習(xí)資料，也可以當(dāng)作方法的查詢手冊(cè)，以后開發(fā)的時(shí)候忘記了某個(gè)屬性就來查查。

看完推薦的文章保準(zhǔn)解決你 99% 的css布局問題

每篇文章不僅僅包含介紹，還有代碼案例，以及如w3c網(wǎng)站的在線代碼編輯，可以自己修改屬性嘗試。

普通布局

使用方法——display: block/inline/inline-block

根據(jù)CSS規(guī)范的規(guī)定，每一個(gè)網(wǎng)頁元素都有一個(gè)display屬性，用于確定該元素的類型，每一個(gè)元素都有默認(rèn)的display屬性值，比如div元素，它的默認(rèn)display屬性值為“block”，成為“塊級(jí)”元素(block-level)；而span元素的默認(rèn)display屬性值為“inline”，稱為“行內(nèi)”元素。

資料文章：

w3c：https://www.w3schools.com/cssref/playdemo.asp?filename=playcss_display

w3c：https://www.w3school.com.cn/css/css_inline-block.asp

用法：https://zhuanlan.zhihu.com/p/65353887

浮動(dòng)布局

使用方法：float:left/right

指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。

float屬性用于定位和格式化內(nèi)容，例如讓圖像向左浮動(dòng)到容器中的文本。

float的值有：

left- 元素浮動(dòng)到其容器的左側(cè)
right- 元素浮動(dòng)到其容器的右側(cè)
none- 元素不浮動(dòng)（將僅顯示在文本中出現(xiàn)的位置）。這是默認(rèn)的
inherit- 元素繼承其父元素的浮點(diǎn)值

資料文章：

w3c：https://www.w3schools.com/css/css_float.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

CSS深入理解之float浮動(dòng)：https://segmentfault.com/a/1190000014554601

彈性布局

使用方法——display：flex/inline-flex

Flexible Box 模型，通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強(qiáng)大的空間分布和對(duì)齊能力。

容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點(diǎn)）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。

項(xiàng)目默認(rèn)沿主軸排列。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。

容器有以下屬性：

flex-direction-屬性決定主軸的方向（即項(xiàng)目的排列方向）
flex-wrap-定義設(shè)置換行模式
flex-flow-定義了項(xiàng)目在主軸上的對(duì)齊方式
justify-content-定義項(xiàng)目在交叉軸上如何對(duì)齊
align-items-定義項(xiàng)目在交叉軸上如何對(duì)齊
align-content-定義了多根軸線的對(duì)齊方式

資料文章：

w3c：https://www.w3schools.com/css/css3_flexbox_container.asp

Flex 布局教程：語法篇：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

深度解析 CSS Flexbox 布局：https://juejin.cn/post/6844904116141948936

48張小圖帶你領(lǐng)略flex布局之美：https://juejin.cn/post/6866914148387651592

定位布局

使用方法——position：absolute/relative...

給元素設(shè)置postion屬性后，就可以定義該元素的top,bottom,left,right四個(gè)屬性。當(dāng)然postion的值不同，對(duì)應(yīng)的top,bottom,left,right這四個(gè)屬性的值代表的含義也不相同

position屬性用來指定一個(gè)元素在網(wǎng)頁上的位置，一共有5種定位方式：

static-靜態(tài)
relative-相對(duì)定位
fixed-固定定位
absolute-絕對(duì)定位
sticky-粘性定位

資料文章：

w3c: https://www.w3schools.com/css/css_positioning.asp

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

CSS 定位詳解：https://www.ruanyifeng.com/blog/2019/11/css-position.html

表格布局

使用方法——display:table/table-row/table-cell....

有兩種方式使用表格布局 -HTML Table（<table>標(biāo)簽）和CSS Table（display:table 等相關(guān)屬性）。

HTML Table是指使用原生的<table>標(biāo)簽，而CSS Table是指用CSS屬性模仿HTML 表格的模型。

table布局的display總共包含如下值

table：指定對(duì)象作為塊元素級(jí)的表格，相當(dāng)于html標(biāo)簽<table>
inline-table：指定對(duì)象作為內(nèi)聯(lián)元素級(jí)的表格，相當(dāng)于html標(biāo)簽<table>
table-caption：指定對(duì)象作為表格標(biāo)題，相當(dāng)于html標(biāo)簽<caption>
table-cell：指定對(duì)象作為表格單元格，相當(dāng)于html標(biāo)簽<td>
table-row：指定對(duì)象作為表格行，相當(dāng)于html標(biāo)簽<tr>
table-row-group：指定對(duì)象作為表格行組，相當(dāng)于html標(biāo)簽<tbody>
table-column：指定對(duì)象作為表格列，相當(dāng)于html標(biāo)簽<col>
table-column-group：指定對(duì)象作為表格列組顯示，相當(dāng)于html標(biāo)簽<colgroup>
table-header-group：指定對(duì)象作為表格標(biāo)題組，相當(dāng)于html標(biāo)簽<thead>
table-footer-group：指定對(duì)象作為表格腳注組，相當(dāng)于html標(biāo)簽<tfoot>

資料文章：

display:table的幾個(gè)用法：https://blog.51cto.com/u_4048786/3205160

css table布局大法：https://segmentfault.com/a/1190000007007885

display:table的用法：https://www.jianshu.com/p/037a706ba9e9

柵格布局

使用方法 ——display：grid

網(wǎng)格布局將網(wǎng)頁劃分成一個(gè)個(gè)網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。

column-gap Specifies the gap between the columns

grid：設(shè)置grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow屬性
grid-area：設(shè)置grid-row-start, grid-column-start, grid-row-end, grid-column-end屬性
grid-auto-columns：設(shè)置瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的列寬
grid-auto-flow：設(shè)置排序方式
grid-auto-rows：設(shè)置瀏覽器自動(dòng)創(chuàng)建的多余網(wǎng)格的行高
grid-column ：設(shè)置grid-column-start and、grid-column-end properties
grid-column-end：設(shè)置右邊框所在的垂直網(wǎng)格線
grid-column-gap：設(shè)置列間距
grid-column-start：設(shè)置左邊框所在的垂直網(wǎng)格線
grid-gap：設(shè)置grid-row-gap、grid-column-gap屬性
grid-row：設(shè)置grid-row-start、grid-row-end屬性
grid-row-end：設(shè)置下邊框所在的水平網(wǎng)格線
grid-row-gap：設(shè)置行間距
grid-row-start：設(shè)置上邊框所在的水平網(wǎng)格線
grid-template：設(shè)置grid-template-rows,、grid-template-columns、grid-areas屬性
grid-template-areas：設(shè)置網(wǎng)格的區(qū)域，一個(gè)區(qū)域由多少單元格組成
grid-template-columns：設(shè)置列寬
grid-template-rows：設(shè)置行高
row-gap：設(shè)置行與行之間的間距

資料文章：

w3c：https://www.w3schools.com/css/css_grid.asp

CSS Grid 網(wǎng)格布局教程：https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Grid 布局：https://juejin.cn/post/6854573220306255880

A Complete Guide to Grid：https://css-tricks.com/snippets/css/complete-guide-grid/

多列布局

使用方法——column-count

column-count： length ｜ auto

column-width：interger ｜ auto

column-count：描述元素的列數(shù)
column-fill：設(shè)置多列內(nèi)容的平衡填充模式
column-gap：屬性用來設(shè)置元素列之間的間隔（gutter）大小
column-rule：屬性規(guī)定了列與列之間的直線
column-rule-color：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的顏色
column-rule-style：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的樣式
column-rule-width：設(shè)置在多列布局中被畫在兩列之間的規(guī)則（線條）的寬度
column-span：設(shè)置某一個(gè)內(nèi)容是否跨多欄顯示。
columns：用來設(shè)置元素的列寬和列數(shù)

資料文章：

淺談CSS3多列布局：https://juejin.cn/post/6844903450623524872

CSS columns分欄布局教程：https://www.zhangxinxu.com/wordpress/2019/01/css-css3-columns-layout/

們前端開發(fā)過程中，寫css（包括sass, less, stylus這樣的預(yù)處理器）進(jìn)行設(shè)計(jì)稿的樣式還原是一項(xiàng)重要的工作，而其中，關(guān)于頁面布局的部分，又是書寫樣式代碼時(shí)候的重點(diǎn)和難點(diǎn)，這篇文章就盡可能的去總結(jié)常見的一些頁面布局實(shí)現(xiàn)方案(并不是全部，布局實(shí)現(xiàn)方法太多了)，希望能夠?qū)Υ蠹矣兴鶐椭?/p>

在開始正題之前，有一點(diǎn)要說明：css布局中遇到的一個(gè)繞不開的問題就是瀏覽器兼容性，下面方案會(huì)遇到類似transform, flex等的兼容性問題，且由于grid布局兼容性問題，暫不涉及grid布局內(nèi)容，在不同場(chǎng)景，大家選擇合適的布局實(shí)現(xiàn)方案即可。

1. 居中相關(guān)的布局

1.1 水平居中布局

效果圖如下：

方案一. inline-block + text-align

分析：display設(shè)置為inline-block的元素，具有文本元素的性質(zhì)，其父元素可以通過設(shè)置文本對(duì)齊屬性text-align來控制其在行內(nèi)的對(duì)齊方式，text-align: center即為水平對(duì)齊

注意：text-align屬性是具有繼承性的，會(huì)導(dǎo)致自己元素內(nèi)部的文本也是居中顯示的，需要自身設(shè)置text-align覆蓋

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
        text-align: center;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. 定位 + transform

分析：父元素開啟定位（relative，absolute,fixed都可以）后，子元素設(shè)置絕對(duì)定位absolute后，left設(shè)置為50%，再使用transform: translateX(-50%)將子元素往反方向移動(dòng)自身寬度的50%，便完成水平居中。

注意：父級(jí)元素是否脫離文檔流，不影響子元素水平居中效果，但是transform是css3屬性，存在瀏覽器兼容問題

<style>
    .wrap {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案三. display: block + margin: 0 auto

分析：這個(gè)方法只需要對(duì)子元素進(jìn)行設(shè)置就可以實(shí)現(xiàn)水平居中，margin設(shè)置auto表示瀏覽器會(huì)自動(dòng)分配，實(shí)現(xiàn)來外邊距等分效果。

注意：這里子元素設(shè)置display為block或者table都是可以的，如果子元素脫離文檔流（浮動(dòng)，定位），會(huì)導(dǎo)致margin屬性的值無效。

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: table;
        margin: 0 auto;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.2 垂直居中布局

效果圖如下：

方案一. 定位 + transform

這種方案和之前水平居中布局的方案二是同樣的原理，不在贅述

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. display: table-cell + vertical-align

分析：設(shè)置display: table-cell的元素具有td元素的行為，它的子元素布局方式類似文本元素，可以在父元素使用vertical-align: middle;實(shí)現(xiàn)子元素的垂直居中。

注意：vertical-align屬性具有繼承性，導(dǎo)致父元素內(nèi)文本也是垂直居中顯示的。

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.3 水平垂直居中布局

效果圖如下：

前面分別總結(jié)了一些水平居中和垂直居中的布局方式，那么進(jìn)行水平垂直居中的布局，也就沒什么特別要說的了，直接上代碼：

方案一.定位 + transform

<style>
    .wrap {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

方案二. 結(jié)合水平布局方案三，垂直布局方案二

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>

1.4 使用flex進(jìn)行居中布局

分析：使用flex，水平垂直居中會(huì)變得非常容易，默認(rèn)情況下，align-items: center垂直居中（交叉軸排列方式），justify-content: center水平居中（主軸排列方式）注意：需要考慮瀏覽器兼容性問題。

<style>
     .wrap {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 1200px;
         height: 800px;
         background-color: aqua;
     }
     .content {
         width: 200px;
         height: 200px;
         background-color: blueviolet;
     }
</style>
 <body>
     <div class="wrap">
         <div class="content"></div>
     </div>
 </body>

2. N列布局

2.1 兩列布局

這里的兩列布局指的是，其中一列是定寬元素，另一列元素寬度自適應(yīng)。比如，我們實(shí)現(xiàn)左列定寬，右列自適應(yīng)的布局。

效果圖如下：

方案一. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置margin-left

分析：一個(gè)最簡單的做法，左邊元素設(shè)置浮動(dòng)，定寬，右邊元素的margin-left設(shè)置為左邊元素寬度大小，可以實(shí)現(xiàn)效果。

注意：我們左邊元素使用了浮動(dòng)，但是右邊元素沒有浮動(dòng)

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        margin-left: 400px;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">自適應(yīng)</div>
</body>

方案二. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置overflow:hidden

分析：右邊元素由于設(shè)置overflow:hidden開啟BFC，與外界隔離，所以能實(shí)現(xiàn)效果

注意：overflow:hidden的設(shè)置也使得右邊元素內(nèi)容超出隱藏。這里如果不設(shè)置overflow:hidden，右邊元素的寬度是100%，有一部分被左邊浮動(dòng)元素蓋住，不是我們要的結(jié)果，雖然看起來沒什么區(qū)別。

<style>
    .l, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .r {
        background-color: blueviolet;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">自適應(yīng)</div>
</body>

方案三.將左右元素用一個(gè)display:table的元素包裹，左右元素設(shè)置為display: table-cell

分析：這里主要是基于表格元素，在沒有設(shè)置寬度時(shí)，會(huì)自動(dòng)分配寬度來實(shí)現(xiàn)布局的。

注意：設(shè)置為表格后，在某些瀏覽器可能會(huì)受到表格本身特有行為的影響，比如表格邊框等等。

<style>
    .w {
        display: table;
        table-layout: fixed;
        width: 100%;
    }
    .l, .r {
        display: table-cell;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .r {
        background-color: blueviolet;
    }
</style>
<body>
    <div class="w">
        <div class="l">定寬</div>
        <div class="r">自適應(yīng)</div>
    </div>
</body>

方案四. flex布局

分析：父容器采用flex布局，左邊元素定寬之后，右邊元素，因?yàn)橹挥幸粋€(gè)，所以flex屬性設(shè)置為不是0的正值（也就是設(shè)置flex-grow），都會(huì)占滿剩余空間。

注意：依然是，注意兼容性問題。

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會(huì)多一個(gè)子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實(shí)現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個(gè)實(shí)際上和前面的兩列布局是類似的。

效果圖如下：<style>
     .p {
         display: flex;
         height: 600px;
     }
     .l {
        background-color: aqua;
        width: 400px;
     }
     .r {
         flex: 1;
         background-color: blueviolet;
     }
</style>
 <body>
     <div class="p">
         <div class="l">定寬</div>
         <div class="r">自適應(yīng)</div>
     </div>
 </body>

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實(shí)現(xiàn)一個(gè)兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會(huì)多一個(gè)子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實(shí)現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個(gè)實(shí)際上和前面的兩列布局是類似的。

效果圖如下：

方案一. 定寬 + overflow:hidden

分析：這個(gè)方案和兩列布局方案二是相同的。

<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        width: 400px;
        background-color: blueviolet;
        float: left;
    }
    .r {
        background-color: brown;
        overflow: hidden;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="c">定寬</div>
    <div class="r">自適應(yīng)</div>
</body>

方案二. flex布局

分析：這里布局原理和兩列布局中flex布局方式是相同的。

<style>
     .w {
         display: flex;
         height: 600px;
     }
     .l {
         width: 400px;
         background-color: aqua;
     }
     .c {
         width: 400px;
         background-color: blueviolet;
     }
     .r {
         flex: 1;
         background-color: brown;
     }
</style>
 <body>
     <div class="w">
         <div class="l">定寬</div>
         <div class="c">定寬</div>
         <div class="r">自適應(yīng)</div>
     </div>
 </body>

2.2.2. 圣杯布局

兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素不需要嵌套子元素）

效果圖如下：

方案一. 左右兩側(cè)浮動(dòng)，中間元素使用margin

分析：這種方法就是左右兩邊浮動(dòng)，給定寬度，中間元素使用margin空出左右兩邊元素的位置，實(shí)現(xiàn)比較簡單。

注意：這種方式，需要在書寫html結(jié)構(gòu)時(shí)，將右側(cè)元素寫在中間元素的前面，因?yàn)槿绻覀?cè)元素在中間元素后面，由于浮動(dòng)元素位置上不能高于（或平級(jí)）前面的非浮動(dòng)元素，導(dǎo)致右側(cè)元素會(huì)下沉。但是，中間元素一般都是頁面的核心部分，放在比較后面的位置，不利于SEO。

<style>
    .l, .c, .r {
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
        float: left;
    }
    .c {
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
        float: right;
    }
</style>
<body>
    <div class="l">定寬</div>
    <div class="r">定寬</div>
    <div class="c">自適應(yīng)</div>
</body>

方案二. 父容器使用margin，左中右元素均浮動(dòng)，利用定位和margin移動(dòng)到正確位置

分析：這種方法將中間元素c放置在最前面，有利于SEO。

注意：實(shí)現(xiàn)細(xì)節(jié)在參考下面代碼中的注釋。

<style>
    .w {
        /* margin-left對(duì)應(yīng)左邊元素l的寬度，margin-right對(duì)應(yīng)右邊元素r的寬度 */
        margin-left: 400px;
        margin-right: 400px;
    }
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        position: relative;
        /* 為了讓l元素從當(dāng)前行移動(dòng)到第一行同一位置*/
        margin-left: -100%;
        /* 移動(dòng)到中間元素左側(cè)正確位置 */
        left: -400px;
    }
    .c {
        width: 100%;
        background-color: blueviolet;
    }
    .r {
        width: 400px;
        background-color: brown;
        position: relative;
        /* 為了讓l元素從當(dāng)前行移動(dòng)到上一行*/
        margin-left: -400px;
        right: -400px;
    }
</style>
<body>
    <div class="w">
        <div class="c">自適應(yīng)</div>
        <div class="l">定寬</div>
        <div class="r">定寬</div>
    </div>
</body>

2.2.3. 雙飛翼布局

兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素內(nèi)部增加子元素用于放置內(nèi)容）

效果圖如下：

方案一. 中間元素子元素設(shè)置margin，左中右元素均設(shè)置浮動(dòng)，左右元素通過margin移動(dòng)到正確位置

分析：這種方法為中間元素增加子元素作為內(nèi)容區(qū)域，通過子元素設(shè)置margin完成。

注意：和圣杯布局對(duì)照，有相似處，也有不同，實(shí)現(xiàn)的結(jié)果是一樣的。

<style>
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        /* 為了讓l元素從當(dāng)前行移動(dòng)到第一行同一位置*/
        margin-left: -100%;
    }
    .c {
        width: 100%;
        background-color: blue;
    }
    .i {
        height: 600px;
        background-color: blueviolet;
        margin-left: 400px;
        margin-right: 400px;
    }
    .r {
        width: 400px;
        background-color: brown;
         /* 為了讓r元素移動(dòng)到第一行*/
        margin-left: -400px;
    }
</style>
<body>
    <div class="c">
        <div class="i">自適應(yīng)</div>
    </div>
    <div class="l">定寬</div>
    <div class="r">定寬</div>
</body>

2.2.4. flex布局實(shí)現(xiàn)（中間自適應(yīng)，左右等寬）

分析：flex實(shí)現(xiàn)就很簡單了，可以參照普通三列布局flex實(shí)現(xiàn)。

注意：還是要注意瀏覽器兼容性問題。

<style>
    .w {
        display: flex;
        height: 600px;
    }
    .l {
        width: 400px;
        background-color: aqua;
    }
    .c {
        flex: 1;
        background-color: blueviolet;
    }
    .r {
        width: 400px;
        background-color: brown;
    }
</style>
<body>
    <div class="w">
        <div class="l">定寬</div>
        <div class="c">自適應(yīng)</div>
        <div class="r">定寬</div>
    </div>
</body>

2.3 多列等分布局

所謂多列等分布局，就是若干列在容器中自適應(yīng)等分寬度，我們以五列等分布局為例。

效果圖如下：

方案一. 浮動(dòng) + 百分?jǐn)?shù)平分

分析：這種方案就是每一列浮動(dòng)，之后按照百分比平分寬度，實(shí)現(xiàn)簡單。

<style>
   .col {
       float: left;
       width: 20%;
       height: 300px;
   }
   .col1 {
       background-color: blue;
   }
   .col2 {
       background-color: blueviolet;
   }
   .col3 {
       background-color: aqua;
   }
   .col4 {
       background-color: beige;
   }
   .col5 {
       background-color: salmon;
   }
</style>
<body>
    <div class="w">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

方案二. 使用display: table布局

分析：父容器指定display: table，設(shè)置布局行為table-layout: fixed，指定每個(gè)表格等寬。

注意：table-layout: fixed是需要設(shè)置的，默認(rèn)情況下，列寬度由單元格內(nèi)容設(shè)定，設(shè)置之后，列寬由表格寬度和列寬度設(shè)定。

<style>
    .w {
        display: table;
        /* 列寬由表格寬度和列寬度設(shè)定 */
        table-layout: fixed;
        width: 100%;
    }
   .col {
       display: table-cell;
       height: 300px;
   }
   .col1 {
       background-color: blue;
   }
   .col2 {
       background-color: blueviolet;
   }
   .col3 {
       background-color: aqua;
   }
   .col4 {
       background-color: beige;
   }
   .col5 {
       background-color: salmon;
   }
</style>
<body>
    <div class="w">
        <div class="col col1"></div>
        <div class="col col2"></div>
        <div class="col col3"></div>
        <div class="col col4"></div>
        <div class="col col5"></div>
    </div>
</body>

方案三. 使用column布局

分析：使用column布局，指定內(nèi)容區(qū)域需要分為5列即可。

注意：瀏覽器兼容性問題。

<style>
     .w {
         /* 指定列數(shù) */
         column-count: 5;
         /* 指定列與列之間的間隙，默認(rèn)1em */
         column-gap: 0;
     }
     .col {
         height: 300px;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
</style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>

方案四. 使用flex布局

分析：使用flex布局十分簡單，指定每一列所占空間相同即可

<style>
     .w {
        display: flex;
     }
     .col {
         height: 300px;
         flex: 1;
     }
     .col1 {
         background-color: blue;
     }
     .col2 {
         background-color: blueviolet;
     }
     .col3 {
         background-color: aqua;
     }
     .col4 {
         background-color: beige;
     }
     .col5 {
         background-color: salmon;
     }
</style>
 <body>
     <div class="w">
         <div class="col col1"></div>
         <div class="col col2"></div>
         <div class="col col3"></div>
         <div class="col col4"></div>
         <div class="col col5"></div>
     </div>
 </body>
 </html>

2.4 多列等高布局

所謂多列等高布局，就是多類內(nèi)容可能不一樣，但是保證每一列的高度是相同的，這個(gè)高度應(yīng)該由內(nèi)容最多的那一列決定。

效果圖如下：

方案一. 使用display: table布局

分析：父元素設(shè)置display: table，子元素設(shè)置display: table-cell，這樣布局就是按照表格行為布局，表格單元格默認(rèn)等高。

 <style>
    .w {
        display: table;
    }
    .col {
        display: table-cell;
        width: 20%;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
</style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

方案二. 使用flex布局

分析：默認(rèn)情況下，display: flex的元素align-items屬性值為stretch，如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

<style>
    .w {
        display: flex;
    }
    .col {
        flex: 1;
    }
    .col1 {
        background-color: blue;
    }
    .col2 {
        background-color: blueviolet;
    }
    .col3 {
        background-color: aqua;
    }
    .col4 {
        background-color: beige;
    }
    .col5 {
        background-color: salmon;
    }
</style>
 <body>
     <div class="w">
         <div class="col col1">啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col2">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
         <div class="col col4"></div>
         <div class="col col5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
     </div>
 </body>

3. 全屏布局

所謂全屏布局，就是實(shí)現(xiàn)經(jīng)典的頭部，內(nèi)容區(qū)，底部三大區(qū)域占滿全屏的布局，這種布局很常見。

實(shí)現(xiàn)效果如下：

分析：這里采用的方案是，頭部底部使用fixed定位，中間使用之前講到的兩列布局技術(shù)。

注意：頭部底部可以使用header, footer標(biāo)簽，內(nèi)容區(qū)域結(jié)構(gòu)與布局都是多種多樣的。

<style>
        html, body {
            margin: 0;
            overflow: hidden;
        }
        .header {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            height: 100px;
            background-color: salmon;
        }

        .w {
            position: fixed;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 100px;
            overflow: auto;
            background-color: palevioletred;
        }

        .w .l {
            width: 400px;
            /* height: 100%; */
            position: fixed;
            left: 0;
            top: 100px;
            bottom: 100px;
            background-color: greenyellow;
        }

        .w .r {
            position: fixed;
            left: 400px;
            right: 0;
            top: 100px;
            bottom: 100px;
            background-color: blueviolet;
        }

        .footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            height: 100px;
            background-color: goldenrod;
        }
</style>
    <body>
        <div class="header"></div>
        <div class="w">
            <div class="l"></div>
            <div class="r"></div>
        </div>
        <div class="footer"></div>
    </body>

本篇文章總結(jié)了一些常見布局的實(shí)現(xiàn)方案，css布局的實(shí)現(xiàn)方案很多，需要我們平時(shí)多去積累，選擇合適的方案。

最后，希望隨著時(shí)間的推移，兼容性不再成為我們技術(shù)實(shí)現(xiàn)的障礙，愿世界越來越美好。

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學(xué)習(xí)資料，只要私信：“前端"等3秒后即可獲取地址，
里面概括應(yīng)用網(wǎng)站開發(fā)，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個(gè)知識(shí)點(diǎn)高級(jí)進(jìn)階干貨的相關(guān)視頻資料，等你來拿

在線咨詢

上一篇：用CSS實(shí)現(xiàn)居中的七種方法
下一篇：不得不佩服，美觀小巧的網(wǎng)頁內(nèi)容編輯器-ContentTools

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML中常用的布局元素及布局方式1

TML中常用的布局元素：<table>、<div>+CSS

HTML中常用的3種布局方式：

普通布局

資料文章：

浮動(dòng)布局

資料文章：

彈性布局

資料文章：

定位布局

資料文章：

表格布局

資料文章：

柵格布局

column-gap Specifies the gap between the columns

資料文章：

多列布局

資料文章：

1. 居中相關(guān)的布局

方案一. inline-block + text-align

方案二. 定位 + transform

方案三. display: block + margin: 0 auto

1.2 垂直居中布局

方案一. 定位 + transform

方案二. display: table-cell + vertical-align

1.3 水平垂直居中布局

1.4 使用flex進(jìn)行居中布局

2. N列布局

方案一. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置margin-left

方案二. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置overflow:hidden

方案三.將左右元素用一個(gè)display:table的元素包裹，左右元素設(shè)置為display: table-cell

方案四. flex布局

2.2 三列布局

2.2.1. 普通三列布局

方案一. 定寬 + overflow:hidden

方案二. flex布局

2.2.2. 圣杯布局

方案一. 左右兩側(cè)浮動(dòng)，中間元素使用margin

方案二. 父容器使用margin，左中右元素均浮動(dòng)，利用定位和margin移動(dòng)到正確位置

2.2.3. 雙飛翼布局

方案一. 中間元素子元素設(shè)置margin，左中右元素均設(shè)置浮動(dòng)，左右元素通過margin移動(dòng)到正確位置

2.2.4. flex布局實(shí)現(xiàn)（中間自適應(yīng)，左右等寬）

2.3 多列等分布局

方案一. 浮動(dòng) + 百分?jǐn)?shù)平分

方案二. 使用display: table布局

方案三. 使用column布局

方案四. 使用flex布局

2.4 多列等高布局

方案一. 使用display: table布局

方案二. 使用flex布局

3. 全屏布局

您的項(xiàng)目需求

TML中常用的布局元素：<table>、<div>+CSS

方案一. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置margin-left

方案二. 左邊元素浮動(dòng)，定寬，右邊元素設(shè)置overflow:hidden

方案三.將左右元素用一個(gè)display:table的元素包裹，左右元素設(shè)置為display: table-cell

方案一. 左右兩側(cè)浮動(dòng)，中間元素使用margin

方案二. 父容器使用margin，左中右元素均浮動(dòng)，利用定位和margin移動(dòng)到正確位置

方案一. 中間元素子元素設(shè)置margin，左中右元素均設(shè)置浮動(dòng)，左右元素通過margin移動(dòng)到正確位置

2.2.4. flex布局實(shí)現(xiàn)（中間自適應(yīng)，左右等寬）