圣杯布局与双飞翼布局的实现思路

主要为了理解思考的过程，而不是仅仅为了背过一段代码。 1负边距  margin-left为负值，且两个元素不在一行的时候（可以用父元素float:left,width:100%实现）margin-left可以吃掉父元素的margin. 想像一下，假设width:99%，右边留一条缝隙，当margin-left为负值，即可让右边的这条缝隙向左走 即当使用margin左负值，超过自身的宽度时，这个元素在第一行就有位置了。 而margin的负值达到-100%时，恰能达到窗口最左侧。。 这个100%为父元素的宽度。同理我们假设要挤的元素宽度为200px,则 “挤”200px就可以让这个元素完全挤到父元素的右边去。 考虑以下结构 [crayon-50361f9fef2a7/] [crayon-50361f9fef68b/] 以上为第一步，可以看到left,right到了正确位置。这时肯定有疑问了？这个main怎么没了？因为被挤跑了呗 2 给挤的空间留空 考虑padding属性，会给元素的边缘留出缓冲空间，即我人为的留给你空间让你挤，比如padding:0 200px,左右两边留出了200让你使劲挤。这时候出问题了，因为文档流里，块状元素盒子包括padding啊，如果挤的话整个盒子不就跑了么。 这时能够脱离文档流的定位出场了，我无视你，就在你上面的空间挤，然后父元素眼睁睁的看着上面挤，下面留出被遮挡的空间就是了。 这种思路即圣杯布局。（负边距+定位） 给个空间: [crayon-50361f9fefa88/] [crayon-50361f9fefe58/] [crayon-50361f9ff0244/] [crayon-50361f9ff062b/] [crayon-50361f9ff0a13/] [crayon-50361f9ff0e66/] 3.淘宝UED对此的优化 圣杯布局已经挺好了，但是利用了相对定位。如果人为加一个标签，来控制上面说的“挤”的空间呢？ 完整代码 [crayon-50361f9ff11e1/]   [crayon-50361f9ff15c8/] [crayon-50361f9ff19b1/] »本文地址:http://99jty.com/?p=432 »订阅本站:http://winysky.com/feed/»当你从RSS阅览器里看到这篇文章时，还没有评论，还不赶紧过来抢沙发？