布局真的很重要。一个不好的布局后期会有很多很多的bug，就像是建房子的地基一样。
首先，再一次地圣杯布局的学习，来源于该教程： http://www.jianshu.com/p/f9bcddb0e8b4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.container{
height: 200px;
/*overflow: hidden;*/
}
.middle{
100%;
height: 200px;
background-color: #f23244;
float: left;
}
.left{
200px;
height: 200px;
background-color: blue;
float: left;
}
.right{
200px;
height: 200px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">我是中间弹性区</div>
<div class="left">我是左边栏</div>
<div class="right">我是右边栏</div>
</div>
</body>
</html>
以上是其中的一部分，剩下的一部分为：
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
.container{
height: 200px;
overflow: hidden;
padding: 0 200px;
}
.middle{
100%;
height: 200px;
background-color: #f23244;
float: left;
}
.left{
position: relative;
left: -200px;
margin-left: -100%;
200px;
height: 200px;
background-color: blue;
float: left;
}
.right{
position: relative;
right: -200px;
margin-left: -200px;
200px;
height: 200px;
background-color: yellow;
float: left;
}
</style>
写的太少，终究还是磕磕绊绊。
这就完了吗？？？并没有，我们的自适应测试开始了，于是我们也发现了bug，当页面小到一定程度的时候，两边的东西都没了，当然这是我们设置了 overflow:hidden 的缘故
在这里，我们可以直接通过在 container 中设置
min-700px直接解决。
其次，我们看到那篇文章下方的评论，确实不错，首先是我们这个 relative 定位是否必要呢？可以不要的。
我们可以在 container 中加入
box-sizing:border-box这样的话我们的 padding值就会从 外扩 变成 内缩，之后去掉relative也会是对的了。
在这里严肃更正一下，box-sizing是必须加的东西，否则你在刚开始看到时候好像是正确的，但其实，当你缩小了界面之后，其实就是错的了，我会将正确的代码放在下面。问题出在哪里呢
问题出在我们上面加的
min-700px上，我们来看看完整的代码。
.container{
height: 200px;
/*overflow: hidden;*/
padding: 0 200px;
/*box-sizing: border-box;*/
min- 700px;
}
当我们没有box-sizing:border-box;的时候，内边距是外扩的，这个时候的 min-width其实只是指中间栏的长度，而我们想要的是整个可视宽度变为 700px 的时候。
let oRight=document.getElementsByClassName("right")[0];
let oMiddle=document.getElementsByClassName("middle")[0];
const onWindowResize=()=>{
console.log("window的宽度为：",document.body.clientWidth);
console.log("中间栏的宽度为：",oMiddle.offsetWidth);
}
window.addEventListener('resize',onWindowResize);
我写了一个测试函数，通过以上测试能够证明以上说法的正确性。
之后我们还可以继续简化我们的代码。使用自动计算属性calc，这就是我们公司高手用的方式，虽然我暂时还不会用，但是通过阅读代码也是知道了有这么一种方法。我们先来写一段简单的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.middle{
calc(100% - 400px);
margin:0 auto;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
真的好简单啊，就这样看起来的话。听说这种写法 对性能有损耗（但是现在是个性能过剩的时代，这个真的要紧吗？？？接着是兼容性问题，这个IE9以上和chrome等是能用的？ IE8，再见吧）
下面我根据网上的教程也DIY了一个自适应布局，用的是calc的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
body{
background-color: #e8eadd;
color: #3c323a;
padding: 20px;
}
.wrap{
calc(100% - 40px);
margin: auto;
background-color: yellow;
min- 300px;
}
header{
margin: 0 auto;
padding: 20px;
calc(100% - 40px);
background-color: blue;
color: #fff;
}
main{
border:8px solid #b8c172;
float: left;
margin-right: 20px;
padding: 20px;
calc(75% - 20px*2 - 8px*2);
}
aside{
border:8px solid #b8c172;
float: left;
padding: 20px;
calc(25% - 20px*2 - 8px*2 - 20px);
}
footer{
clear: both;
background-color: #000;
984px;
calc(100% - 40px);
padding: 20px;
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>I'm header.</h1>
</header>
<main>
<h1>古诗</h1>
<p>春水碧于天</p>
</main>
<aside>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</aside>
<footer>
<h5>I'm footer.</h5>
</footer>
</div>
</body>
</html>
接下来这个是使用了 box-sizing 的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
100%;
height: 100%;
box-sizing: border-box;
}
body:after{
content: "";
0;
height: 0;
display: block;
visibility: hidden;
}
.header,
.footer{
100%;
}
.header,
.left,
.content,
.right,
.footer{
box-sizing: border-box;
border: 10px solid #000;
}
.left,
.content,
.right{
float: left;
height: calc(100% - 240px);
}
.header{
height: 100px;
background-color: red;
}
.footer{
position: absolute;
bottom: 0;
height: 100px;
background-color: yellow;
}
.left{
margin: 20px 0;
background-color: green;
100px;
}
.content{
margin: 20px 20px;
calc(100% - 240px);
background-color: #832333;
}
.right{
margin: 20px 0;
100px;
background-color: #666;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
<div class="footer">footer</div>
</body>
<script type="text/javascript">
// 需要注意的是那个 body和html 部分，需要这样写
// html,body{100%;height:100%}
//
</script>
</html>
这里主要需要注意的是，body和html需要设置 width 和 height 为 100%。