1.负边距在让元素产生偏移时和position: relative有什么区别?
答:使用负边距的时候会改变元素在文档流中的位置。负边距的作用能拉动其他没有脱离文档流的元素,而设置position:relative之后元素原来在文档流中占据的空间仍会保留,它只是相对于自己原来在文档流中的位置进行偏移,如下图所示:
2.使用负 margin 形成三栏布局有什么条件?
条件:
1、需要左右侧边栏及主内容均为浮动的块级元素;
2、主内容需在最前面;
3、左侧边栏需设置margin-left为-100%,右侧边栏需设置margin-left为它本身宽度的负值;
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
原理:采用负边距使得浮动元素达到预设的位置后,再使用padding使得两侧留出空白区域待左、右边距占用,然后再使用相对定位使得左、右边距能够流向预定的位置。
步骤:
①首先写出圣杯布局的DOM结构
②对三个区块设置浮动以及aside和extra的负边距,让它们飘到main上面。(在父容器清除浮动)
③最后设置父容器的内边距为aside和extra的自身宽度(内边距可大于aside和extra的自身宽度),并且对这俩栏设置相对定位为自身宽度。
4.双飞翼布局的原理? 实现步骤?
双飞翼布局与圣杯布局的不同点在于,它不是用主区块中设置padding来形成三栏的方式,而是在主区块中设置一个子元素,再对这个子元素设置外边距的值来形成三栏。