[转] 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来让浏览器自行计算外边距。
时间： 2024-11-12 13:03:38

[转] margin负值的探讨的相关文章

几个常见的布局的多种实现方式及margin负值总结

第一部分:几个常见的布局实现方式 一.左右两边固定, center中间自适应未知 html代码中 center 部分首先要放在box的最前部分.然后是left,right 圣杯布局: <div class="box"> <div class="center"></div> <div class="left"></div> <div class="right"&g

margin负值 – 一个秘密武器

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 1.带竖线分隔的横向列表(例如:网站底部栏目) 传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作. 所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1px隐藏掉第一个列表项的边框,父元素设置 overflow:hidden 来隐藏溢出部分,这样完美达到首尾无分割线的要求

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值 升级双飞翼布局 一.box-sizing属性 .content-size, .border-size{ width: 200px; height: 100px; padding: 10px; border: 5px solid red; margin: 20px; } .content-size{ box-sizing: content-box; } .border-size{ box-sizing: border-box; } context-siz

浮动元素margin负值的应用

上次写到三列布局,其中提到浮动元素margin为负值时的应用,今天就来总结一下,它的用处何在. 首先,先来探究一下,当一个元素的margin为负值时,都会有哪些影响. 其一,对自身的影响. 当元素不存在width属性或则width:auto的时候,负值margin会增加元素的宽度.(注意:这仅仅是在元素不存在width属性或则width属性默认的时候,如果有宽度设置,margin-left和margin-right为负值时,会发生位移.) <!DOCTYPE html> <html>

初探Margin负值(转)

相对而言,margin 负值的使用机率在布局中似乎很少,但是我相信一旦你开始掌握就会着迷,接下来我们看看关于margin负值的一些资料: 它是一个有效的属性,至少w3c中明确描述如下:”Negative values for margin properties are allowed…”; margin负值并非hack,正因为不熟悉所以有时候会避而远之,甚至误解; margin负值遵循文档流:假如使用margin负值促使一个元素向上位移,那么相关元素也会随之发生位移. 良好兼容,甚至是ie6也能

ie6、7 margin负值部分无法看到的解决方法

ie6.7下,若元素设置margin值为负值,则margin负值区域会有一部分会离奇的消失,无法在页面上看到(相当于父元素设置了overflow:hidden后,子元素超出父元素部分就会被砍掉的效果一样) 问题重现代码: <style>*{margin: 0;padding: 0;}body{padding: 200px;}</style><div style="width:200px;height:200px;background:#f00;">&

margin负值问题

一.当给一个元素设置margin 负值(top/left),该元素将在该方向上产生位移. 二.当给一个元素设置margin负值(bottom/right),这个元素并不会像你所预想的产生位移,而是将任何紧随其后的元素“拉”过来,覆盖在自己的上边. 注:如果元素没有设置宽度,那么给该元素设置margin负值(left/right)将会在两个方向增大其宽度,看起来就好像给该元素添加了padding.

margin负值得理解

在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类.top和left是以外元素为参考,right和bottom是以元素本身为参考. 和左方的 margin 负值使该元素向上和左方向移动. 下和右方的 margin 负值使该元素下方.右方的元素被拉向该元素. margin 属性可以应用于几乎所有的元素,除了表格显示类型(不包括 table-caption, table and inline-table)的元素,而且垂直外边距对非置换内

margin负值的应用

CSS盒模型中,margin是我们老熟悉的一个属性了, 它的负值你用过吗? 你知道margin负值的秘密武器吗?我们一起看看吧! 带竖线分隔的横向列表 传统的分隔符是使用 “|” 来实现的,弊端显而易见,不利于表现与结构的分离,同时增加了后台输出时的判断工作.所以我们采用border-left 左边框来模拟分割线,然后通过margin-left:-1px隐藏掉第一个列表项的边框,父元素设置 overflow:hidden 来隐藏溢出部分,这样完美达到首尾无分割线的要求. 2012-5-4 更新