@demonly
2017-10-14T04:04:29.000000Z
字数 811
阅读 1175
零碎知识
浮动元素设置了负边距之后会破坏以下两条浮动规则。
圣杯布局可以实现左右两栏固定宽度，中间自适应宽度。圣杯布局的优点就是代码简单，兼容性好。
以下展示了作为示例的基本结构。
<body><header></header><div class="container"><div class="center"></div><div class="right"></div><div class="left"></div></div><div class="footer"></div></body>
设置一些基本样式，给 left 和right 设置上固定宽度，center 设置宽度100%。然后给三个盒子都设置上左浮动。大概就是这个样子。
这时候给 right 设置负边距让它从左边移出 contianer，然后它就会到上面。
.left{margin-left:-200px; //盒子本身的宽度}
同样的给 right 设置负边距让它从右边移出 contianer，然后它它也跳到了上面。
.right{margin-left:-100%; //窗口的宽度}
这时候 center 的两端是被 left 和right 覆盖的，因此给 center 写上 padding。
.center{padding:0 200px;}
最后通过相对定位将 left 和right 向外移动自身的固定宽度就完成了。最后不要忘了清除浮动。
双飞翼布局是在圣杯布局的基础上改良得到的。基本原理是一样的。只是为解决 center 被覆盖的问题而采用的方法不同。圣杯布局采用的方法是给父盒子设置 padding 来压缩 center，然后利用绝对定位将 left 和right 移动出去。而双飞翼布局采用的方法在 center 中加入一个子盒子来作为主体，然后给子盒子写上 margin 来避免子盒子被覆盖。