关于 负边距、三栏布局

---

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

1. 负边距是改变外边框移动元素，会带动其他元素改变位置，而position:relative虽然会偏移，但不会改变其他元素位置，只会让自己便宜
2. position:relative是基于自己偏移，负边距是基于父元素内边框或者兄弟元素外边框偏移

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

1. 父元素要有3个子元素，并且都向左浮动 父元素清除浮动
2. 左边的aside的margin-left应为100%
3. 右边的extra应取值为自身的宽度负值（相同）
4. 左右两边都需要position:relative
5. 如果中间内容没有设置宽度的话，应该设为width:100%

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

• 原理：利用负边距，float，positive:relative实现。
• 步骤

1. 设置一个父元素div，并设置三个子元素main(中间)aside(左边)extra(右边)
2. 中间的main应设置width为100%，高度自定义，并且向左浮动。
3. 同理，左边的aside和右边的main都应向左浮动，并且使用positive:relative进行定位，宽高取决于你自己。
4. 进行定位后，其中左边的aside应left:自身宽度负值，同时margin-left:100%偏移到到main内边框的左边
   右边的extra应left:(自身宽度值),margin-left:-100px（通常是-100px）
5. 父元素清除浮动，并且进行Padding的内边框设置

如图：

圣杯布局样式.png

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

• 原理：和圣杯不同，双飞翼主要是在中间的main创建一个盒子进行调节，而左右是利用float和负边距。
• 步骤

1. 设置一个父元素div，并设置三个子元素main(中间)aside(左边)extra(右边)
   其中，中间的main再设置一个wrap子元素
2. 中间的main应设置width为100%，高度自定义，并且向左浮动，但是不用设置颜色。
3. 在wrap子元素中，高度和main一样，但是margin-left和margin-right根据自己的需要改变，两边相同
4. 左（aside）和右(extra)向左浮动，同时左边（aside）设置为margin-left:-100%，右边(extra)设置为（margin-left）自身宽度
5. 父元素清除浮动

如图：

双飞翼布局样式.png

---