在布局中，常常出現(xiàn)左邊定寬甜橱，右邊自適應(yīng)布局的情況逊笆，抽象出來(lái)的代碼是：
//css代碼
* {
padding: 0;
margin: 0;
color: #fff;
font-size: 30px;
font-weight: bold;
text-align: center;
box-sizing: border-box;
}
aside {
width: 200px;
height: 200px;
padding-top: 75px;
background: #5A6A94;
}
section {
height: 200px;
padding-top: 75px;
background: #BE4F4F;
}
//html代碼
<!-- 左邊定寬 -->
<aside class="left">Left</aside>
<!-- 右邊自適應(yīng) -->
<section class="right">Right</section>
效果圖：
那么，要實(shí)現(xiàn)如下圖的效果岂傲，應(yīng)該怎么做那：
1.浮動(dòng)布局
- 左邊設(shè)置左浮動(dòng)难裆，右邊寬度設(shè)置100%
.left{
float:left;
}
.right{
width:100%;
}
- 左邊浮動(dòng)，右邊加上一個(gè)margin-left值
.left{
float:left;
}
.right{
margin-left: 200px; /*等于左邊欄寬度*/
}
2.flex布局
父容器設(shè)置 display：flex譬胎；Right部分設(shè)置 flex：1
body{
display: flex;
}
.right{
flex:1
}
3.使用負(fù)margin
首先修改頁(yè)面結(jié)構(gòu)差牛，為自適應(yīng)部分添加容器 .container, 同時(shí)改變左右部分的位置，如下：
<div class="container">
<section class="right">Right</section>
</div>
<aside class="left">Left</aside>
設(shè)置樣式:
.left{
float:left;
margin-left: -100%;
}
.right{
margin-left: 200px;
}
.container{
float:left;
width:100%
}
4.絕對(duì)定位
左右兩邊都絕對(duì)定位
.left{
position: absolute;
left:0;
}
.right{
position: absolute;
left:200px;
width:100%
}
5.table布局
body{
display: table;
width:100%;
}
.left{
display: table-cell;
}
.right{
display: table-cell;
}
使用table-cell還可以實(shí)現(xiàn)很多的布局堰乔，需要自己去發(fā)揮想象偏化。總結(jié)下來(lái)也就需要記住幾點(diǎn)镐侯，設(shè)置了display:table-cell的元素具有以下特性侦讨。
- text-align驶冒、vertical-align等對(duì)齊屬性起作用，margin不起作用韵卤。寬高百分比值不起作用骗污。
- 會(huì)生成虛擬的table、tr把自己包裹住沈条，如果有相鄰的兄弟元素也被設(shè)置了table-cell,則會(huì)跟兄弟元素一起生成虛擬的table需忿、tr把自己包裹住，并一行等高顯示
- 多個(gè)table-cell元素會(huì)占滿被設(shè)置了display: table的元素的寬度蜡歹，如果一個(gè)元素被設(shè)置了寬度屋厘，那么其他剩余的table-cell元素會(huì)占滿剩下的寬度。當(dāng)然月而，如果只有一個(gè)table-cell元素汗洒，就算設(shè)置了寬度也會(huì)占滿table元素的寬度。
- 對(duì)設(shè)置了float父款、absolute的元素不起作用溢谤。且IE6、7不支持
