在网页布局中,margin-left:-300px与margin-right:-300px有什么区别?请结合具体应用来说明原理。

如题所述

第1个回答  2013-02-26
这个原理很简单,这里不方便图示,只能代以文字说明:
首先要明白margin属性的作用,举个形象的例子,有两个开口盒子,一个大一个小,小盒子放在大盒子里,从正上方往下看,小盒子四条边离大盒子四条边的距离就是margin,在上述例子中margin值是正数,那么负数是什么情况呢?
负数就是说,从上面往下看,大盒子突然高度变高且开口变小(小于小盒子的开口),这就是margin值为负的概念。
附:其实这个问题很简单,如果学过物理,这与位移概念类似。追问

我的题目描述可能不太准确,我想问的是,在网页布局中,设置margin-left、margin-right,为负值时,它们的表现有很大差别,不止是一个向左一个向右,甚至对于所属元素的所占的宽度、位置似乎也有不同的影响,我想弄清它们到底在浏览器解释机制上有什么差别,还有它们与其他样式,比如浮动等组合使用时,在解析上有哪些固定规律,并不是问margin的正值和负值有什么差别,希望您予以解答,谢谢。

追答

这么说吧,margin值设置为负的情况在实际css设计上经常出现。怎么说呢,让我组织下词汇,这么说吧,margin值为负其实就相当于一种“覆盖”,就拿选项卡设计来说,如何设计选项之间的分割线呢?最简单的方法莫过于用border-right来模拟分割线,然后用margin-left:-1px隐藏左分割线,配合overflow属性可以隐藏溢出部分。
另外,针对你文的元素所占位置宽度有影响,这种情况实际上在文字流的情况下发生,具体什么情况呢。。举个例子,网页中有一个宽度自适应的div,里边写着“我是div里面”,div外写着“我在div外面”然后将margin属性设置为margin:-10px,这样的效果就是实际上这个div的左与上像浏览器内嵌了10px,(覆盖,你懂的),这样的话div里面的文字显示会发生变化,这时候“我”字也随着内嵌了10px,可能只显示出一半,而“我在div外面这句话可能实际显示效果会嵌入div中10px。至于原理呢,实际上,在偏移后剩下的空间会被文字流填充进去,这样就造成似乎margin负值可以改变文字的尺寸和位置。
好累。。。手打这么多 ,惨,还有什么不懂的么。当然 margin负值在实际设计上还有很多应用实例,这个可以去网上搜下

本回答被提问者采纳