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 . 使用双飞翼布局的思路实现如下两栏布局
![]()
本教程版权归饥人谷-osborne和饥，转载须说明来源！
