三列布局
本篇講三列布局大诸，面試惩背В考題贯卦，自己總結(jié)的，如有什么問(wèn)題焙贷，歡迎指出撵割！我會(huì)用紅色標(biāo)注出主要作用部分，都是最精簡(jiǎn)的寫(xiě)法辙芍，啡彬，沒(méi)有多余的修飾。
布局方式一:兩邊固定中間自適應(yīng)
1.flex布局
思路：將父元素box設(shè)為display:flex;可將box設(shè)置為彈性盒模型進(jìn)行布局（如果對(duì)flex不了解故硅，可點(diǎn)擊打開(kāi)鏈接學(xué)習(xí)）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width:100%;
height:100px;
display:flex;
margin:10px;
}
#left,#right{
width:200px;
height:100px;
margin:10px;
background-color:#999;
}
#center{
flex:1;
height:100px;
margin:10px;/*左右margin不會(huì)疊加*/
background-color:#f00;
}
</style>
</head>
<body>
<div id="box">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
2.利用浮動(dòng)（float）
讓左右元素浮動(dòng)庶灿，缺點(diǎn)是中間元素必須置于二者之后，不然right元素會(huì)進(jìn)入下一行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left,.right{
width:200px;
height:200px;
background-color:#999;
}
.left{
float:left;
}
.right{
float:right;
}
.center{
margin:0 200px;
height:300px;
background-color:#f00;
}
</style>
</head>
<body>
<!--該布局法的好處是受外界影響小吃衅，但是不足是 三個(gè)元素的順序往踢，center一定要放在最后，這是
和絕對(duì)定位不一樣的地方徘层，center占據(jù)文檔流位置峻呕，所以一定要放在最后，左右兩個(gè)元素位置沒(méi)有關(guān)系趣效。
當(dāng)瀏覽器窗口很小的時(shí)候瘦癌，右邊元素會(huì)被擊倒下一行。-->
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</body>
</html>
3.利用絕對(duì)定位（position）
center居中并利用margin為左右兩邊留出位置跷敬，左右絕對(duì)定位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css三列布局</title>
<style type="text/css">
/*左右固定讯私，中間自適應(yīng) 利用絕對(duì)定位*/
.container{
width: 100%;
height: 100%;
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: black;
color:#fff;
}
.center{
/*width: auto;*/ /*如果沒(méi)有這一句，那么西傀，center這個(gè)div的文字就不會(huì)自動(dòng)換行*/
margin: 0 400px;
height: 400px;
background-color: yellow;
}
.right{
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
4.對(duì)中間的寬度進(jìn)行calc計(jì)算
三個(gè)元素都向左浮動(dòng)妄帘，左右定寬，中間的對(duì)其進(jìn)行計(jì)算池凄，讓100%寬度減去左右寬度，即為中間寬度鬼廓。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.container{
overflow: hidden;
}
.left,.right{
float: left;
width: 100px;
background:red;
}
.center{
float: left;
width:calc(100% - 200px);
background:yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
5.雙飛翼布局（重點(diǎn)來(lái)了）
目的：為了優(yōu)先顯示中間主要部分肿仑，瀏覽器渲染引擎在構(gòu)建和渲染渲染樹(shù)是異步的（誰(shuí)先構(gòu)建好誰(shuí)先顯示），故在編寫(xiě)時(shí)碎税，先構(gòu)建中間main部分尤慰，但由于布局原因，將left置于center左邊雷蹂，故而出現(xiàn)了雙飛翼布局伟端。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {min-width: 550px;}
.col {float: left;}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px;/*這是圣杯和雙飛翼最明顯的區(qū)別，在main內(nèi)部使用的是margin匪煌，而圣杯是直接在container部分使用padding*/
}
#left,#right {
width: 190px;
height: 200px;
background-color: #0000FF;
}
#left{
margin-left: -100%;
}
#right {
margin-left: -190px;
background-color: #FF0000;
}
</style>
</head>
<body>
<div id="container">
<div id="main" class="col">
<div id="main-wrap"> #main </div>
</div>
<div id="left" class="col">#left</div>
<div id="right" class="col">#right</div>
</div>
</body>
</html>
這種布局的好處是：兩邊（left和right）不會(huì)蓋住中間(center)部分责蝠，left和right蓋住的是wrap元素的兩邊党巾，即main-wrap的margin部分。
6.圣杯布局（也是重點(diǎn)）
優(yōu)先渲染主要部分,此部分參考了木羽zwwill
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper {
padding: 0 100px;
overflow:hidden;
}
.col {
position: relative;
float: left;
}
.main {
width: 100%;
height: 200px;
background:yellow;
}
.left,.right {
width: 100px;
height: 200px;
background:red;
}
.left{
margin-left: -100%;
left: -100px;
}
.right {
margin-left: -100px;
right: -100px;
}
</style>
</head>
<body>
<section class="wrapper">
<section class="col main">main</section>
<aside class="col left">left</aside>
<aside class="col right">right</aside>
</section>
</body>
</html>
圣杯布局的缺點(diǎn)：正常情況下是沒(méi)有問(wèn)題的霜医，但是特殊情況下就會(huì)暴露此方案的弊端齿拂，如果將瀏覽器無(wú)線放大時(shí)，「圣杯」將會(huì)「破碎」掉肴敛。如圖署海，當(dāng)main部分的寬小于left部分時(shí)就會(huì)發(fā)生布局混亂。
圣杯布局和雙飛翼的區(qū)別：（按我自己理解）
圣杯布局是整體使用了一個(gè)container（上例的wrapper）医男，將三列放入其中砸狞，left和right占據(jù)的是wrapper的padding-left和 padding-right(上例第八行padding:0 100px;)。
雙飛翼布局是在center部分多加了一個(gè)節(jié)點(diǎn)元素镀梭，left和right部分的位置在main-wrap的margin（magin-left和margin-right）部分刀森。
<div id="main" class="col">
<div id="main-wrap"> #main </div>
</div>
布局方式二:兩邊自適應(yīng)中間固定
1.css3布局
目前沒(méi)有瀏覽器支持 box-flex 屬性。Firefox 支持替代的 -moz-box-flex 屬性丰辣。Safari撒强、Opera 以及 Chrome 支持替代的 -webkit-box-flex 屬性。
box-flex 屬性規(guī)定框的子元素是否可伸縮其尺寸笙什。提示：可伸縮元素能夠隨著框的縮小或擴(kuò)大而縮寫(xiě)或放大飘哨。只要框中有多余的空間，可伸縮元素就會(huì)擴(kuò)展來(lái)填充這些空間琐凭。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div[class=me] {
display: -webkit-box;
}
div div {
background: red;
height: 100px;
}
div div:nth-child(1) {
-webkit-box-flex:1;
}
div div:nth-child(2) {
width: 800px;
background: #ccc;
}
div div:nth-child(3) {
-webkit-box-flex:1;
}
</style>
</head>
<body>
<div class="me">
<div>left</div>
<div>center</div>
<div>right</div>
</div>
</body>
</html>
2.flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrap{
display:flex;
flex-direction:row;
margin-top:20px;
}
.center{
width:800px;
text-align:center;
background:#ccc;
}
.left,.right{
/*flex-grow 屬性用于設(shè)置或檢索彈性盒的擴(kuò)展比率芽隆。*/
flex-grow: 1;
line-height: 30px;
background:red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
利用flex-grow進(jìn)行布局，詳見(jiàn)flex-grow屬性
3.左右利用calc()函數(shù)計(jì)算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#container{
height:200px;
width: 100%;
}
#left,#right{
float:left;
background-color:#ccc;
height:100%;
width: calc(50% - 500px);
}
#center{
float:left;
background-color:yellow;
height:100%;
width:1000px;
}
</style>
</head>
<body>
<div id="container">
<div id="left">left</div>
<div id="center">center</div>
<div id="right">right</div>
</div>
</body>
</html>
兩邊自適應(yīng)中間固定暫時(shí)整理到這三種方法统屈。
作者：DOM曼珠沙華
來(lái)源：CSDN
原文：https://blog.csdn.net/a18792627168/article/details/79686746
版權(quán)聲明：本文為博主原創(chuàng)文章胚吁，轉(zhuǎn)載請(qǐng)附上博文鏈接！
