负边距、三栏布局（12）

问答

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

• 元素使用负margin偏移时，相邻元素也会跟着它移动。而position:relative移动时，相邻元素保持原来的地方不变。
• 因为relative元素本身的文档流位置还是被自己给占据。而负margin则是确确实实改变了文档流的位置。

• 设置了负margin的元素（即使该元素同时设置了relative）相对于定位元素在下。设置了float的元素也在relative的下面（很奇怪）

  
  relative上margin下
  负margin
  position:relative

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

1. 三栏都要有同向浮动
2. 侧栏宽度固定，主块自适应。
3. 设置合适的负margin的值
4. 用合适的方法使得三栏分离，如侧栏相对定位，或者主区块内部设置区块来收缩使其分离。

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

• 原理：

1. 浮动：浮动是和负margin等同重要的，并不是因为负margin的特性，下面的负margin浮动块才会跑上去。原因就在于浮动的基本特性：浮动的元素在父容器会并排排列，直到该行满了才会到下一行。
2. 负margin：作用是先大致定位，负margin加上浮动特性可以覆盖使其在其他浮动块元素上。
3. 父元素padding：给子元素块留出移动的空间。
4. position:relative小范围微调位置。（这个时候我们又发现relative的元素是在最上面一层的）

• 步骤

1. 三栏都要设置同向浮动，左浮右浮都可以。这时候因为主区块设置的宽度是100%所以另两个都被挤在下面。
2. 这时候我们设置负margin，一个margin:-100%,另一个设置侧栏固定宽度。（这个100%相对的是父容器的宽度，如果我们设置父容器固定宽度，那main区域宽度就不会自适应了。main块宽度设置的就是100%父元素宽度）
3. 给父元素设置左右padding以便于接下来两个侧边栏块用相对定位微调位置。
4. 用position:relative小范围偏移即可。

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

• 实现步骤：

1. 先写好body部分，主区块必须放在上面优先被浏览器渲染。侧栏被优先渲染的话，因为之前没有浮动元素，我们设置了负margin它只会往左或右一直跑而不会上去。

   
   body部分

2. 定义好宽高颜色等css样式，并且让3栏都浮动

   
   大致

3. 两侧边栏设置负margin，使得三栏排列在一行上，但我们发现两侧边栏覆盖住了主区块。

   
   设置负margin

4. 这时候我们在main块里设置的content块就起作用了，我们给它设置高度和外边距和颜色。并且设置左右margin值（值的大小为左右侧边栏的宽度）

   
   主区块

• 原理：侧栏负margin加三栏同向浮动使其并排排列，主栏区域设置div块添加左右margin使得侧栏块得以显示。
• 双飞翼和圣杯区别：圣杯用相对定位来分离主区块和侧栏，双飞翼则是给主区块内部添加块级元素。
• 忘记清浮动了，应该用clearfix
  清除浮动

代码

一

demo

二

demo

三

demo

四

demo

五

demo