任务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

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

推荐阅读更多精彩内容