在布局中，常常出现左边定宽，右边自适应布局的情况，抽象出来的代码是：
//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>
<!-- 右边自适应 -->
<section class="right">Right</section>
效果图：
那么，要实现如下图的效果，应该怎么做那：
1.浮动布局
- 左边设置左浮动，右边宽度设置100%
.left{
float:left;
}
.right{
width:100%;
}
- 左边浮动，右边加上一个margin-left值
.left{
float:left;
}
.right{
margin-left: 200px; /*等于左边栏宽度*/
}
2.flex布局
父容器设置 display：flex；Right部分设置 flex：1
body{
display: flex;
}
.right{
flex:1
}
3.使用负margin
首先修改页面结构，为自适应部分添加容器 .container, 同时改变左右部分的位置，如下：
<div class="container">
<section class="right">Right</section>
</div>
<aside class="left">Left</aside>
设置样式:
.left{
float:left;
margin-left: -100%;
}
.right{
margin-left: 200px;
}
.container{
float:left;
width:100%
}
4.绝对定位
左右两边都绝对定位
.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还可以实现很多的布局，需要自己去发挥想象。总结下来也就需要记住几点，设置了display:table-cell的元素具有以下特性。
- text-align、vertical-align等对齐属性起作用，margin不起作用。宽高百分比值不起作用。
- 会生成虚拟的table、tr把自己包裹住，如果有相邻的兄弟元素也被设置了table-cell,则会跟兄弟元素一起生成虚拟的table、tr把自己包裹住，并一行等高显示
- 多个table-cell元素会占满被设置了display: table的元素的宽度，如果一个元素被设置了宽度，那么其他剩余的table-cell元素会占满剩下的宽度。当然，如果只有一个table-cell元素，就算设置了宽度也会占满table元素的宽度。
- 对设置了float、absolute的元素不起作用。且IE6、7不支持
