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

负边距让元素产生偏移时，元素初始所占的空间也变动了，紧邻元素的其他元素的位置也会发生变化。position:relative元素相对于自身初始的位置发生偏移，但是初始占据的空间还是存在的，而且偏移后不对周围元素产生影响。

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

1.这三栏的元素都要浮动。
2.中间内容区元素要放在最前面，宽度自适应。
3.两侧边栏区域要利用负margin移动到内容区域一样的高度。然后利用padding或margin来形成三栏布局。

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

1.圣杯布局的三栏布局被一个父元素包裹。主内容区是自适应宽度的，三栏内容都浮动，两个侧边栏利用负margin浮动到内容区左右两侧。
2.给这三个元素的父元素设置左右内边距padding，这样可以为两侧边栏提供空间。
3.设置侧边栏相对位移，移动到留出的空间处，形成三栏布局。
圣杯布局利用负margin、左浮动和padding形成三栏布局。
步骤：
1.写好基本布局

步骤1

2.利用浮动和负margin使两个侧边栏上去。

步骤2
3.设置最外层元素的padding，形成三栏。
步骤3

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

1.双飞翼布局的三栏被一个父元素包裹。主内容区写在最前面，同时给主内容区一个单独的直接父元素。
2.设置主内容区的直接父元素的高度，设置宽度为100％，并浮动。两个侧边栏的元素也设置浮动，宽度高度自己定义。
3.给两个侧边栏设置负margin，侧边栏移动到和主内容区同高度并在主内容区两侧。
4.对主内容区设置左右外边距，宽度分别不小于相应的边栏宽度，主内容区和它的直接父元素之间会有空白。
5.对两个侧边栏设置相对位移，位移距离分别对应上述外边距的距离，这样侧边栏就会占据空白空间，形成三栏布局。
双飞翼布局利用负margin、左浮动和margin形成三栏布局。
1.写好基本布局

步骤1

2.利用浮动和负margin使两个侧边栏上去。

步骤2
3.设置main元素的margin形成三栏布局。
步骤3

本文版权归作者和饥人谷所有，转载请注明出处