负边距、三栏布局
2016-06-24 本文已影响27人
不是鱿鱼
负边距在让元素产生偏移时和position: relative有什么区别?
- position:relative 本身还处在文档流中，对其他元素没有影响
- 负margin方法使元素位置偏移，使元素在文档流中的位置发生了改变，其后的元素受其影响。
使用负 margin 形成三栏布局有什么条件?
- 使用负margin为了是main元素提前，对搜索进行优化
- 使用负margin使浮动元素上移需要处于前面的元素也是浮动元素
- 左侧边栏设置margin:-100%
- 右侧margin为其本身的宽度的负值
- 中间自适应，可在其中再建一个块，两侧margin出边栏的宽度，也可直接padding挤压中间元素
圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤
- 负边距使三栏浮动处于同一个水平线上，可适当调整位置
- 父容器设置padding，给两侧边栏留出空间
- 给边栏元素设置相对移动，填充父容器padding留出的位置
双飞翼布局的原理? 实现步骤?
- 双飞翼与圣杯类似，父容器不需要padding出位置，边栏可以直接遮盖main，再在main新建一个元素，margin出两侧边栏的位置即可。
两个例子
本教程版权归 张宇 和 饥人谷 所有，转载须说明来源
