css 负边距 小记

水平格式化

　　当我们在元素上设置width的时候,影响的是内容区的宽度  但是当我们又为元素指定指定了内边距 边框 外边距 还是会增加宽度值  (IE传统盒模型 内边距 边框 会在元素的宽度内扩展 margin会增加宽度  W3C标准盒模型  内边距 外边距  边框的宽度都会增加元素的宽度 )  下面我以W3C标准盒模型来讨论负边距对元素的影响 

#test {
            width:200px;
            background: red;
            padding: 20px;
            border:10px solid black;
            margin: 20px;
       }
        <p id="test">aaa</p>

上面这个p元素占据的宽度值    =   margin(left+right) + padding(left+right) + border(left+right) + contentwidth    = 20*2 + 20*2 + 10*2 + 200 = 300px

正常流中的块级元素框的水平部分总和等于父元素(父元素一般也为块级元素)的width

在这影响元素的宽度值的7个属性中 只有3个值能设置为auto  元素的contentwidth margin-left margin-right   在说负边距之前还是要对auto进行一下说明

(1)正常的情况下直接设置这三个属性的和等于父元素的宽度

(2)设置auto值的时候 会根据其他的值 自动的使总和等于父元素的宽度值   

#test {
            width:200px;
            background: red;

            margin:0 auto 0 100px;

        }
    
        div {
            width:500px;
        }

        <div><p id="test">aaa</p></div>

上面的例子 我们设置父元素的包含元素 margin-left:100px    margin-right:auto   width:200px    父元素的宽度为500px

发现右边距自动的变成了200px   

2.1  左右边距均为auto  width为一定宽度  会将父元素剩余的内容宽度(父元素的内容宽度-子元素的内容宽度) 平均的分配给margin-left margin-right 实现子元素在父元素的居中

2.2  一个外边距为auto 子元素的width为auto   另一个外边距为定长

#test {
            width:auto;
            background: red;
            margin:0 auto 0 100px;
        }
    
        div {
            width:500px;
        }
        <div><p id="test">aaa</p></div>

此时设置为auto的外边距会变成0 width会自动的填充剩余的值(尽可能的宽)

2.3 如果都设置为auto    那两个外边距会变成0  子元素的宽度会变成父元素的内容宽度

下面我们来考虑负边距的情况  

#test {
　　width:auto;
　　background: red;
　　margin:0 -150px 0 100px;
}
div {
　　width:500px;
}

<div><p id="test">aaa</p></div>

上面的例子中父元素的内容宽度为500    子元素的宽度为auto  margin-left为100 margin-right为-150px       我们看一下它实际的内容宽度的值

550 > 500  也就是我们子元素的宽度超出了父元素的内容宽度     其实这是可以的          100 + auto(550) + (-150)  = 500   auto为了满足总的宽度之和等于父元素的内容宽度  变成了550

在考虑负边距对元素的影响的时候,浏览器会认为负边距缩小了元素的宽度  实际上元素的宽度是没有变化的

p {
            background: red;
            display:inline-block;
            width:100px;
            margin-right: -20px;

        }
        
        <p>aaaaaaa</p><span>aaaa</span>

上面的例子中元素的宽度实际上还是100  但是由于负边距的设置 浏览器认为它的边界变小了 后边的元素就流进了它的里面

下面的图是没有设置margin-right为负的情况

不同于position:relative   position:relative  会使元素相对于原来的位置在文档流中偏移 但是不会丢失原来文档流的位置 

具体的应用可以参考 http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html

参考   CSS权威指南