日夜谈——负边距、三栏布局

task12.png

首先,无论是圣杯布局还是双飞翼布局,负边距都起着非常重要的作用,我写在这里是为了提醒自己。

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

对相邻元素的影响

  • 负边距移动时,它自身整个文档位置也会跟着偏移,以至于后面的元素也会做出相应调整。
  • 使用position:relative进行偏移时,它还会占着原来的位置,后面元素的位置不会受影响。

    定位方式

  • 首先边距的定位是从规定元素的border到父元素或者相邻元素的距离,所以负边距的偏移是以父元素/相邻元素的边框为参考线。
  • position:relative则以自身原来位置做参考线。

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

    1.左侧边栏,中间内容区域,右侧边都要添加左浮动。
    2.中间main自适应父元素宽度。
    3.父元素添加padding为左右侧边栏预留空位。(圣杯布局)
    4.在中间元素添加一个子元素,并且子元素左右设置边距。(双飞翼布局)

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

    原理:
    圣杯布局其特性是,左右侧边宽度固定,中间main自适应父元素宽度,而父元素设置左右padding为左右侧边栏预留位置的一种布局。
    实现步骤:
    1:
    html写出父元素container,子元素main,aside,extra。
    css设置aside,extra固定宽度,main宽度自适应。

    步骤1.png

    2:
    main,aside,extra设置左浮动,然后在父容器使用伪元素after清除浮动。

    步骤2.png

    3:
    aside设置margin-left:-100%;,extra设置margin-left:-200px;父元素设置左右padding:200px;

    步骤3.png

    4
    aside设置position:relative; right:200px
    extra设置position:relative; left:200px

    步骤4.png

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

    双飞翼布局原理
    双飞翼布局原理是在main外层添加wrap父容器,然后通过设置wrap的左右margin,从而达到布局效果。

    步骤:
    1.设置container父容器,子元素main,aside,extra,然后在main再设置一个子元素warp。
    2.同样main自适应父元素宽度,aside,extra有固定宽度,然后都左浮动。
    3.使用伪元素after清除浮动,然后左侧栏负边距设置为-100%,右侧栏负边距为其宽度的相反数。
    4.设置warp左右边距大于或者等于asider和extra即可。

    双飞翼布局.png

    代码题

    代码1
    代码2
    代码3
    代码4
    代码5

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

    感谢吃瓜子观众:

    gaki12.png
  • 你可能感兴趣的:(日夜谈——负边距、三栏布局)