负边距、圣杯布局、双飞翼布局

负边距跟relative
负边距是整个文档流发生变化,后面的元素跟着改变,即设置margin-top:-10px,则如果有相邻元素,元素会上移,覆盖之前的元素
负边距:
如果对两个元素同时设置浮动,第二个元素设置负边距,如果负边距设置的值 等于其自身的宽度,则该元素会上去,在第一个元素的末尾出现(同时第一个元素感知不到第二个元素上来)
如果负边距设置的值 等于-100%,则该元素会上去,且与第一个元素左上对齐,即 -100%为移动的距离为父容器宽度,回到起点
这样的话第二个元素直接把父元素挡住了。
用圣杯布局做分栏

Paste_Image.png

圣杯布局:
左中右三栏,设置四个层,第一个大层设置padding:0 100px;并清除浮动
第二,三,四个层设置浮动,第三,四个设置浮动和负边距,position:relative;left:-100px(与padding,自身宽度一样)
左右侧边栏宽度一般固定,中间的自适应

![Upload Paste_Image.png failed. Please try again.]
双飞翼布局:
设置五个层,第一个大块,设置border即可,并清除浮动,左右中三个布局,先设置中间的,并在内部嵌套一个wrap的层,左,右两个分别设置浮动和负边距,使得其上移至第一个main在同一高度,再设置wrap使其margin-left和margin-right即可

Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,863评论 1 92
  • 1.负边距在让元素产生偏移时和position:relative有什么区别? 通过负边距进行偏移的元素,它会放弃偏...
    饥人谷_任磊阅读 309评论 0 1
  • relative:生成相对定位的元素,通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 1,007评论 0 2
  • 作家野夫在他的书里写过这样一件事情:80年代他大学毕业被分配到海南当差,挚友苏家桥执意要送。他们从利川县城坐车到恩...
    惟桑与梓阅读 307评论 0 0
  • 今天班级聚餐啊,烧烤野炊游戏水枪,这个学期第一次出去玩,很开心,烧烤技能加一点,和朋友们一起滋水枪时完全感觉不到腿...
    bu良青阅读 724评论 3 1