负边距、三栏布局

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

• 负边距移动时，后面元素会跟着移动，占据移出来的空间。
• position: relative 因为是根据自身的位置移动，所以原来位置所占的空间会保留，其他旁边的元素也不会受影响。

使用position: relative：

Paste_Image.png
使用负边距： Paste_Image.png

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

1.主内容与左右侧栏都要浮动。
2.html中主内容区块在前面，后面再是左右两边。
3.左侧边栏要设置margin-left:-100%,右侧边栏则是margin-left:-xxxpx;(本身宽度)。

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

原理：利用负边距把左右侧栏移上去，然后主内容区利用margin在两边留出空白，最后利用固定定位把左右侧边栏移到制定位置。

实现步骤：
1.父容器包裹三个子元素，第一个元素是主要内容区，其次是左右侧边栏。

Paste_Image.png

2.给3个子元素加上浮动，然后给父容器清楚浮动。

Paste_Image.png

3.给左侧边栏设置负边距100%，右侧边栏负边距100px。

Paste_Image.png
4.中间的主要内容区设置两边内边距，留出空白，然后左右栏通过固定定位偏移到两边去。（清除浮动最好是用伪类，因为overflow会隐藏超出的元素） Paste_Image.png
另外，圣杯布局在窗口收缩的太小，中间的main元素宽度小于两边侧边栏宽度时，侧边栏会跑掉，导致排版出现错乱，这种情况我们可以加上min-width,也就是设置一个最低宽度，上面的事情就不会发生了。双飞翼布局是没有这种情况的。

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

和圣杯布局差不多，只是双飞翼布局少了padding和两个侧边栏的固定定位，然后在中间加了个div。

实现步骤：
1前三步是一样的，不过这里要在主内容区里面多加一个div。

Paste_Image.png

2.给这个div加上宽度、背景颜色，让它居中，不用设置宽度，这样才能有自适应的宽度。

Paste_Image.png

（完）