常见网页布局

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

当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同

未设置负margin：

设置负margin后：

设置position:relative：

当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移

负的边距好像能减小元素在文档流中的尺寸一样，但事实上，它的尺寸大小并没变，只是文档流在计算元素位置的时候，会认为负边距把元素的尺寸减小了，因为位置也就发生变化了。这只是打个很形象的比喻，帮助大家理解一下。还要注意的是，文档流只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。

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

• 父元素中的三个子元素必须设置浮动
• 中间的子元素为主要内容,宽度设置为100%，在html中最靠前显示
• 左侧边栏设置margin-left：-100%，跑到主内容的最左边，右侧边栏设置margin-left为它本身宽度的负值，跑到主内容的最右侧；

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

圣杯布局和双飞翼布局，他们的都要求三列布局，中间宽度自适应，两边定宽，这样做的优势是重要的东西放在文档流前面可以优先渲染，而双飞翼布局是对圣杯布局的一种改良

1.写出三栏，主要内容main在最前面

2.设置浮动，并在最后清除浮动

3.设置负margin

4.设置父元素padding值，预留出侧边栏位置

5.使用相对定对，移动侧边栏至相应位置

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

在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多
在淘宝UED探讨下，增加多一个div就可以不用相对布局了，只用到了浮动和负边距，这就是所说的双飞翼布局。