css3 - 弹性盒布局 - 1.使用自适应窗口的弹性盒布局
使用自适应窗口的弹性盒布局
如果我们想让这三个div的总宽度等于浏览器窗口的宽度，而且能够随着窗口宽度的改变而改变。那么我们使用盒布局，并且只要使用一个box-flex属性，使盒布局变成弹性盒布局就可以了。
兼容：在Firefox中使用“-moz-box-flex”的形式；在Safari、Chrome中使用“-webkit-box-flex”的形式；
html：
<body>
<div id="container">
<div id="left">
<h2>左侧边栏</h2>
<ul>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
</ul>
</div>
<div id="center">
<h2>内容</h2>
<p>我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容我是示例内容</p>
</div>
<div id="right">
<h2>右侧边栏</h2>
<ul>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
<li><a href="#">超链接</a></li>
</ul>
</div>
</div>
</body>
css：
<style>
* {
margin: 0;padding: 0;} /*去除默认样式，实战中不建议这么写*/
#container { /*把盒布局变成弹性盒布局*/
display: -moz-box; /* 兼容Firefox */
display: -webkit-box; /* 兼容Chrome、Safari */
}
#left {
width: 200px;/*左边div宽度固定*/
padding: 20px;
background-color: orange;
}
#center {
-moz-box-flex: 1; /*中间div宽度自适应屏幕 兼容Firefox*/
-webkit-box-flex: 1;/*中间div宽度自适应屏幕 兼容Chrome、Safari*/
padding: 20px;
background-color: yellow;
}
#right {
width: 200px; /*右边div宽度固定*/
padding: 20px;
background-color: limegreen;
}
#left,#center,#right {
box-sizing:border-box; /* 兼容IE、Opera 以及 Chrome */
-moz-box-sizing: border-box; /* 兼容Firefox */
-webkit-box-sizing: border-box;/* 兼容Safari */
}
</style>
解析：border-box：规定并排的盒子带边框的框； 例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
border-box是为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
