一寄猩、單列布局
常見單列布局分為：
- header驹暑、content和footer等寬的單列布局；
- header矛市、footer等寬芙沥，content略窄的單列布局诲祸。
實現(xiàn)方式
- 先將
header浊吏、content、footer統(tǒng)一設(shè)置width: 960px;或者max-width: 960px救氯。然后設(shè)置margin: auto;實現(xiàn)居中
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: purple;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: pink;
}
-
header找田、footer的內(nèi)容寬度不設(shè)置，塊級元素充滿整個屏幕着憨，header墩衙、content和footer的內(nèi)容區(qū)域設(shè)置同一個width，通過margin: auto;居中甲抖。
<div class="header">
<div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.nav{
margin: 0 auto;
max-width: 800px;
background-color: darkgray;
height: 50px;
}
.content{
margin: 0 auto;
max-width: 800px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
二漆改、兩列自適應(yīng)布局
實現(xiàn)方式
- float+margin
普通的兩列布局可采用左側(cè)左浮動，右側(cè)設(shè)置margin-left
<div class="left"></div>
<div class="main"></div>
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
}
.main{
height:100px;
background:#777;
margin-left:200px;
}
利用浮動和負外邊距進行固定右邊自適應(yīng)布局
<div class="left"></div>
<div class="wrap">
<div class="main"></div>
</div>
.left{
width:200px;
height:100px;
background:#abcdef;
float:left;
margin-right:- 200px; /*如果不設(shè)置負右外邊距准谚，.warp會被擠到下一行挫剑；設(shè)置多大呢？絕對值大于等于左邊欄目寬度即可*/
}
.wrap{
width:100%;
height:100px;
background:#777;
}
.main{
margin-left:200px; /*等于左邊欄的寬度*/
background:orange;
height:100px;
}
- float+overflow:hiddle
自適應(yīng)的兩列布局可采用此種方式柱衔，這種辦法主要通過overflow觸發(fā)BFC,而BFC不會重疊浮動元素樊破。由于設(shè)置overflow:hidden并不會觸發(fā)IE6-瀏覽器的haslayout屬性愉棱，所以需要設(shè)置zoom:1來兼容IE6-瀏覽器。
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
左中右布局
- 浮動+margin
左欄左浮動哲戚，右欄右浮動奔滑，主體放在最后。
注意：主體main標簽放在最后顺少，左右隨意
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
html,body{
margin:0;
height:100%;
}
#main{
height:100%;
margin:0 210px;
background: blue;
}
#left,#right{
width:200px;
height:100%;
background: green;
}
#left{
float:left;
}
#right{
float:right;
}
- 絕對定位+margin
左右兩欄采用絕對定位朋其，分別固定于頁面的左右兩側(cè)，中間的主體欄用左右margin值撐開距離祈纯。于是實現(xiàn)了三欄自適應(yīng)布局令宿。div順序沒有要求。
<div id="left"></div>
<div id="right"></div>
<div id="main"></div>
html,body{
margin:0;
height:100%;
}
#left,#right{
position:absolute;
top:0;
width:200px;
height:100%;
}
#left{
left:0;
background:#a0b3d6;
}
#right{
right:0;
background:#a0b3d6;
}
#main{
margin:0 210px;
background:#ffe6b8;
height:100%;
}
在用絕對定位時腕窥，通常會在其父元素使用相對定位粒没，即position:absolute和position:relative是成對出現(xiàn)的，兩者相輔相成簇爆。
- flex布局
父元素設(shè)置
display: flex;子元素會默認排成一行癞松，通過設(shè)置其他屬性改變布局方式
.father{
display: flex;
justify-content:space-between;
}
來源網(wǎng)絡(luò)
【未完待續(xù)......】
