一、负边距在让元素产生偏移时和position: relative有什么区别?
- position:relative：相对定位，实际占据空间未变化，即元素本身在正常文档流中的记忆位置不会发生变化；
- 负margin：元素偏移，元素偏移后，元素在正常文档流中的位置发生改变，之后的普通流元素位置也会跟着改变；
二、使用负 margin 形成三栏布局有什么条件?
- 父容器包裹三栏，父容器清除浮动，三栏添加浮动；
- 中间主体栏宽度自适应100%,两侧栏宽度固定；
三、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 基本原理：用负margin实现float元素同行，父容器添加左右margin预留空白，再将浮动元素使用相对定位解决重叠问题；
-
具体步骤（三栏圣杯）：
- html：父容器包裹三个子元素，第一个子元素为宽度自适应，后两个元素需宽度固定；
-
css：
- 三个子元素浮动，父容器清除浮动，全部元素清除margin、padding；
- 宽度固定元素使用负margin实现三个子元素float到一行，
第二个子元素负100%，第三个子元素负自身宽度； - 父容器添加左右padding，宽为后两个子元素的对应宽度，预留空白区域；
- 第二个、第三个子元素使用相对位移，使其占用预留的空白区域；
四、双飞翼布局的原理? 实现步骤?
- 基本原理：用负margin实现float元素同行，主体内容区域加容器并给容器添加margin预留空白，再将浮动元素使用相对定位解决重叠问题；
-
具体步骤（三栏双飞翼）：
- html：父容器包裹三个子元素，第一个子元素添加单独父容器，第一个子元素为宽度自适应，后两个元素需宽度固定；
-
css：
- 三个子元素浮动，父容器清除浮动，全部元素清除margin、padding；
- 宽度固定元素使用负margin实现三个子元素float到一行，
第二个子元素负100%，第三个子元素负自身宽度； - 第一个子元素单独父容器添加左右margin，宽为后两个子元素的对应宽度，预留空白区域；
- 第二个、第三个子元素使用相对位移，使其占用预留的空白区域；
五、代码题
- 用浮动、负边距实现如下效果 参考:
- 答：代码12-1
-
使用圣杯布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
- 答：代码12-2
-
使用圣杯布局的思路实现如下两栏布局
- 答：代码12-3
-
使用双飞翼布局实现如下三栏布局(两侧固定宽度200px,中间自适应)
- 答：代码12-4
-
使用双飞翼布局的思路实现如下两栏布局
- 答：代码12-5
声明：本博客教程版权归兰文聪和饥人谷所有，转载需说明来源！
