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

负边距偏移会影响相邻后面的元素往偏移元素的位置挤过来，relative不会影响，因为relative后元素在文档流的位置不会改变。

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

• 父元素中有三个浮动的块级子元素。

• 填充内容的元素,放在第一个需要在html中最先渲染,设置宽度为100%,将另外两个元素挤到下一行
• 左右的两个子元素设置负边距,跑到上一行

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

• 原理是中间自适应，两边固定宽度。三块元素都是浮动。

step1:
设置三个左浮动div，box1设置宽度是100%，产生效果为分为 两行，box1一行，box2，box3一行（因为第一行放不下）。
step2:
然后设置父容器padding-left/right大小为box2，3的宽度。
step3:
然后设置box2 margin-left：-100% ，设置box3 margin-left：-（自身宽度），效果是盖在box1的两边。
step4:
为了防止干扰box1里的内容，然后再使用position：relative定位来调整位置，形成如下的效果

圣杯布局实现三栏布局

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

• 原理:双飞翼布局也是一个两边在父容器里固定宽度，中间自适应的布局.
  point是在内容区块里面再加个子元素div。

step1:
设置三个左浮动div，box1设置宽度是100%，产生效果为分为 两行，box1一行，box2，box3一行（因为第一行放不下）。
step2:
然后设置box2 margin-left：-100% ，设置box3 margin-left：-（自身宽度），效果是盖在box1的两边。
step3:
在box2也就是main里面，再加一层div，用margin-left/right来调整位置，使得两边不被左右侧边栏遮挡，来达到你想要的效果。效果如下:

双飞翼原理实现三栏布局

代码1
代码2
代码3
代码4
代码5

             本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源