在网页布局中，通常需要实现左边定宽右边自适应布局，默认html的结构如下：
<div class="box"> <div class="left">左边定宽</div> <div class="right">右边自适应</div> </div
1、浮动布局
左边设置左浮动，右边宽度设置100%
.left{width:200px;float:left;background: red;}
.right{width:100%;margin-left: 200px;background: blue;}/*等于左边栏宽度*/
2.flex布局
父容器设置 display：flex；Right部分设置 flex：1
.box{ display: flex;} .left{width:200px;background: red;} .right{width:100%;flex:1;background: blue;}/*等于左边栏宽度*/
3、使用负margin
首先需要修改html结构，为自适应部分添加容器 .right_content, 同时改变左右部分的位置。
html结构：
<div class="box"> <div class="left">左边定宽</div> <div class="right"> <div class="right_content">右边自适应</div> </div> </div>
css代码：
*{margin:0;padding: 0;}
.left{width:200px;float:left;margin-right:-200px;background: red;}
.right{width:100%;float:left;}
.right_content{margin-left:200px;background: blue;}
4.绝对定位
左右两边都绝对定位
.left{width:200px;background: red; position: absolute;left:0;}
.right{width:100%;background: blue;position: absolute;left:200px;}/*等于左边栏宽度*/
办公资源网址导航 https://www.wode007.com
5.table布局
table(父级元素)与tabel-cell（两个子集元素）
.box{display: table;width:100%;}
.left{width:200px;background: red; display: table-cell;}
.right{background: blue; display: 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不支持