1.负边距在让元素产生偏移时和position: relative有什么区别?
当margin-top、margin-left为负值的时候,会把元素上移、左移,同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同
未设置负margin:
设置负margin后:
设置position:relative:
当margin-bottom、margin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移、右移
负的边距好像能减小元素在文档流中的尺寸一样,但事实上,它的尺寸大小并没变,只是文档流在计算元素位置的时候,会认为负边距把元素的尺寸减小了,因为位置也就发生变化了。这只是打个很形象的比喻,帮助大家理解一下。还要注意的是,文档流只能是后面的流向前面的,即文档流只能向左或向上流动,不能向下或向右移动。
2.使用负 margin 形成三栏布局有什么条件?
- 父元素中的三个子元素必须设置浮动
- 中间的子元素为主要内容,宽度设置为100%,在html中最靠前显示
- 左侧边栏设置margin-left:-100%,跑到主内容的最左边,右侧边栏设置margin-left为它本身宽度的负值,跑到主内容的最右侧;
3.圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
圣杯布局和双飞翼布局,他们的都要求三列布局,中间宽度自适应,两边定宽,这样做的优势是重要的东西放在文档流前面可以优先渲染,而双飞翼布局是对圣杯布局的一种改良
1.写出三栏,主要内容main在最前面
2.设置浮动,并在最后清除浮动
3.设置负margin
4.设置父元素padding值,预留出侧边栏位置
5.使用相对定对,移动侧边栏至相应位置
4.双飞翼布局的原理? 实现步骤?
在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多
在淘宝UED探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是所说的双飞翼布局。