负边距、三栏布局

2016-07-20 本文已影响199人婷楼沐熙

一、负边距在让元素产生偏移时和`position: relative`有什么区别?

负margin和position: relative在让元素产生偏移时都没有脱离文档流。但是利用负margin让元素产生偏移时，元素原来的位置会被占据；而position: relative元素原来的位置不会被占据，仍然会被保留。
对比图
DEMO
负margin除了可以移位自己，还可以移动周围的元素。margin-top和margin-left是移动自己，而margin-right和margin-bottom是让周围的元素移动。因为margin的意思就是要让周围最近的元素空出多少距离。比如说设置margin-right: -10px;，就是要让下一个元素距离当前元素-10px，自然就是下一个元素左移。不然当前元素和它前面的元素的margin-right就不对，会受到影响。而position: relative不会影响到其他的元素。
先来看看margin-left和margin-bottom。
负左外边距和负下外边距
DEMO
因为margin-top上面已经给出例子了，再来看看margin-right。
margin-right
这里还需要注意的一个小技巧是可以利用负margin来扩大面积，这在一些布局中可以应用到。使用条件是，如果一个元素没有width，只有左右的负margin，那么它就会变宽，可以利用负margin来扩大面积。
DEMO

二、使用负 margin 形成三栏布局有什么条件?

三栏放在一个容器中，左右两边固定宽度，中间栏宽度100%自适应。
利用负margin形成三栏布局，是负margin和浮动联合使用达到的一个布局效果。所以这里的三栏都要设置左浮动。
使用了浮动之后，父容器一定要清除浮动。
对左右栏设置负margin，左边栏设置margin-left: -100%，右边栏的margin-left设置自身的宽度。

三、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤。

在html中，先把中间的主区块middle放在容器的最前面，接着是left，最后是right。这样可以先渲染重要的区块，有利于搜索引擎优化。

<div class="wrapper">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

圣杯布局是实现左右宽度固定，中间自适应。

.main{
    width: 100%;
    background: blue;
    height: 300px;  
  }
.left{
    width: 200px;
    height: 300px;
    background: red;
  }
.right{
    width: 150px;
    height: 300px;
    background: orange;
  }

将三栏都设置为左浮，这样两个侧边栏才能到中间区块的middle上面去。

.main, .left, .right{
    float: left;
  }

再利用负margin让左边栏和右边栏跑到中间区块的两边。对左边栏设置margin-left: -100%，右边栏的margin-left设置为自身的宽度。这样两个侧边栏就会分别覆盖中间区块的左右边。

.left{
    margin-left: -100%;
}
.right{
    margin-left: -150px;   /* 右边栏自身的宽度 */
  }

到上一步为止，left和right栏已经到了正确的位置，接下来是要解决覆盖的问题。圣杯布局的解决方案是先对包裹三栏的容器设置好padding。可以上下为0，左右分别为左右两栏的宽度。

.wrapper{
        padding: 0 150px 0 200px;
    }

接着，再利用相对定位，把左右两栏分别移动到对应的padding上去。

.left{
    position: relative;
    left: -200px;
  }
.right{
  position: relative;
  right: -150px;
  }

完整DEMO

四、双飞翼布局的原理? 实现步骤?

前面和圣杯布局一样，中间的主区块main放在html的最前面，接着是子列sub和附加列extra。然后利用负外边距让sub和extra回到正确的位置。
接着面临一个同样的问题，那就是sub和extra覆盖了main的左右两边的内容。双飞翼布局就是在main的外部再加一个div标签来包裹中间区块，宽度为100%。然后再设置main的左右外边距，使它回到对应的位置。
html结构：

<div class="wrapper">
        <div class="middle">
        <div class="main">你好</div>
        </div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>

CSS部分：

.middle .main{
        margin-left: 200px;
        margin-right: 150px;
    }

完整DEMO

五、圣杯布局和双飞翼布局的比较。

两者的相同点：都是让主区块的内容先加载；都是左右两栏固定高度，中间一栏自适应；都是让三栏设置浮动，再利用负外边距实现三列布局。
两者的不同点：圣杯布局和双飞翼布局的不同点就是处理主区块覆盖的问题。圣杯布局是利用相对定位，然后设置内边距padding来实现的，而双飞翼布局是通过增加一个标签，再设置外边距margin来实现的。

对比而言，双飞翼虽然增加了一个标签，但是它的思路比较容易理解，也不需要利用定位。而且双飞翼布局在浏览器窗口足够小的时候不会出现排版错乱的情况，原因就是当侧边栏宽度大于中间区块宽度时，侧边栏上不去，会出现错乱。