美文网首页html学习
负边距、三栏布局

负边距、三栏布局

作者: 不是鱿鱼 | 来源:发表于2016-06-24 10:26 被阅读27次

    负边距在让元素产生偏移时和position: relative有什么区别?

    • position:relative 本身还处在文档流中,对其他元素没有影响
    • 负margin方法使元素位置偏移,使元素在文档流中的位置发生了改变,其后的元素受其影响。

    使用负 margin 形成三栏布局有什么条件?

    • 使用负margin为了是main元素提前,对搜索进行优化
    • 使用负margin使浮动元素上移需要处于前面的元素也是浮动元素
    • 左侧边栏设置margin:-100%
    • 右侧margin为其本身的宽度的负值
    • 中间自适应,可在其中再建一个块,两侧margin出边栏的宽度,也可直接padding挤压中间元素

    圣杯布局的原理是怎样的? 简述实现圣杯布局的步骤

    • 负边距使三栏浮动处于同一个水平线上,可适当调整位置
    • 父容器设置padding,给两侧边栏留出空间
    • 给边栏元素设置相对移动,填充父容器padding留出的位置

    双飞翼布局的原理? 实现步骤?

    • 双飞翼与圣杯类似,父容器不需要padding出位置,边栏可以直接遮盖main,再在main新建一个元素,margin出两侧边栏的位置即可。

    两个例子


    本教程版权归 张宇 和 饥人谷 所有,转载须说明来源

    相关文章

      网友评论

        本文标题:负边距、三栏布局

        本文链接:https://www.haomeiwen.com/subject/cyogdttx.html