负边距除了可以进行简单的hack和实现适应浏览器的垂直和水平居中外,更多会用到在流体布局里。
今晚搜索更多相关内容的时候,从这里还学到一种结构多变(左右两栏宽度固定)但排列输出不变的负边距流体布局,我简称神奇流体布局,太神奇了,练习之余总结分享一下。
如下图,无论相关区域在相关区域里怎样滚动变换位置,输出位置都不变,left、main、right区都会分别从左到右排列。
这样做的优点:
- 结构可任意调整却不影响输出(信息量大而且用户网速慢时优先显示重要部分)
- 优先让搜索引擎抓取重要内容
- 用作高难度面试题(有必要?)
- 忽悠小MM
这样做的缺点:
- 代码不简洁,实现这样的三栏布局可用3个div解决,这里用了6个(致命)
- 可能增加重构难度
代码如下(我要看demo),有一个地方想不明白,#in区的负边距可用大于mian宽度但小于1400px的任何整数值。#out区的负边距则可用大于right的任何整数值,为什么呢? 继续阅读