负边距、圣杯布局、双飞翼布局
2016-07-02 本文已影响0人
崔敏嫣
负边距跟relative
负边距是整个文档流发生变化,后面的元素跟着改变,即设置margin-top:-10px,则如果有相邻元素,元素会上移,覆盖之前的元素
负边距:
如果对两个元素同时设置浮动,第二个元素设置负边距,如果负边距设置的值 等于其自身的宽度,则该元素会上去,在第一个元素的末尾出现(同时第一个元素感知不到第二个元素上来)
如果负边距设置的值 等于-100%,则该元素会上去,且与第一个元素左上对齐,即 -100%为移动的距离为父容器宽度,回到起点
这样的话第二个元素直接把父元素挡住了。
用圣杯布局做分栏
圣杯布局:
左中右三栏,设置四个层,第一个大层设置padding:0 100px;并清除浮动
第二,三,四个层设置浮动,第三,四个设置浮动和负边距,position:relative;left:-100px(与padding,自身宽度一样)
左右侧边栏宽度一般固定,中间的自适应
![Upload Paste_Image.png failed. Please try again.]
双飞翼布局:
设置五个层,第一个大块,设置border即可,并清除浮动,左右中三个布局,先设置中间的,并在内部嵌套一个wrap的层,左,右两个分别设置浮动和负边距,使得其上移至第一个main在同一高度,再设置wrap使其margin-left和margin-right即可