负边距、三栏布局

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

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

推荐阅读更多精彩内容