前端基础（问答9）

---

keywords: 负边距、relative、三栏布局、圣杯布局、双飞翼布局。

---

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

负margin和position:relative都能让元素在不同流中产生偏移，同样是以元素原始位置作为参考，不同的是负margin会让元素移动的同时，改变后面元素的排列布局，而position:relative仅仅是视觉上元素位置产生移动，实际占据的空间并无变化，后面元素的排列当然也不会受影响。

position:relative

负margin

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

三个块级元素全部浮动，中间部分在html中的结构应位于最前面，并且在css中利用父元素的padding使宽度自适应。

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

原理：
1、浮动元素的排列顺序；
2、clear撑开容器高度；
3、负margin移动浮动元素；
4、position:relative。
步骤：
1、利用负margin使三个浮动元素排成一行，其中dom树当中的第一个浮动元素占据整行；
2、给父容器设置pdding，为两侧腾出空间；
3、利用position:relative移动两侧浮动元素至合适位置。

圣杯布局

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

原理：
1、浮动元素的排列顺序；
2、利用固定margin不固定宽度使元素水平居中；
3、负margin移动浮动元素；

步骤：
1、设置三个元素浮动；
2、给第一个浮动元素的子元素设置margin，为两侧腾出空间；
3、利用负margin移动两侧浮动元素至合适位置。

双飞翼布局