第十二弹-负边距、三栏布局

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

• position:relative：相对定位，实际占据空间未变化，即元素本身在正常文档流中的记忆位置不会发生变化；
• 负margin：元素偏移，元素偏移后，元素在正常文档流中的位置发生改变，之后的普通流元素位置也会跟着改变；

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

• 父容器包裹三栏，父容器清除浮动，三栏添加浮动；
• 中间主体栏宽度自适应100%,两侧栏宽度固定；

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

• 基本原理：用负margin实现float元素同行，父容器添加左右margin预留空白，再将浮动元素使用相对定位解决重叠问题；
• 具体步骤（三栏圣杯）：
  • html：父容器包裹三个子元素，第一个子元素为宽度自适应，后两个元素需宽度固定；
  • css：
    1. 三个子元素浮动，父容器清除浮动，全部元素清除margin、padding；
    2. 宽度固定元素使用负margin实现三个子元素float到一行，
       第二个子元素负100%，第三个子元素负自身宽度；
    3. 父容器添加左右padding，宽为后两个子元素的对应宽度，预留空白区域；
    4. 第二个、第三个子元素使用相对位移，使其占用预留的空白区域；

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

• 基本原理：用负margin实现float元素同行，主体内容区域加容器并给容器添加margin预留空白，再将浮动元素使用相对定位解决重叠问题；
• 具体步骤（三栏双飞翼）：
  • html：父容器包裹三个子元素，第一个子元素添加单独父容器，第一个子元素为宽度自适应，后两个元素需宽度固定；
  • css：
    1. 三个子元素浮动，父容器清除浮动，全部元素清除margin、padding；
    2. 宽度固定元素使用负margin实现三个子元素float到一行，
       第二个子元素负100%，第三个子元素负自身宽度；
    3. 第一个子元素单独父容器添加左右margin，宽为后两个子元素的对应宽度，预留空白区域；
    4. 第二个、第三个子元素使用相对位移，使其占用预留的空白区域；

五、代码题

1. 用浮动、负边距实现如下效果 参考:
   

• 答：代码12-1

2. 使用圣杯布局实现如下三栏布局(两侧固定宽度200px,中间自适应)

   
   

• 答：代码12-2

3. 使用圣杯布局的思路实现如下两栏布局

   
   

• 答：代码12-3

4. 使用双飞翼布局实现如下三栏布局(两侧固定宽度200px,中间自适应)

   
   

• 答：代码12-4

5. 使用双飞翼布局的思路实现如下两栏布局

   
   

• 答：代码12-5

　　　　　　　　声明：本博客教程版权归兰文聪和饥人谷所有，转载需说明来源！