1、负边距在让元素产生偏移时和position: relative有什么区别?
Paste_Image.png
- 使用负边距的时候会改变元素在文档流中的位置。负边距的作用能拉动其他没有脱离文档流的元素。
Paste_Image.png
- position：relative之后元素原来在文档流中占据的空间仍会保留，它只是相对于自己原来在文档流中的位置进行偏移。
Paste_Image.png
2、使用负 margin 形成三栏布局有什么条件?
- 首先需要有一个父容器和其下三个并列的兄弟子元素，并且三个子元素都设置向同一个方向浮动。
- 父容器需要设置内边距padding为侧栏的宽度值。
- 主要区块应写在最前面，保证优先被渲染,以便seo。
- 左侧栏的margin-left应设置为-100%,右侧栏margin-left设置为它本身的宽度。
3、圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
圣杯布局指两边顶宽，中间自适应的三栏布局，中间栏要在文档流前面以优先渲染。圣杯布局主要是运用了负边距，浮动和相对定位及设置padding-left padding-right去完成一个三栏布局。
1、写出圣杯布局的DOM结构，对三个区块设置参数
Paste_Image.png
2、对三个区块设置浮动以及对左右侧边栏设置负边距，让它们飘到main上面
Paste_Image.png
3、最后设置父容器的内边距为左右侧边拦的自身宽度，并且对这栏设置相对定位。
Paste_Image.png
4、双飞翼布局的原理? 实现步骤?
双飞翼布局也主要运用了负边距，浮动，设置margin-left margin-right去完成一个三栏布局。
1、写出双飞翼布局的DOM结构，对三个区块设置参数
Paste_Image.png
2、对三个区块设置浮动以及对左右侧边栏设置负边距，让它们飘到main上面
Paste_Image.png
3、最后设置包裹容器wrap的内边距为左右侧边拦的自身宽度。
Paste_Image.png
** 本教程版权归作者和饥人谷所有，转载须说明来源！ **
