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

1、使用负边距让元素产生偏移时，会改变元素在文档流的位置，导致其他元素的位置也受到了影响。 而使用position:relative时，元素虽然发生了偏移，但是它在文档流中的位置不会发生改变，因此其他元素的位置不会受到影响。

Paste_Image.png

负margin的特征

①负margin除了可以移位自己，还可以移动周围的元素。margin-top和margin-left是移动自己，而margin-right和margin-bottom是让周围的元素移动。

②当一个元素没有width，设置左右负margin，可以增加元素宽度，常用于浮动的场景。

Paste_Image.png

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

1、三栏都需要设置浮动float:left，父容器需要清除浮动
2、主栏宽度可自适应，设置为100%，左右侧栏宽度为固定宽度
3、左侧栏的左边距设为-100%，因此能偏移到主栏的左侧，右侧栏的左边距为自身的宽度，因此能上浮到主栏的右侧；

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

1、原理：父元素内三栏同时浮动，左右栏设负margin偏移到主栏两侧、父容器设padding为左右栏预留空间，左右栏使用相对定位偏移到预留空间。
2、实现圣杯布局的步骤：
①写好基本布局
　注意：主区块要放在前面，这样浏览器可以先渲染主要区块，有利于搜索引擎优化

Paste_Image.png

demo

②使用负margin将两侧栏移到主区块两侧

Paste_Image.png

demo

③这时出现侧栏与主区块覆盖的问题。方法是父元素设置padding，侧栏使用相对定位，形成三栏布局

Paste_Image.png

demo

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

1、原理：父元素里面左右两栏和包裹主栏的父容器同时浮动，左右两栏设负margin偏移到包裹主栏的父容器的两侧，然后主栏通过设置左右margin调整大小。

Paste_Image.png

demo

双飞翼布局和圣杯布局有很多相似处，不同的是解决覆盖的时候双飞翼是给主块区添加一个容器，通过设置margin调整大小，实现布局的。而圣杯布局是给父容器设置padding，然后两侧栏用相对定位实现布局。