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

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

<table>標簽：

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

<table>布局優勢：

table優勢：開發時間短（使用DW開發速度快）；純table各瀏覽器不會有兼容問題；內容可自適應；在搜索引擎排名能靠前；

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

<div>塊級（block-level）標簽：

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

<div>布局優勢：

一.精簡代碼，減少重構難度。

網站使用DIV+CSS布局使代碼很是精簡，css文件可以在網站的任意一個頁面進行調用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網站的話，需手動改很多頁面，而且看著那些表格也會感覺很亂也很浪費時間，但是使用css+div布局只需修改css文件中的一個代碼即可。

二.網頁訪問速度

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

三.SEO優化

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

四.瀏覽器兼容性

若使用table布局網頁，在使用不同瀏覽器情況下會發生錯位，而div+css則不會，無論什么瀏覽器，網頁都不會出現變形情況。

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

1.流動式布局：是HTML網頁默認的布局方式

特點：

1.塊級元素都會在所處的包含元素內自上而下按順序處置延伸分布，且默認狀態下，塊級元素占整個文檔流，默認寬度為100%。

2.內聯元素都會在所處的包含元素內從左到右水平分布顯示，不占整個文檔流。

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

常見的內內聯（行內）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>

2.浮動布局（float）

特點：

浮動布局依靠【浮動屬性 float：left/right/... 】來使標簽脫離文檔流，達到兩個塊級元素并排顯示的效果。

float：left ；浮動脫離當前文檔流浮動。

同時可以依靠【展示屬性display：inline/block/inline-block】來進行行內元素和塊級元素的效果切換。從而達到靈活運用塊級元素和行內元素布局的效果。

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

特點：

當我們應擁div布局是，在第一層塊界面上來做第二層塊界面的開發時，就要用到我們所說的定位布局。

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

網頁是靜態的，網頁上的定位

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

position：relative；相對定位不脫離文檔流，相對于父級標簽元素的位置定位。

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

滾動條移動前

滾動條移動后

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

特點：數值越大，越優先顯示。

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

本文部分內容來自網絡，如有侵權，請聯系修改。

家好，我是三木。

這篇文章，替大家匯總了css的布局方式，在每個布局的結尾附上了我認為比較好的文章鏈接，不僅僅可以當作學習資料，也可以當作方法的查詢手冊，以后開發的時候忘記了某個屬性就來查查。

看完推薦的文章保準解決你 99% 的css布局問題

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

普通布局

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

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

資料文章：

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

浮動布局

使用方法：float:left/right

指定一個元素應沿其容器的左側或右側放置，允許文本和內聯元素環繞它。

float屬性用于定位和格式化內容，例如讓圖像向左浮動到容器中的文本。

float的值有：

left- 元素浮動到其容器的左側
right- 元素浮動到其容器的右側
none- 元素不浮動（將僅顯示在文本中出現的位置）。這是默認的
inherit- 元素繼承其父元素的浮點值

資料文章：

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

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

CSS深入理解之float浮動：https://segmentfault.com/a/1190000014554601

彈性布局

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

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

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

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

容器有以下屬性：

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

資料文章：

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張小圖帶你領略flex布局之美：https://juejin.cn/post/6866914148387651592

定位布局

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

給元素設置postion屬性后，就可以定義該元素的top,bottom,left,right四個屬性。當然postion的值不同，對應的top,bottom,left,right這四個屬性的值代表的含義也不相同

position屬性用來指定一個元素在網頁上的位置，一共有5種定位方式：

static-靜態
relative-相對定位
fixed-固定定位
absolute-絕對定位
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>標簽）和CSS Table（display:table 等相關屬性）。

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

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

table：指定對象作為塊元素級的表格，相當于html標簽<table>
inline-table：指定對象作為內聯元素級的表格，相當于html標簽<table>
table-caption：指定對象作為表格標題，相當于html標簽<caption>
table-cell：指定對象作為表格單元格，相當于html標簽<td>
table-row：指定對象作為表格行，相當于html標簽<tr>
table-row-group：指定對象作為表格行組，相當于html標簽<tbody>
table-column：指定對象作為表格列，相當于html標簽<col>
table-column-group：指定對象作為表格列組顯示，相當于html標簽<colgroup>
table-header-group：指定對象作為表格標題組，相當于html標簽<thead>
table-footer-group：指定對象作為表格腳注組，相當于html標簽<tfoot>

資料文章：

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

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

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

柵格布局

使用方法 ——display：grid

網格布局將網頁劃分成一個個網格，可以任意組合不同的網格，做出各種各樣的布局。

column-gap Specifies the gap between the columns

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

資料文章：

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

CSS Grid 網格布局教程：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：描述元素的列數
column-fill：設置多列內容的平衡填充模式
column-gap：屬性用來設置元素列之間的間隔（gutter）大小
column-rule：屬性規定了列與列之間的直線
column-rule-color：設置在多列布局中被畫在兩列之間的規則（線條）的顏色
column-rule-style：設置在多列布局中被畫在兩列之間的規則（線條）的樣式
column-rule-width：設置在多列布局中被畫在兩列之間的規則（線條）的寬度
column-span：設置某一個內容是否跨多欄顯示。
columns：用來設置元素的列寬和列數

資料文章：

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

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

們前端開發過程中，寫css（包括sass, less, stylus這樣的預處理器）進行設計稿的樣式還原是一項重要的工作，而其中，關于頁面布局的部分，又是書寫樣式代碼時候的重點和難點，這篇文章就盡可能的去總結常見的一些頁面布局實現方案(并不是全部，布局實現方法太多了)，希望能夠對大家有所幫助。

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

1. 居中相關的布局

1.1 水平居中布局

效果圖如下：

方案一. inline-block + text-align

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

注意：text-align屬性是具有繼承性的，會導致自己元素內部的文本也是居中顯示的，需要自身設置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都可以）后，子元素設置絕對定位absolute后，left設置為50%，再使用transform: translateX(-50%)將子元素往反方向移動自身寬度的50%，便完成水平居中。

注意：父級元素是否脫離文檔流，不影響子元素水平居中效果，但是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

分析：這個方法只需要對子元素進行設置就可以實現水平居中，margin設置auto表示瀏覽器會自動分配，實現來外邊距等分效果。

注意：這里子元素設置display為block或者table都是可以的，如果子元素脫離文檔流（浮動，定位），會導致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

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

注意：vertical-align屬性具有繼承性，導致父元素內文本也是垂直居中顯示的。

<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 水平垂直居中布局

效果圖如下：

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

方案一.定位 + 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>

方案二. 結合水平布局方案三，垂直布局方案二

<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進行居中布局

分析：使用flex，水平垂直居中會變得非常容易，默認情況下，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 兩列布局

這里的兩列布局指的是，其中一列是定寬元素，另一列元素寬度自適應。比如，我們實現左列定寬，右列自適應的布局。

效果圖如下：

方案一. 左邊元素浮動，定寬，右邊元素設置margin-left

分析：一個最簡單的做法，左邊元素設置浮動，定寬，右邊元素的margin-left設置為左邊元素寬度大小，可以實現效果。

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

<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">自適應</div>
</body>

方案二. 左邊元素浮動，定寬，右邊元素設置overflow:hidden

分析：右邊元素由于設置overflow:hidden開啟BFC，與外界隔離，所以能實現效果

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

<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">自適應</div>
</body>

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

分析：這里主要是基于表格元素，在沒有設置寬度時，會自動分配寬度來實現布局的。

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

<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">自適應</div>
    </div>
</body>

方案四. flex布局

分析：父容器采用flex布局，左邊元素定寬之后，右邊元素，因為只有一個，所以flex屬性設置為不是0的正值（也就是設置flex-grow），都會占滿剩余空間。

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

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實現一個兩側寬度固定，中間寬度自適應的三列布局，區別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實現的是，左中兩列定寬，右邊一列自適應的布局，這個實際上和前面的兩列布局是類似的。

效果圖如下：<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">自適應</div>
     </div>
 </body>

2.2 三列布局

這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實現一個兩側寬度固定，中間寬度自適應的三列布局，區別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）

2.2.1. 普通三列布局

我們這里實現的是，左中兩列定寬，右邊一列自適應的布局，這個實際上和前面的兩列布局是類似的。

效果圖如下：

方案一. 定寬 + overflow:hidden

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

<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">自適應</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">自適應</div>
     </div>
 </body>

2.2.2. 圣杯布局

兩側寬度固定，中間寬度自適應的三列布局（中間元素不需要嵌套子元素）

效果圖如下：

方案一. 左右兩側浮動，中間元素使用margin

分析：這種方法就是左右兩邊浮動，給定寬度，中間元素使用margin空出左右兩邊元素的位置，實現比較簡單。

注意：這種方式，需要在書寫html結構時，將右側元素寫在中間元素的前面，因為如果右側元素在中間元素后面，由于浮動元素位置上不能高于（或平級）前面的非浮動元素，導致右側元素會下沉。但是，中間元素一般都是頁面的核心部分，放在比較后面的位置，不利于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">自適應</div>
</body>

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

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

注意：實現細節在參考下面代碼中的注釋。

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

2.2.3. 雙飛翼布局

兩側寬度固定，中間寬度自適應的三列布局（中間元素內部增加子元素用于放置內容）

效果圖如下：

方案一. 中間元素子元素設置margin，左中右元素均設置浮動，左右元素通過margin移動到正確位置

分析：這種方法為中間元素增加子元素作為內容區域，通過子元素設置margin完成。

注意：和圣杯布局對照，有相似處，也有不同，實現的結果是一樣的。

<style>
    .l, .c, .r {
        height: 600px;
        float: left;
    }
    .l {
        width: 400px;
        background-color: aqua;
        /* 為了讓l元素從當前行移動到第一行同一位置*/
        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元素移動到第一行*/
        margin-left: -400px;
    }
</style>
<body>
    <div class="c">
        <div class="i">自適應</div>
    </div>
    <div class="l">定寬</div>
    <div class="r">定寬</div>
</body>

2.2.4. flex布局實現（中間自適應，左右等寬）

分析：flex實現就很簡單了，可以參照普通三列布局flex實現。

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

<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">自適應</div>
        <div class="r">定寬</div>
    </div>
</body>

2.3 多列等分布局

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

效果圖如下：

方案一. 浮動 + 百分數平分

分析：這種方案就是每一列浮動，之后按照百分比平分寬度，實現簡單。

<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，設置布局行為table-layout: fixed，指定每個表格等寬。

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

<style>
    .w {
        display: table;
        /* 列寬由表格寬度和列寬度設定 */
        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布局，指定內容區域需要分為5列即可。

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

<style>
     .w {
         /* 指定列數 */
         column-count: 5;
         /* 指定列與列之間的間隙，默認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 多列等高布局

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

效果圖如下：

方案一. 使用display: table布局

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

 <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布局

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

<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. 全屏布局

所謂全屏布局，就是實現經典的頭部，內容區，底部三大區域占滿全屏的布局，這種布局很常見。

實現效果如下：

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

注意：頭部底部可以使用header, footer標簽，內容區域結構與布局都是多種多樣的。

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

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

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

最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學習資料，只要私信：“前端"等3秒后即可獲取地址，
里面概括應用網站開發，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進階干貨的相關視頻資料，等你來拿

在線咨詢

上一篇：用CSS實現居中的七種方法
下一篇：不得不佩服，美觀小巧的網頁內容編輯器-ContentTools

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

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

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

普通布局

資料文章：

浮動布局

資料文章：

彈性布局

資料文章：

定位布局

資料文章：

表格布局

資料文章：

柵格布局

column-gap Specifies the gap between the columns

資料文章：

多列布局

資料文章：

1. 居中相關的布局

方案一. inline-block + text-align

方案二. 定位 + transform

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

1.2 垂直居中布局

方案一. 定位 + transform

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

1.3 水平垂直居中布局

1.4 使用flex進行居中布局

2. N列布局

方案一. 左邊元素浮動，定寬，右邊元素設置margin-left

方案二. 左邊元素浮動，定寬，右邊元素設置overflow:hidden

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

方案四. flex布局

2.2 三列布局

2.2.1. 普通三列布局

方案一. 定寬 + overflow:hidden

方案二. flex布局

2.2.2. 圣杯布局

方案一. 左右兩側浮動，中間元素使用margin

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

2.2.3. 雙飛翼布局

方案一. 中間元素子元素設置margin，左中右元素均設置浮動，左右元素通過margin移動到正確位置

2.2.4. flex布局實現（中間自適應，左右等寬）

2.3 多列等分布局

方案一. 浮動 + 百分數平分

方案二. 使用display: table布局

方案三. 使用column布局

方案四. 使用flex布局

2.4 多列等高布局

方案一. 使用display: table布局

方案二. 使用flex布局

3. 全屏布局

您的項目需求

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

方案一. 左邊元素浮動，定寬，右邊元素設置margin-left

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

方案一. 左右兩側浮動，中間元素使用margin

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

2.2.4. flex布局實現（中間自適應，左右等寬）