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移动两侧浮动元素至合适位置。
双飞翼布局
