负边距&三栏布局-Assignment

问答题

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

• 参考线或是参考点不同
• 边距规定元素的border到父元素/相邻元素边框的距离，所以负边距的偏移是以父元素/相邻元素的边框为参考线
• position:relative则是以元素所在位置的四个顶点为参考点进行偏移
• 影响相邻元素的效果不同
• 使用负边距偏移的元素，紧随其后的元素会追随其后
• 使用position:relative的元素，紧随其后的元素不会跟随

使用负边距

使用position:relative

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

使用负margin实现三栏布局的条件：

• 两个侧边栏需要添加浮动属性
• 中间的main部分的宽度要自适应父元素宽度
• 父容器需要添加左右padding为sidebar预留空间

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

• 圣杯布局原理
  圣杯布局是三栏布局之一，基本特性是左右侧边栏宽度固定，中间main宽度自适应，独特之处是父容器添加padding-left和right撑开其宽度而为2个侧边栏预留放置空间
• 实现步骤

1. 准备好布局的元素-父容器ctn/主体main/左右sidebar
   【注意】中间的main宽度自适应父容器宽度

准备布局素材

2.main/2个sidebar添加float:left，并在父容器内使用.ctn:after清除浮动

布局1——浮动

3. 3个sidebar使用负margin-left进行二次布局

布局2——负margin

4.父容器添加左右padding为sidebar预留空间

父容器使用padding预留空间

5.二个sidebar使用相对定位偏移至预留空间

sidebar使用相对定位偏移至预留空间

4.双飞翼布局的原理? 实现步骤?

• 双飞翼布局原理
  双飞翼布局原理是在main外层添加wrap父容器，然后通过设置wrap的左右padding，从而达到布局效果
• 实现步骤
  1~3和圣杯布局一样
  4.main内部添加子元素wrap，设置高度为父容器的高度后，添加左右margin为sidebar的宽度，最后设置wrap的背景色和去除main的背景色

main添加子元素wrap设置主体区

---

代码题

• 任务12-1
• 任务12-2
• 任务12-3
• 任务12-4
• 任务12-5
• Github地址