几年前的圣杯布局和双飞翼布局/IE6双margin

解决ie6  浮动block元素双margin

display:inline可以解决这个双边距bug,首先是inline元素或inline-block元素是不存在双边距问题的。然后,float:left等浮动属性可以让inline元素haslayout,会让inline元素表现得跟inline-block元素的特性一样,支持高宽,垂直margin和padding等。

圣杯布局与双飞翼布局

它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局

圣杯布局

  1. 让左中右显示在一行上,左右固定宽度,中间百分百宽度,html先写中间部分,三块都浮动,给左边margin赋值  【-100%】,让它处于最左侧且于中间部分同一行,此时右块部分处于第二行最左边,占据了左块的位置。
  2. 给右块赋值margin 【-200px】(它自身的宽度)让它处于右边,与其他同在一行(float就是把所有块放在一行放不下才排在第二行,float的block元素不加宽度会表现的如inline元素,宽度由内容撑开)
  3. 此时左右两块,都盖住了中间块的部分宽度,所以给父块加padding-left, padding-right.值为左右块的宽度,再给左右块分别设置相对定位,让他们偏移出中间块的位置。此时左右块分别占据最左最右固定宽度,中间块是自适应宽度,完毕。

双飞翼布局

  1. 同圣杯布局a
  2. 同圣杯布局b
  3. 此时是给中间块添加一个子块,子块添加margin-left,margin-right,此后中间自适应部分的内容都写在中间块的字块中。

两者的差异:

圣杯布局的实际显示内容的三列是有共同的父元素,所以需要给父元素添加padding,也需要给左右块添加相对定位的偏移。

而双飞翼的实际显示内容的三列是左右两列以及中间块的子块,所以需要给子块加margin。也就是说左右两块仍然改在中间块的上面,只是与中间块的子块显示为三列布局。(给子块加padding,不太好,因为背景会显示在padding区域)

原文地址:https://www.cnblogs.com/zhaixingpengyue/p/7453871.html