负边距、三栏布局

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

• position:relative不会改变文档流中该元素的原本位置，不会影响其他元素的位置，也不会影响这个文档流的结构；
• 负边距偏移是这个元素的偏移，会对其它的元素的位置造成改变，从而影响这个文档流；

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

• 三个元素都在父元素中处于float:left(right)状态；
• 中间栏宽度自适应为100%；
• 左边栏的margin-left值设置为-100%，右边栏margin-left值设置为负的自身宽度（三栏都为float:left状态下）；
• 然后设定父容器的padding左右值，预留侧边栏空间；（圣杯布局）
• 用相对定位调整左右侧边栏位置；（双飞翼布局）

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

4aside设置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 . 使用圣杯布局实现如下三栏布局(两侧固定宽度200px,中间自适应)

3 . 使用圣杯布局的思路实现如下两栏布局

4 . 使用双飞翼布局实现如下三栏布局(两侧固定宽度200px,中间自适应).

5 . 使用双飞翼布局的思路实现如下两栏布局

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

本教程版权归饥人谷-osborne和饥，转载须说明来源！