负边距、三栏布局

96
饥人谷_吴亚敏
2016.09.13 17:24* 字数 575
负边距在让元素产生偏移时和position: relative有什么区别?

负边距在让元素产生偏移时,相邻元素的位置也会跟着它移动。
而position: relative让元素产生偏移时,只是改变自身的位置,它在文档流中原本占用的空间不会改变,不会影响其他元素。

使用负 margin 形成三栏布局有什么条件?
  • 子容器都要设置浮动
  • 父容器要清除浮动
  • 中间容器宽度要设为100%(这样才会占满)
  • 使用负margin使左侧栏向左偏移100%(这里的宽度针对父容器),右侧栏向左偏移自身宽度的100%
  • 父容器设置padding值来控制中间栏的宽度
  • 用position:relative给左右侧边栏调整位置
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤

实现原理同上题。
步骤:

  1. 写出页面结构,父容器包裹左右侧边栏和中间内容栏
  2. 三个容器都设置浮动,并且父容器要清除浮动,中间栏宽度设100%
  3. 使用负margin使左侧栏向左偏移100%(这里的宽度针对父容器),右侧栏向左偏移自身宽度的100%
  4. 父容器设置padding值来控制中间栏的宽度
  5. 用position:relative给左右侧边栏调整位置
    demo
双飞翼布局的原理? 实现步骤?

前面和圣杯是一样的,区别只在于最后中间容器宽度的控制方法。

  1. 写出页面结构,父容器包裹左右侧边栏和中间内容栏
  2. 三个容器都设置浮动,并且父容器要清除浮动,中间栏宽度设100%
  3. 使用负margin使左侧栏向左偏移100%(这里的宽度针对父容器),右侧栏向左偏移自身宽度的100%
  4. 在中间容器的内部增加一个div来包裹内容,设置这个div的左边距和右边距为两个侧边栏的宽度,从而给两边的侧边栏空出位置。
    demo

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

日记本