1.负边距在让元素产生偏移时和position: relative有什么区别?
使用负边距会改变元素在文档流中的位置,并且相邻元素的位置也会受影响。而设置position:relative之后,元素自身会发生偏移,但是它在文档流中占据的空间仍会保留,相邻元素的位置不会受影响。
例:
2. 使用负 margin 形成三栏布局有什么条件?
- 三栏均为浮动的块级元素,且父元素要设置清除浮动
- 主内容区块放在最前面,左右侧栏放其后
- 左侧边栏需设置margin-left为-100%,右侧边栏需设置margin-left为它本身宽度的负值
3. 圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
原理:使用负边距使得左右两侧栏宽度固定,中间主区块宽度自适应的布局方式。左右侧边栏和中间主区块均设置浮动,然后中间主区块设置padding使得两侧留出空白。左侧边栏需设置margin-left为-100%,右侧边栏需设置margin-left为它本身宽度的负值然后再使用相对定位使得左、右边距能够流向预定的位置。
步骤:
- 第一步:写出圣杯布局的DOM结构(三个块级元素包裹在父容器中,两边的侧边栏宽度固定,中间的主内容区块宽度自适应)。
- 第二步:对三个区块设置浮动,并且父容器要清除浮动。
- 第三步:设置第二个子元素margin-left:-100%,第三个子元素margin-left:本身宽度的负值,侧边栏的两个子元素会往上覆盖中间主区块元素。
- 第四步:最后设置父容器的padding;然后使用定位,使左右栏流入相应的位置,这样圣杯布局就完成了。
4. 双飞翼布局的原理? 实现步骤?
原理:双飞翼布局跟圣杯布局的不同点在于,它不是用主区块中设置padding来形成三栏的方式,而是在其中间区块中包裹一个子元素区块做主内容,再对这个子元素设置外边距的值来形成三栏。
步骤:
- 第一步:写出双飞翼布局的DOM结构
- 第二步:对三个区块设置浮动,并且父容器要清除浮动。
- 第三步:设置第二个子元素margin-left:-100%,第三个子元素margin-left:本身宽度的负值,侧边栏的两个子元素会往上覆盖中间主区块元素。
-第四步:在主区块中设置一个子元素作主区块内容,并设置该子元素的左右margin值(值根据左右侧边栏区块宽度而定)。这样双飞翼布局就完成了。
本文版权归本人及饥人谷所有,转载请注明出处。