任务12-负边距、三栏布局

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

** 本教程版权归作者和饥人谷所有，转载须说明来源！ **