整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們經(jīng)常會遇到這樣的一個問題。
設(shè)計(jì)出了很牛逼的設(shè)計(jì)稿，客戶確認(rèn)了，前端靜態(tài)制作也出來，還原設(shè)計(jì)稿95%以上，客戶也確認(rèn)了。
那是個完美啊！！做完程序了，交給客戶了。然后客戶自己上傳了圖片了。那個悲催啊！！慘不忍睹啊！！
完全和設(shè)計(jì)稿兩碼事？圖片不好看，到處都跑位。
客戶就罵過來了，你們是否也遇到這樣的事情？因?yàn)榭蛻舻墓緵]有設(shè)計(jì)師啊，哈哈，這個問題可能遇到的不少。
其實(shí)大家都會說，這歸根到底都是客戶沒有處理圖片的問題所造成的。然后大家都推來推去。
那么，前端制作工程師是否有辦法解決這樣的問題，其實(shí)是可以的。如果因圖片問題導(dǎo)致布局變了，解決了這個問題就只剩下圖片的美觀性，那這個就可以跟客戶說你要請個設(shè)計(jì)師幫你處理圖片啊。這樣不就解決問題了嗎？
這種方式和微信朋友圈的九宮格圖片展示方式類似，只顯示圖片中間的內(nèi)容，其他的將會被隱藏。
舉個栗子：
這個列表是不是很整齊，看起來比較舒服，雖然圖片有那么點(diǎn)點(diǎn)的變形，但不影響閱讀。
如果其中有一張圖片的尺寸稍微有一點(diǎn)點(diǎn)不一樣，肯定會出現(xiàn)跑位的情況。就像下面這樣。這樣客戶看到不被投訴才怪哦！！
那么就以這個來說說解決方式。
大家都知道圖片有一種特性，就是當(dāng)圖片的寬度改變時，高度也會隨著等比例在改變。
例如：一張寬高都為100px的圖片，如果把寬度調(diào)至200px，那么高度是不是也會隨之變成200px；沒錯的，就是利用這個特性來解決布局亂的情況。
這里就拿上一次說到的 “圖文列表 純css布局” 那次說的布局來說說，因?yàn)槎际亲龊茫蜕厦婺莻€圖類似。偷偷懶。如果沒看過那篇，搜一下 “圖文列表 純css布局”，就可以找到了。（如需下載源碼，請關(guān)注微信公眾號：JS學(xué)吧）
效果是這樣的：
如何切出占位圖呢？如下操作
用PS打開文件，用裁剪工具把圖片完整的裁下來，如下圖
裁完成，再點(diǎn)擊菜單欄目 “圖像 > 圖像大小” 或 按著 Alt鍵，再點(diǎn)兩次 I 鍵。可以調(diào)出 “圖像大小” 彈窗。
可以看到 “像素大小” 的寬度和高度都為260px，那么只要調(diào)其中一個就可以，就可以達(dá)到等比例調(diào)整。
我們先調(diào)成10px，確定后，再把圖層的 “小眼睛” 關(guān)掉，另存為一個 png24 的透明圖片，記得哦！！一定是要png24的。名字自己定啦！！
然后把 img 中的圖片路徑改為如下：
<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是發(fā)現(xiàn)原來的圖片不見的，變成空白的，但是原來的布局結(jié)構(gòu)沒有改變。其實(shí)要的就是這樣的效果。
然后我們在 img 的外層再包個div，就拿這個div來放圖片。順便加個背景色看看效果。
<a href="">
<div style="background: #000;">
<img src="rect.png" alt="" width="100%">
</div>
</a>
看，占位圖片的效果出來了。外層div的寬度和高度都被img撐開了。是不是達(dá)到了想要的效果。
關(guān)鍵的時候來了。就是處理圖片。我們要把產(chǎn)品圖片做為背景的形式輸出即可以。把圖片的路徑寫在div上面的就解決了。再加上css3新屬性就可以了。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic001.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
用背景樣式 background-image 定入路徑。再添加一個 cover-img 的類名。然后 cover-img 的樣式如下：
.cover-img {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
注意、注意、注意，中要的事說三遍。重點(diǎn)就在于 css3 的新屬性 background-size: cove；
這個屬性就是會把背景圖片，以等比例的形式保持圖像本身的寬高比例，將圖片縮放到正好完全覆蓋定義背景的區(qū)域。
是不是不明白，那就對了，挺不好理解。最好還是用實(shí)際效果來看看。
最終出來的效果就是和最開始的那張圖片一樣的，只是看不出來而已。
那么我們就來玩真的。直接上網(wǎng)整一張大圖的路徑放進(jìn)去看看就知道了。
上某某網(wǎng)站找特大尺寸的圖片來，例如下面這張：尺寸是2533x1583，夠大了，也不是正方形哦！！我們一開始說的都是正方形，現(xiàn)在弄個不是正方形的圖片來試試效果。
HTML如下：
<a href="">
<div class="cover-img" style="background-image: url(pic002.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
更改url里的路徑即可
出來的效果如下：
是不是自動調(diào)整了。
我們再換一張高形狀的圖片。二哈圖：尺寸是2448x3264
HTML：如下
<a href="">
<div class="cover-img" style="background-image: url(pic003.jpg);">
<img src="rect.png" alt="" width="100%">
</div>
</a>
最終效果：
怎么樣，效果還可以吧！！不知道你們看出了什么了沒有。
第一張是寬形狀的圖片，是以高度填滿 div 的區(qū)域。
第二張是高形狀的圖片，是以寬度填滿 div 的區(qū)域。
全都是靠著 background-size: cover; 這個屬性解決了。但也是有不好的地方。
例如不支持IE瀏覽器，圖片顯示不全，多一個文件服務(wù)器要多請求一次.....等等問題！！做圖時的內(nèi)容盡可能在正中間。
然后，不管客戶上傳什么鬼形狀的圖片，都不會產(chǎn)生布局變亂的情況。
獲取《vue3.0大公司后臺管理系統(tǒng)開發(fā) 正規(guī)開發(fā)流程項(xiàng)目實(shí)踐》視頻，
請點(diǎn)擊下面 “了解更多” 或 請關(guān)注微信公眾號《手把手?jǐn)]碼前端》
局和腳部是 HTML 頁面中兩個重要的區(qū)域。布局區(qū)域用于組織頁面上的內(nèi)容，而腳部區(qū)域通常包含與頁面內(nèi)容無關(guān)但重要的信息。
布局區(qū)域
布局區(qū)域用于將頁面上的內(nèi)容分組和排列。最常用的布局區(qū)域是：
腳部區(qū)域
腳部區(qū)域通常包含以下內(nèi)容：
布局和腳部的組合
布局區(qū)域可以包含腳部區(qū)域。例如，以下代碼展示了如何將腳部區(qū)域包含在布局區(qū)域內(nèi)：
html<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="layout">
<!-- ... -->
<footer>
<p>? 20 vicisslet 20 vicisslet</p>
<p>聯(lián)系：...</p>
<p>社交媒體：...</p>
</footer>
</div>
</body>
</html>
最佳實(shí)踐
結(jié)論
布局和腳部是 HTML 頁面中兩個重要的區(qū)域。通過了解布局和腳部區(qū)域的用法，您可以創(chuàng)建擁有清晰結(jié)構(gòu)和良好閱讀體驗(yàn)的頁面。
們前端開發(fā)過程中，寫css（包括sass, less, stylus這樣的預(yù)處理器）進(jìn)行設(shè)計(jì)稿的樣式還原是一項(xiàng)重要的工作，而其中，關(guān)于頁面布局的部分，又是書寫樣式代碼時候的重點(diǎn)和難點(diǎn)，這篇文章就盡可能的去總結(jié)常見的一些頁面布局實(shí)現(xiàn)方案(并不是全部，布局實(shí)現(xiàn)方法太多了)，希望能夠?qū)Υ蠹矣兴鶐椭?/p>
在開始正題之前，有一點(diǎn)要說明：css布局中遇到的一個繞不開的問題就是瀏覽器兼容性，下面方案會遇到類似transform, flex等的兼容性問題，且由于grid布局兼容性問題，暫不涉及grid布局內(nèi)容，在不同場景，大家選擇合適的布局實(shí)現(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è)置就可以實(shí)現(xiàn)水平居中，margin設(shè)置auto表示瀏覽器會自動分配，實(shí)現(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;實(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>效果圖如下：
前面分別總結(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)。比如，我們實(shí)現(xiàn)左列定寬，右列自適應(yīng)的布局。
效果圖如下：
分析：一個最簡單的做法，左邊元素設(shè)置浮動，定寬，右邊元素的margin-left設(shè)置為左邊元素寬度大小，可以實(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，與外界隔離，所以能實(shí)現(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è)置寬度時，會自動分配寬度來實(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布局，左邊元素定寬之后，右邊元素，因?yàn)橹挥幸粋€，所以flex屬性設(shè)置為不是0的正值（也就是設(shè)置flex-grow），都會占滿剩余空間。
注意：依然是，注意兼容性問題。
2.2 三列布局
這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實(shí)現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）
2.2.1. 普通三列布局
我們這里實(shí)現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個實(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>這里的三列布局，主要分三種情況介紹，第一種是普通三列布局，還有兩種是比較有名的圣杯布局和雙飛翼布局（兩者都是實(shí)現(xiàn)一個兩側(cè)寬度固定，中間寬度自適應(yīng)的三列布局，區(qū)別在于雙飛翼布局比起圣杯布局，中間元素會多一個子元素，而左右元素需要定位relative）
我們這里實(shí)現(xiàn)的是，左中兩列定寬，右邊一列自適應(yīng)的布局，這個實(shí)際上和前面的兩列布局是類似的。
效果圖如下：
分析：這個方案和兩列布局方案二是相同的。
<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空出左右兩邊元素的位置，實(shí)現(xiàn)比較簡單。
注意：這種方式，需要在書寫html結(jié)構(gòu)時，將右側(cè)元素寫在中間元素的前面，因?yàn)槿绻覀?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。
注意：實(shí)現(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完成。
注意：和圣杯布局對照，有相似處，也有不同，實(shí)現(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實(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>所謂多列等分布局，就是若干列在容器中自適應(yī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，設(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，如果項(xiàng)目未設(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>所謂全屏布局，就是實(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í)現(xiàn)的障礙，愿世界越來越美好。
最后送福利了，自己是從事了五年的前端工程師，整理了一份最全面前端學(xué)習(xí)資料，只要私信：“前端"等3秒后即可獲取地址，
里面概括應(yīng)用網(wǎng)站開發(fā)，css，html，JavaScript，jQuery，Ajax，node，angular等。等多個知識點(diǎn)高級進(jìn)階干貨的相關(guān)視頻資料，等你來拿
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
