负边距在让元素产生偏移时和position: relative的区别

  • 负边距产生偏移是改变元素的外边距，从而引起元素在文档流中的布局位置的改变。
  • position: relative产生偏移时元素在文档流中的布局位置并没有改变，只是其外观表象相对于自身原本的位置做一个偏移，是不会影响其他元素的布局的，但会遮挡其他元素。

使用负 margin 形成三栏布局的条件

  • 中间main设为浮动宽度100%，两个side也要设为浮动宽度定好，外部容器ct清除浮动；
  • 两个side使用负margin（一个为-100%，另一个为-‘自身宽度’）分别移动到main的左右两边；
  • 若为圣杯三栏，则需设置main区块的padding留出左右空间，再使用relative将左右sider各做一个自身宽度的偏移；
  • 若为双飞翼三栏，则需在main区块下增加一个真实的主内容div，并为此div设置左右margin。

圣杯布局的原理及实现步骤

  • 圣杯布局的原理是利用负margin让两个浮动的固定宽度盒子进入到一个同样是浮动且自适应宽度的盒子里面去，再用相对偏移做调整，步骤如下：
  • ①一个宽度100%的盒子main浮动并设置padding做自适应主区块；
  • ②另外两个宽度固定的盒子side浮动并使用负margin分布于主区块的两边；
  • ③最后让两个side盒子做相对偏移到达main留出的空padding区。

双飞翼布局的原理及实现步骤

  • 圣杯布局的原理是利用负margin让两个浮动的固定宽度盒子进入到一个同样是浮动且自适应宽度的盒子里面去，再内嵌一个div做真正的主内容区块，步骤如下：
  • ①一个宽度100%的盒子main浮动；
  • ②另外两个宽度固定的盒子side浮动并使用负margin分布于主区块的两边；
  • ③在main区块内再内嵌一个真实的主内容div，并为此div设置左右margin。