双飞翼布局
今天又看了下百度2012年前端研发暑假实习资料，其中有一道布局题，要求左右两侧布局，右侧100px宽度固定，左侧宽度自适应，两栏布局占满页面。看到要求时一下子没有想出具体的方案，倒是想起了之前看到的一道腾讯的前端招聘题，要求实现一个如下的页面
要求自适应宽度，左右两栏固定宽度，中间栏优先加载，要考虑换肤（这个用js实现）。看到论坛下面的解答，提到了淘宝UED玉伯提出的双飞翼布局，这个我倒是知道，去年就了解过，但那时候对css的理解还不深入，只是知道有这么个东西在，但不清楚它的实现原理，今天花了两个小时完整的了解了一下，记录下来。
各种布局方案中经常会用到float、negative margin和relative position这三个属性，双飞翼布局也不例外。先用双飞翼布局解决百度的那道题，比较简单，用下面的代码就可以实现。
这个只有一边，应该算不上是双飞翼布局，不过思想还是差不多的。好处显而易见，主体内容优先加载，宽度自适应。再来实现腾讯前端招聘题，这次就是名符其实的双飞翼布局了。代码和效果图如下：
就到这里为止么？No，No，No，对于新手来说，理解双飞翼布局的难点，是在negative margin上，比如说上面用的是float:left;结合margin-left，你做测试的时候也许想，我换个方向来试试，用float:right;结合margin-right，这时候你就会发现出问题了，不能达到你想要的效果，why?这时候你就需要更详细的了解margin的解析机制了。因为margin的left和top是相对于自身而言，而right和bottom则是相对于靠着它的下一个元素而言的。还是不能理解，那看看这篇文章，怿飞前辈的由浅入深漫谈margin，相信看完你就可以完全理解了。另外关于玉伯前辈双飞翼布局的详细介绍看这里
要求自适应宽度，左右两栏固定宽度，中间栏优先加载，要考虑换肤（这个用js实现）。看到论坛下面的解答，提到了淘宝UED玉伯提出的双飞翼布局，这个我倒是知道，去年就了解过，但那时候对css的理解还不深入，只是知道有这么个东西在，但不清楚它的实现原理，今天花了两个小时完整的了解了一下，记录下来。
各种布局方案中经常会用到float、negative margin和relative position这三个属性，双飞翼布局也不例外。先用双飞翼布局解决百度的那道题，比较简单，用下面的代码就可以实现。
css代码
.bd{
overflow:hidden;
_zoom:1;
}
.main{
float:left;
width:100%;
height:200px;
background:#DDD;
}
.aside{
float:left;
width:100px;
height:200px;
margin-left:-100px;
background:lightblue;
}
html代码
效果如下图所示：
这个只有一边，应该算不上是双飞翼布局，不过思想还是差不多的。好处显而易见，主体内容优先加载，宽度自适应。再来实现腾讯前端招聘题，这次就是名符其实的双飞翼布局了。代码和效果图如下：
css代码
.bg{
overflow:hidden;
_zoom:1;
}
.content{
width:100%;
height:200px;
float:left;
background:#ddd;
}
.left{
width:150px;
height:200px;
float:left;
margin-left:-100%;
background:lightgreen;
}
.right{
width:200px;
height:200px;
float:left;
margin-left:-200px;
background:lightblue;
}
html代码
效果如下图：
就到这里为止么？No，No，No，对于新手来说，理解双飞翼布局的难点，是在negative margin上，比如说上面用的是float:left;结合margin-left，你做测试的时候也许想，我换个方向来试试，用float:right;结合margin-right，这时候你就会发现出问题了，不能达到你想要的效果，why?这时候你就需要更详细的了解margin的解析机制了。因为margin的left和top是相对于自身而言，而right和bottom则是相对于靠着它的下一个元素而言的。还是不能理解，那看看这篇文章，怿飞前辈的由浅入深漫谈margin，相信看完你就可以完全理解了。另外关于玉伯前辈双飞翼布局的详细介绍看这里
