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

  • 负边距在让元素产生偏移时和position: relative有什么区别?
    答:
    负边距让元素位移:会影响其他元素的位置,导致影响文档流。

    Paste_Image.png

    position:relative;不会改变该元素在文档流中原本位置,也不会影响其他元素位置,所以文档流结构不受影响。


    Paste_Image.png
  • 使用负 margin 形成三栏布局有什么条件?
    答:
    1. 三个元素都在父元素中处于float:left
    2. 中间栏宽度自适应为100%
    3. 左边栏的margin-left值设置为-100%,右边栏margin-left值设置为负的自身宽度。
  • 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
    答:原理:利用浮动和负margin实现三栏布局,再用相对定位调整两边的侧栏。
    1. 创建父容器div,和三栏的div。注意顺序:中间内容栏应排在第一方便渲染。


      Paste_Image.png
    2. 设定父容器的左右padding值分别为左右侧边栏的宽度.设置两个盒子的负margin,左侧为-100%,右侧为负其自身宽度。


      Paste_Image.png
    3. 设定父容器和左右侧边栏position:relative;,调整他们的位置,使他们位于两侧。


      Paste_Image.png
  • 双飞翼布局的原理? 实现步骤?
    答:和圣杯原理一致,不同的是,在上述的中间区块中在建一个区块进行调节。
    1. 写出页面结构,父容器包裹左右侧边栏和中间内容栏
    2. 三个容器都设置浮动,并且父容器要清除浮动,中间栏宽度设100%
    3. 使用负margin使左侧栏向左偏移100%(这里的宽度针对父容器),右侧栏向左偏移自身宽度的100%
    4. 在中间容器的内部增加一个div来包裹内容,设置这个div的左边距和右边距为两个侧边栏的宽度,从而给两边的侧边栏空出位置。


      Paste_Image.png

推荐阅读更多精彩内容