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来让浏览器自行计算外边距。
  • 相关阅读:
    Oracle 常用的V$ 视图脚本
    Oracle11g新特性
    深入浅出Oracle:Redo的作用
    oracle表空间操作详解
    Oracle Directory
    linux下手动删除数据库实例
    Oracle OS认证以及口令文件
    监控Oracle数据库的常用shell脚本
    Oracle 帐号基本管理
    Oracle小知识
  • 原文地址:https://www.cnblogs.com/linxd/p/4419412.html
Copyright © 2011-2022 走看看