CSS中常見布局方式有哪些？下面本篇文章就來給大家介紹一下CSS中的常見布局方式，希望對大家有所幫助。
在介紹CSS布局方式之前我先簡單說明一下html中的三種布局方式：
- 流動布局（默認）
- 浮動布局（float）
- 定位布局（position）
好了，這里就不詳細介紹這三種布局了，今天我們的重頭戲是探索CSS中常見的布局方式有哪些？
一、單列布局
常見的單列布局有兩種：
- header,content 和 footer 等寬的單列布局
- header 與 footer 等寬,content 略窄的單列布局
實現第一種方式很簡單，可以將 header , content, footer 統一設置相等寬度，然后設置 margin:auto 即可實現居中：
<!-- html代碼 --> <p class="header"></p> <p class="content"></p> <p class="footer"></p> <!-- css代碼 --> .header{ margin:0 auto; max-width: 960px; height:100px; } .content{ margin: 0 auto; max-width: 960px; height: 400px; } .footer{ margin: 0 auto; max-width: 960px; height: 100px; }
對於第二種，header 和 footer 可以不用設置寬度，讓其充滿整個屏幕（默認100%），只需將三者的內容設置同一個 width ，然后在通過 margin:auto 讓其內容居中
二、兩列自適應布局
兩列自適應布局是指一列由內容撐開，另一列撐滿剩余寬度的布局方式
實現方式：
- float+overflow:hidden
- Flex 布局
- Grid 布局
1. float+overflow:hidden
實現原理：通過設置 overflow 觸發 BFC ，而 BFC 不會重疊浮動元素
<div class="container"> <div class="left">left</div> <div class="right">right</div> </div> <style> .container{ /* 觸發BFC格局 */ overflow: hidden; /* 兼容IE6-瀏覽器 */ zoom: 1; } .left{ float: left; background-color: blue; } .right{ overflow: hidden; zoom: 1; background-color: pink; } </style>
注意：上述代碼是左側欄固定，右側自適應。
2. Flex 布局
Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為 Flex 布局
Flex 布局是2009年W3C提出了一種新布局方案，在現在也得以廣泛使用，特別是移動端最優！
Flex 可以簡便、完整、響應式地實現各種頁面布局
詳細了解 Flex 布局請點擊：Flex布局
/* html同上 */ .container{ display: flex; } .right{ flex: 1; }
只需兩行代碼即可完成兩列自適應布局，是不是很香~
3.Grid 布局
Grid布局，是一個基於網格的二維布局系統，目的是用來優化用戶界面設計。
詳細了解Grid布局請點擊：Grid布局
/* html同上 */ .container{ display: grid; grid-template-columns: auto 1fr; grid-gap: 20px; }
三、三欄布局
特征：中間列自適應寬度，旁邊兩側固定寬度，實現三欄布局有多種方式：
1.浮動布局
這種布局方式，dom 結構必須是先寫浮動部分，然后再中間塊，否則右浮動塊會掉到下一行。
浮動布局的優點就是比較簡單，兼容性也比較好。但浮動布局是有局限性的，浮動元素脫離文檔流，要做清除浮動，這個處理不好的話，會帶來很多問題，比如父容器高度塌陷等。
HTML代碼：
<div class="main"> <div class="left">左</div> <div class="right">右</div> <div class="center">中 <h2>浮動布局</h2> </div> </div>
CSS代碼：
/* 清除所有標簽默認樣式 */ *{ margin: 0; padding: 0; } .left{ float: left; width: 300px; height: 100px; background: pink; } .right{ float: right; width: 300px; height: 100px; background: red; } .center{ margin-left: 300px; margin-right: 300px; background-color: lightblue; }
效果圖：
在這里給 .center 類設置左右外邊距是因為兩側的浮動元素占300像素，不設置外邊距中間內容多就會出現如下情況：
在前面也說了，浮動實現的三欄布局會使元素脫離文檔流，所以為了不影響其他元素的顯示需要清除浮動：
.main::after{ content:''; display: block; clear: both; }
2.絕對定位布局
HTML代碼：
<div class="main"> <div class="left">左</div> <div class="center">中 絕對定位布局 </div> <div class="right">右</div> </div>
CSS代碼：
*{ margin: 0; padding: 0; } .main{ position: relative; } .left{ position: absolute; left: 0; width: 300px; background-color: red; } .center{ position: absolute; left: 300px; right: 300px; background-color: blue; } .right{ position: absolute; right: 0; width: 300px; background-color: pink; }
在這里，由於 absolute 是相當於 static 定位以外的第一個父元素進行定位，所以我們要給其父元素添加 position:relative 屬性
絕對定位布局優點就是快捷，設置很方便，而且也不容易出問題。
缺點就是，容器脫離了文檔流，后代元素也脫離了文檔流，高度未知的時候，會有問題，這就導致了這種方法的有效性和可使用性是比較差的。
3.表格布局
table是一種常見的布局方式，他可以將整個頁面按照表格的方式設置為多行多列，但是由於書寫table標簽比較麻煩尤其是涉及到table內嵌table的時候，所以CSS給我們提供了 display:table 的方式可以讓我們方便的使用table布局, 設置子元素為列的屬性為 display:table-cell
.main{ width: 100%; display: table; } .left,.center,.right{ display: table-cell; } .left{ width: 300px; background-color: red; } .center{ background-color: green; } .right{ width: 300px; background-color: pink; }
表格布局的兼容性很好，在 flex 布局不兼容的時候，可以嘗試表格布局。
同樣，不是誰都是完美的，表格布局也存在一定的缺陷：
- 無法設置欄邊距
- 對
seo不友好 - 當其中一個單元格高度超出的時候，兩側的單元格也是會跟着一起變高的
4.彈性布局
這里彈性(flex)布局就不再過多解釋，感興趣的小伙伴可以查看阮一峰大佬的詳細教程：Flex布局
.main { display: flex; } .left{ width: 400px; background-color: red; } .center{ background-color: pink; flex: 1; } .right{ background-color: green; width: 400px; }
flexbox 布局是比較完美的一個三欄布局方案，flexbox 的缺點就是 IE10 開始支持，但是 IE10 的是-ms 形式的
5.網格布局
同樣，網格(grid)布局也不再詳細介紹，感興趣的小伙伴請查看：Grid布局
將屬性 display 值設為 grid 或 inline-grid 就創建了一個網格容器，所有容器直接子結點自動成為網格項目。
gird提供了 gird-template-columns、grid-template-rows屬性讓我們設置行和列的高、寬
div{ display: grid; width: 100%; grid-template-columns: 300px auto 300px; grid-template-rows: 150px; }
注意：網格布局的兼容性不好。IE10+上支持，而且也僅支持部分屬性。
以上就是CSS中常見的布局方式了，幾種方式各有各的優點和缺點，沒有一個方法可以說是完美的，可以按照實際情況來選擇使用！🧡💛💚💙💜