marginleft为负,marginleft负值
关于margin-left为负值的问题
按照你说的效果做试了下,没有发现你说的问题。
是不是你有别的代码影响到了。
试一下:
#imgs的外层div
position:relative;
overflow:hidden;
试试
或者给个演示地址来看看
自己拿firebug调试下~ 肯定是别的代码影响到了。

margin 负值的原理
首先贴一些看的文章
图解:
流动性解析:
那么首先要理解一个块的流动受内部的横向流和外部的横向流的影响,这里以左右为例,上下同理。
这里的块left right都有宽度,当设置好宽度,和float左移的视觉是这样的
接着设置left块的margin-left负值,会发现根据设置的值而逐渐向左移动(图1),可以想象到,把块左边的阻隔线左移,块跟随阻隔线移动的过程,所以当设置margin-left: -100%的时候; 当前的元素向左侧流动(-100%是父级contain的宽度),当左侧的空间大于元素自身的宽度,则向上流动,再继续向左,直到移动100%的宽度,造成了视觉上上移的效果(图2):
这里再通过一个相对定位自身左移-200px; 实现左边块的布局;对于右边的块,当设置margin-right负值的时候;会发现,设置0-99px之间的负值,右边的块是不动的(图3),当设置等于-100px或者更大的负值,右边的块向左上移动到第一排的最右边,当数值再增加也是不会再向左移动了(图4)。所以我推测,margin-right负值流动的时候,因为right属性对应的是自身参考线,而自身的宽度已经确定,所以,在当前区域有空间的时候,并不因为设置了margin-right负值自身左移,但是当当前的空间不足自身宽度,则会顺应外部流向上移动,但是当设置更大的值的时候,又会因为自身的宽度而不会继续左移。不过要注意,虽然块本身没有左移,但是实际渲染的时候,逻辑上的左移是存在的,会影响到后面的元素跟着移动后的阻隔线左移(图5)
感觉理解的还是不太到位。??
margin负值的用法及相关布局
1. 文档流
指在网页中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。主要的形式是自上而下(块级元素),一行接一行,每一行从左至右(行内元素)。
定位类型包括三种:
包含三种类型:块级元素的块级格式、行内元素的行内格式以及两种元素的相对定位方式。
2.脱离文档流
要使一个元素脱离文档流有两种方式:
使用浮动(float): 值为 left、right 均会使元素脱离文档流,但不会脱离文本流,即利用float脱离文档流的时候,其他盒子元素会无视这个元素,但是其他盒子内的文字依然会为它让出位子,环绕在其周围)
????????对于float布局:
? ??????1.如果浮动元素的上一个元素也是浮动,那么该元素会与上一个元素排列在同一行,如果行宽不够,后面的元素会被挤到下一行
2.如果浮动元素的上一个元素不是浮动,那么该元素仍然处于上一个元素的下方,根据浮动设定在左或者在右,而其本身也脱离普通流,后边的元素会自动往上移动到上一个普通流元素下方为止
? ? ? ?3 当给元素设置float后,元素将形成“块”,可以给该元素设置宽高,如span元素。而float属性被除去时,宽高就会失效
使用定位(position): 值为 absolute、fixed 的元素脱离文档流,其它不脱离文档流
3. 普通流的margin取负值
? ? ? ? 1.margin-left为负值(影响自身元素
? ? ? ? ? ? div2: marigin-left:-50px
? ? 2.margin-right为负值
? ???????div2: marigin-right:-50px(设置宽度时,无影响
? ? ? ? ? ?当不设置宽度时,
3.margin-top:-50px(偏移值相对于自身,其后元素受影响
4.margin-bottom:-50px(自身无偏移值,,其后元素向上偏移
可以看出
margin-left?和?margin-top:影响自身元素,自身元素将向指定方向偏移
margin-right在没有设置width属性时,宽度向右增加对应的像素
margin-bottom将影响后元素,使后元素向上偏移对应像素
所有偏移的元素位于z轴最上方,偏移量覆盖正常元素的对应位置
margin-top:-50px(影响自身元素,元素将向上偏移
margin-left:-50px(影响自身元素,将向左偏移,并影响其后元素
? ? ? ? margin-left:-500px(大于自身宽度
margin-right:-50px(对自身无影响,影响其后元素,其后元素将向左偏移对应像素
margin-bottom:-50px(无影响
????可以看出
? ? ?margin-top:影响自身元素,自身元素将向对应方向偏移
????margin-left:影响自身元素,其后元素在遇到继续想左浮动直至遇到浮动元素后固定
? ?? margin-right:对自身无影响,影响其后元素,其后元素向对应方向偏移
????margin-bottom:无影响
? ?????? 两边定宽,而中间自适应的一种布局: 用到浮动、负边距、相对定位
添加样式
此时,因为container内的元素脱离文档流,footer占据原本container的文档空间,给footer添加clear属性(周围不允许浮动元素)
? ? .foot{ clear: both }
再利用 right 的 relative 属性,添加?
.right {????right: -50px? ? }? ? ?//(center因为设置width:100%将自动撑满整个中间空间)
宽度已经完成,但是当中间内容高度被撑开时
为了使高度保持一致,可使用
????等高布局(即padding补偿法,首先把列的每一个元素padding设为一个足够大的值,再把列的margin设一个与前面的padding的正值相抵消的负值,然后在父容器设置超出隐藏
margin-left 可以是负数吗
本来就是没有缝隙的。边框贴的很紧!如图: 但是感觉你的意思,是不是要他们重合? 那就必须用margin来实现了。 如上图,默认的margin为0,如果还要让里面的table向左移动的话,margin只能为负值。
在网页布局中,margin-left:-300px与margin-right:-300px有什么区别?请结合具体应用来说明原理。
这个原理很简单,这里不方便图示,只能代以文字说明:
首先要明白margin属性的作用,举个形象的例子,有两个开口盒子,一个大一个小,小盒子放在大盒子里,从正上方往下看,小盒子四条边离大盒子四条边的距离就是margin,在上述例子中margin值是正数,那么负数是什么情况呢?
负数就是说,从上面往下看,大盒子突然高度变高且开口变小(小于小盒子的开口),这就是margin值为负的概念。
附:其实这个问题很简单,如果学过物理,这与位移概念类似。