页面布局:左侧宽度固定，右侧自适应

布局要求：
1.左侧模块宽200px;
2.右侧模块自适应；
有几种实现方式：

方式一：转换元素属性(inline-block)和css calc的使用，注意两个元素之间不能留空隙（或设置父级盒子的font-size:0px;）。

<div class="left">
</div><div class="right">
</div>
<style>
.left{
	width:200px;
	display: inline-block;
	min-height:500px;
	background:blue;
}
.right{
	width:calc(100% - 200px);
	display: inline-block;
	min-height:500px;
	background:red
}
</style>

方式二：浮动和css calc的使用。

<div class="left"></div>
<div class="right"></div>
<style>
.left{
	width:200px;
	min-height:500px;
	float:left;
	background:blue;
}
.right{
	width:calc(100% - 200px);
	min-height:500px;
	float:left;
	background:red
}
</style>

方式三：定位。

<div class="left"></div>
<div class="right"></div>
<style>
.left{
	width:200px;
	min-height:500px;
	background:blue;
}
.right{
	position:absolute;
	left:200px;
	right:0px;
	top:0px;
	min-height:500px;
	background:red
}
</style>

方式四：flex。//

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

注意: Internet Explorer 9 及更早版本不支持 flex 属性。
注意: Internet Explorer 10 通过 -ms-flex 属性来支持。 IE11 及更新版本完全支持 flex 属性 (不需要 -ms- 前缀)。
注意: Safari 6.1 (及更新浏览器) 通过 -webkit-flex 属性支持。

<div class="box">
	<div class="left"></div>
	<div class="right"></div>
</div>
<style>
.box{ 
	width:100%; 
	height:100%; 
	display:flex;
} 
.left{
	flex:0 0 200px;
	height:300px; 
	background-color: blue; 
} 
.right{
	flex:1; 
	height:300px; 
	background-color:red; 
}
</style>