• css中marginleft与left的区别


    研究下拉菜单和弹出菜单时比较所得:
    1.直接在css中设置left生效的前提是必须设置父容器position:absolute或relative,如果不设置则会显示为最近一个定位的父对象左边相关的位置:
    测试代码:

    1     <div style="position:relative;top:100px;left:100px;border:1px solid blue;100px;height:100px;">
    2     <div id="outer" style="position:relative;margin-top:25px;margin-left:25px;50px;height:50px;border:1px solid red;">
    3         <div id="inner" style="position:absolute;left:15px;top:15px;25px;height:25px;border:1px solid green;"></div>
    4     </div>
    5     </div>

    测试效果:
    不设置红线框的position,设置蓝线框的position,绿线框的位置:

    设置红线框的position,设置蓝线框的position,绿线框的位置:

     

    2.设置margin-left则只会出现在父对象的左边的相对位置,不考虑是否设置了position。
    测试代码:

    1     <div style="position:relative;top:100px;left:100px;border:1px solid blue;100px;height:100px;">
    2     <div id="outer" style="position:relative;margin-top:25px;margin-left:25px;50px;height:50px;border:1px solid red;">
    3         <div id="inner" style="position:absolute;margin-left:15px;margin-top:15px;25px;height:25px;border:1px solid green;"></div>
    4     </div>
    5     </div>

    不设置红线框的position,设置蓝线框的position,绿线框的位置:


    设置红线框的position,设置蓝线框的position,绿线框的位置:


    3.设置margin-right无法起到将element定位到右边相距XX位置,但设置right可以。
    测试代码:
    <div style="position:relative;98px;height:63px;background-image:url('images/pic.png');margin-left:100px;margin-top:300px;">
    <img src="images/delete.gif" style="position:absolute;top:-10px;right:-5px;"/>
    </div>


    测试效果:
    设置margin-right

    设置right

    申明:此文非本人原创,引用自http://blog.csdn.net/tomatozq/article/details/7178144

     

  • 相关阅读:
    docker/kubernetes国内源/镜像源解决方式
    logstash的filter之grok
    基于ambari搭建hadoop生态圈大数据组件
    Hadoop整体概述
    flume的配置详解
    Zabbix错误”zbx_mem_malloc(): out of memory”解决方法
    Windows环境下的RTKPlot_Qt版本编译时遇到的问题和解决方法
    基于 win7下虚拟机的 GNSS-SDR安装过程
    博客文章搬迁同步声明
    RTKLIB源码解析(一)——单点定位(pntpos.c)
  • 原文地址:https://www.cnblogs.com/yony/p/2542947.html
Copyright © 2020-2023  润新知