整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
<table>標(biāo)簽：
<table>指的是表格，用表格來搭建界面布局，即用表格的嵌套，來搭建界面布局。
<table>布局優(yōu)勢：
table優(yōu)勢：開發(fā)時間短（使用DW開發(fā)速度快）；純table各瀏覽器不會有兼容問題；內(nèi)容可自適應(yīng)；在搜索引擎排名能靠前；
但是 table如果布局變更，需要重新開發(fā)；如果table里有div ul 等，可能會出現(xiàn)瀏覽器兼容問題；加載速度慢；table嵌套的太多，運維是非常困難的。
<div>塊級（block-level）標(biāo)簽：
DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。有時可以稱其為圖層。
<div>布局優(yōu)勢：
一.精簡代碼，減少重構(gòu)難度。
網(wǎng)站使用DIV+CSS布局使代碼很是精簡，css文件可以在網(wǎng)站的任意一個頁面進(jìn)行調(diào)用，而若是使用table表格修改部分頁面卻是顯得很麻煩。要是一個門戶網(wǎng)站的話，需手動改很多頁面，而且看著那些表格也會感覺很亂也很浪費時間，但是使用css+div布局只需修改css文件中的一個代碼即可。
二.網(wǎng)頁訪問速度
使用了DIV+CSS布局的網(wǎng)頁與Table布局比較，精簡了許多頁面代碼，那么其瀏覽訪問速度自然得以提升，也從而提升了網(wǎng)站的用戶體驗度。
三.SEO優(yōu)化
采用div-css布局的網(wǎng)站對于搜索引擎很是友好，因此其避免了Table嵌套層次過多而無法被搜索引擎抓取的問題，而且簡潔、結(jié)構(gòu)化的代碼更加有利于突出重點和適合搜索引擎抓取。
四.瀏覽器兼容性
若使用table布局網(wǎng)頁，在使用不同瀏覽器情況下會發(fā)生錯位，而div+css則不會，無論什么瀏覽器，網(wǎng)頁都不會出現(xiàn)變形情況。
1.流動式布局：是HTML網(wǎng)頁默認(rèn)的布局方式
特點：
1.塊級元素都會在所處的包含元素內(nèi)自上而下按順序處置延伸分布，且默認(rèn)狀態(tài)下，塊級元素占整個文檔流，默認(rèn)寬度為100%。
2.內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示，不占整個文檔流。
常見的塊級（block）元素有：<h1-h5> 、<table>、 <ul>、<li> 、<p> 、<form>、 ol
常見的內(nèi)內(nèi)聯(lián)（行內(nèi)）元素有：<a>、<span>、<img>、<input>、<select>、<textarea>
2.浮動布局（float）
特點：
浮動布局依靠【 浮動屬性 float：left/right/... 】來使標(biāo)簽脫離文檔流，達(dá)到兩個塊級元素并排顯示的效果。
float：left ； 浮動脫離當(dāng)前文檔流浮動。
同時可以依靠【展示屬性display：inline/block/inline-block】來進(jìn)行行內(nèi)元素和塊級元素的效果切換。從而達(dá)到靈活運用塊級元素和行內(nèi)元素布局的效果。
3.層模型布局又叫定位布局
特點：
當(dāng)我們應(yīng)擁div布局是，在第一層塊界面上來做第二層塊界面的開發(fā)時，就要用到我們所說的定位布局。
通過運用【定位屬性position:absolute/relative/fixed】 來進(jìn)行第二層界面的定位布局。
網(wǎng)頁是靜態(tài)的，網(wǎng)頁上的定位
position：absolute ；絕對定位脫離文檔流，不受浮動影響，就是相對于窗體（body）邊界的margin定位。
position：relative； 相對定位不脫離文檔流，相對于父級標(biāo)簽元素的位置定位。
position:fixed；固定位置，不會受任何因素影響。
滾動條移動前
滾動條移動后
優(yōu)先層顯示方法：【屬性：z-index:0/1/2...】
特點： 數(shù)值越大，越優(yōu)先顯示。
注意：只有元素使用了position屬性的，才具有z-index屬性。
本文部分內(nèi)容來自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系修改。
家好，我是三木。
這篇文章，替大家匯總了css的布局方式，在每個布局的結(jié)尾附上了我認(rèn)為比較好的文章鏈接，不僅僅可以當(dāng)作學(xué)習(xí)資料，也可以當(dāng)作方法的查詢手冊，以后開發(fā)的時候忘記了某個屬性就來查查。
看完推薦的文章保準(zhǔn)解決你 99% 的css布局問題
每篇文章不僅僅包含介紹，還有代碼案例，以及如w3c網(wǎng)站的在線代碼編輯，可以自己修改屬性嘗試。
使用方法——display: block/inline/inline-block
根據(jù)CSS規(guī)范的規(guī)定，每一個網(wǎng)頁元素都有一個display屬性，用于確定該元素的類型，每一個元素都有默認(rèn)的display屬性值，比如div元素，它的默認(rèn)display屬性值為“block”，成為“塊級”元素(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
使用方法：float:left/right
指定一個元素應(yīng)沿其容器的左側(cè)或右側(cè)放置，允許文本和內(nèi)聯(lián)元素環(huán)繞它。
float屬性用于定位和格式化內(nèi)容，例如讓圖像向左浮動到容器中的文本。
float的值有：
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 的子元素之間提供了強(qiáng)大的空間分布和對齊能力。
容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結(jié)束位置叫做main end；交叉軸的開始位置叫做cross start，結(jié)束位置叫做cross end。
項目默認(rèn)沿主軸排列。單個項目占據(jù)的主軸空間叫做main size，占據(jù)的交叉軸空間叫做cross size。
容器有以下屬性：
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四個屬性。當(dāng)然postion的值不同，對應(yīng)的top,bottom,left,right這四個屬性的值代表的含義也不相同
position屬性用來指定一個元素在網(wǎng)頁上的位置，一共有5種定位方式：
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總共包含如下值
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
網(wǎng)格布局將網(wǎng)頁劃分成一個個網(wǎng)格，可以任意組合不同的網(wǎng)格，做出各種各樣的布局。
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
淺談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è)計稿的樣式還原是一項重要的工作，而其中，關(guān)于頁面布局的部分，又是書寫樣式代碼時候的重點和難點，這篇文章就盡可能的去總結(jié)常見的一些頁面布局實現(xiàn)方案(并不是全部，布局實現(xiàn)方法太多了)，希望能夠?qū)Υ蠹矣兴鶐椭?/p>
在開始正題之前，有一點要說明：css布局中遇到的一個繞不開的問題就是瀏覽器兼容性，下面方案會遇到類似transform, flex等的兼容性問題，且由于grid布局兼容性問題，暫不涉及grid布局內(nèi)容，在不同場景，大家選擇合適的布局實現(xiàn)方案即可。
1.1 水平居中布局
效果圖如下：
分析：display設(shè)置為inline-block的元素，具有文本元素的性質(zhì)，其父元素可以通過設(shè)置文本對齊屬性text-align來控制其在行內(nèi)的對齊方式，text-align: center即為水平對齊
注意：text-align屬性是具有繼承性的，會導(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>分析：父元素開啟定位（relative，absolute,fixed都可以）后，子元素設(shè)置絕對定位absolute后，left設(shè)置為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>分析：這個方法只需要對子元素進(jìn)行設(shè)置就可以實現(xiàn)水平居中，margin設(shè)置auto表示瀏覽器會自動分配，實現(xiàn)來外邊距等分效果。
注意：這里子元素設(shè)置display為block或者table都是可以的，如果子元素脫離文檔流（浮動，定位），會導(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>效果圖如下：
這種方案和之前水平居中布局的方案二是同樣的原理，不在贅述
<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>分析：設(shè)置display: table-cell的元素具有td元素的行為，它的子元素布局方式類似文本元素，可以在父元素使用vertical-align: middle;實現(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>效果圖如下：
前面分別總結(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>分析：使用flex，水平垂直居中會變得非常容易，默認(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.1 兩列布局
這里的兩列布局指的是，其中一列是定寬元素，另一列元素寬度自適應(yīng)。比如，我們實現(xiàn)左列定寬，右列自適應(yīng)的布局。
效果圖如下：
分析：一個最簡單的做法，左邊元素設(shè)置浮動，定寬，右邊元素的margin-left設(shè)置為左邊元素寬度大小，可以實現(xiàn)效果。
注意：我們左邊元素使用了浮動，但是右邊元素沒有浮動
<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>分析：右邊元素由于設(shè)置overflow:hidden開啟BFC，與外界隔離，所以能實現(xiàn)效果
注意：overflow:hidden的設(shè)置也使得右邊元素內(nèi)容超出隱藏。這里如果不設(shè)置overflow:hidden，右邊元素的寬度是100%，有一部分被左邊浮動元素蓋住，不是我們要的結(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>分析：這里主要是基于表格元素，在沒有設(shè)置寬度時，會自動分配寬度來實現(xiàn)布局的。
注意：設(shè)置為表格后，在某些瀏覽器可能會受到表格本身特有行為的影響，比如表格邊框等等。
<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屬性設(shè)置為不是0的正值（也就是設(shè)置flex-grow），都會占滿剩余空間。
注意：依然是，注意兼容性問題。
2.2 三列布局
這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）
2.2.1. 普通三列布局
我們這里實現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個實際上和前面的兩列布局是類似的。
效果圖如下：<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>這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）
我們這里實現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個實際上和前面的兩列布局是類似的。
效果圖如下：
分析：這個方案和兩列布局方案二是相同的。
<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布局方式是相同的。
<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>兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素不需要嵌套子元素）
效果圖如下：
分析：這種方法就是左右兩邊浮動，給定寬度，中間元素使用margin空出左右兩邊元素的位置，實現(xiàn)比較簡單。
注意：這種方式，需要在書寫html結(jié)構(gòu)時，將右側(cè)元素寫在中間元素的前面，因為如果右側(cè)元素在中間元素后面，由于浮動元素位置上不能高于（或平級）前面的非浮動元素，導(dǎo)致右側(cè)元素會下沉。但是，中間元素一般都是頁面的核心部分，放在比較后面的位置，不利于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>分析：這種方法將中間元素c放置在最前面，有利于SEO。
注意：實現(xiàn)細(xì)節(jié)在參考下面代碼中的注釋。
<style>
.w {
/* margin-left對應(yīng)左邊元素l的寬度，margin-right對應(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)前行移動到第一行同一位置*/
margin-left: -100%;
/* 移動到中間元素左側(cè)正確位置 */
left: -400px;
}
.c {
width: 100%;
background-color: blueviolet;
}
.r {
width: 400px;
background-color: brown;
position: relative;
/* 為了讓l元素從當(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>兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局（中間元素內(nèi)部增加子元素用于放置內(nèi)容）
效果圖如下：
分析：這種方法為中間元素增加子元素作為內(nèi)容區(qū)域，通過子元素設(shè)置margin完成。
注意：和圣杯布局對照，有相似處，也有不同，實現(xiàn)的結(jié)果是一樣的。
<style>
.l, .c, .r {
height: 600px;
float: left;
}
.l {
width: 400px;
background-color: aqua;
/* 為了讓l元素從當(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元素移動到第一行*/
margin-left: -400px;
}
</style>
<body>
<div class="c">
<div class="i">自適應(yīng)</div>
</div>
<div class="l">定寬</div>
<div class="r">定寬</div>
</body>分析：flex實現(xiàn)就很簡單了，可以參照普通三列布局flex實現(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>所謂多列等分布局，就是若干列在容器中自適應(yīng)等分寬度，我們以五列等分布局為例。
效果圖如下：
分析：這種方案就是每一列浮動，之后按照百分比平分寬度，實現(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，設(shè)置布局行為table-layout: fixed，指定每個表格等寬。
注意：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布局，指定內(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布局十分簡單，指定每一列所占空間相同即可
<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>所謂多列等高布局，就是多類內(nèi)容可能不一樣，但是保證每一列的高度是相同的，這個高度應(yīng)該由內(nèi)容最多的那一列決定。
效果圖如下：
分析：父元素設(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>分析：默認(rèn)情況下，display: flex的元素align-items屬性值為stretch，如果項目未設(shè)置高度或設(shè)為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>所謂全屏布局，就是實現(xiàn)經(jīng)典的頭部，內(nèi)容區(qū)，底部三大區(qū)域占滿全屏的布局，這種布局很常見。
實現(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é)了一些常見布局的實現(xiàn)方案，css布局的實現(xiàn)方案很多，需要我們平時多去積累，選擇合適的方案。
最后，希望隨著時間的推移，兼容性不再成為我們技術(shù)實現(xiàn)的障礙，愿世界越來越美好。
最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學(xué)習(xí)資料，只要私信：“前端"等3秒后即可獲取地址，
里面概括應(yīng)用網(wǎng)站開發(fā)，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點高級進(jìn)階干貨的相關(guān)視頻資料，等你來拿
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
