zoukankan      html  css  js  c++  java
  • [转] margin负值的探讨

    原文:  margin负值-权威指南 [http://www.csswang.com/exp/cssexp/3863.html]

     

    static元素是没有设定成浮动的元素,下图说明了负margin对static元素的作用。

    1. 当static元素的margin-top/margin-left被赋予负值,元素将被拉进指定的方向。

    /* 元素向上移动10px */
    #mydiv1 { margin-top: -10px; }

    2. 但如果你设置margin-bottom/right为负数,元素并不会如你所想的那样向下/右移动,而是将后续的元素拖拉进来,覆盖本来的元素。

    /* mydiv1下边空出10px的位置给后续所有元素, mydiv1本身不移动 */
    
    #mydiv1 { margin-bottom: -10px; }
    • 在这里,我们要注意的一点是,如果mydiv1是块元素,则mydiv会水平方向上会占据一整行,即使好像是有了空位,但是后面的元素依然不能放到右边。
    • 块元素在垂直方向上没有那么霸道,如上例所示,不论mydiv1是块元素还是行内元素,后续的元素都可以进入这个10px的空位。
    • 负值的计算是以某个margin的边为起点的,而且不仅限于当前元素的范围。例如我设置 #mydiv { margin-bottom:-1000px; }, 则后面的元素就飞出屏幕了。
    • 解决margin-right问题,可以用float使得块元素变为行内元素,也可以使用margin: auto来让浏览器自行计算外边距。
  • 相关阅读:
    Deformable 可变形的DETR
    https://start.aliyun.com/
    english note 111
    HTTP/2.0与HTTP/1.1协议区别
    什么是长连接
    使用pycharm
    Java使用率大幅度下降,Python使用率逐渐攀升
    SELECT command denied to user 'root'@'localhost' for table 'user'
    mysql 问题阅后归档
    响应式编程
  • 原文地址:https://www.cnblogs.com/linxd/p/4419412.html
Copyright © 2011-2022 走看看