• margin负值


        css中常常会见到margin-left:-20px;这类,有点晕,所以整理一下~

        主要分为两种情况:

        一、没有浮动的元素   

    /* mydiv1向上移动10px */
    
    #mydiv1 {margin-top:-10px;}
    
    /* mydiv1向左移动10px */
    
    #mydiv1 {margin-left:-10px;}
    
    /* 
    *mydiv1不动,它相邻的元素向上移动10px,覆盖了mydiv1
    */
    
    #mydiv1 {margin-bottom:-10px;}
    
    /* 
    *mydiv1不动,它相邻的元素向左移动10px,覆盖了mydiv1
    */
    
    #mydiv1 {margin-right:-10px;}

        如果该元素没有设置width,则负边距会增加它的宽,margin-right负值就是右边变宽,左边同理。

        二、浮动元素

        没有使用负值前:

    1 <div id="left" style="250px;height:250px;float:left;background-color:red;"></div>
    2 <div id="right" style="250px;height:250px;float:left;background-color:green;"></div>

     

        使用负值margin-right以后(覆盖):

     <div id="left" style="250px;height:250px;float:left;background-color:red;margin-right:-50px"></div>
      <div id="right" style="250px;height:250px;float:left;background-color:green;"></div>

       

        使用负值margin-left以后(与上面的区别就是,这次div left移动了。。。):

       着急下班,下次有时间再补充些。。。

  • 相关阅读:
    JAVA语法之小结
    JAVA之经典Student问题1
    Android之动画1
    Android之屏幕测试
    Android之点击切换图片
    Android之标签选项卡
    Android简单计算器
    Javascript之相册拖动管理
    Javascript之改变盒子颜色
    CSS之照片翻转
  • 原文地址:https://www.cnblogs.com/missuu/p/3761604.html
Copyright © 2020-2023  润新知