margin的负值

来源：互联网发布：电视看网络编辑：程序博客网时间：2024/05/16 14:20

margin的负值

前不久看到了久闻大名的双飞燕布局，其中用到的主要技巧就是margin的负值。margin的负值大致有以下几种效果。

1. 用在普通文档流中

在普通文档流中，margin的负值仿佛能减小元素在文档流中的大小。实际上，它的尺寸并没有变化，只是文档流在计算元素的位置的时候，会认为负边距把元素的尺寸缩小了。可以类比margin的正值来看。下面是例子：

这是没有设置margin的时候：（test是inline-block)
这是设置margin为10px时：
这是设置margin为-10px时：

但是需要注意的是，margin并没有影响到它前面的文档流。

其实类比正的margin来说，一个是向外填充了，然后会导致周围元素远离他，一个相当于将填充物抽走了，周围的元素会靠近它。

总之一句话：在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认得只是这个边界，而不管你实际的尺寸大小。

2.在块级元素中

其实margin影响的就是元素的边界，不管正margin还是负margin，即使不在普通文档流中

在块级元素中，如果自身没有设置宽度，那么这个块级元素的宽度将会由父级元素的宽度决定。如果设置了margin值，margin为正时，那么宽度将会变小，即元素自身的宽度加上margin等于父级元素的宽度。一样的道理，如果margin为负，那么自身宽度加上margin等于父级元素的宽度，所以这时该元素的宽度就会变大。

eg:

margin为0：

blockmargin0

margin为正：

blockmargin+

margin为负：

blockmargin-

这个技巧的用处：

消除列表的右边框：

经常会用到列表来显示信息，为了美观通常每个列表之间会设置一定的间距，但是需要对最右边的间距进行特别处理，设置它的margin-right:0，下面就使用margin的赋值来实现这种效果：

marginexample

代码：

<head>  <style>        body, ul, li {            padding: 0;            margin: 0;            list-style-type: none;        }        .test {            margin:0 auto;            border: 2px solid black;            width: 320px;            height: 210px;            background-color: gray;        }        .test ul {            margin-right: -10px;        }        .test li {            width: 100px;            height: 100px;            background-color: #ff0;            margin-right: 10px;            margin-bottom: 10px;                        float: left;        }    </style></head><body>    <div  class="test">        <ul>            <li>test1</li>            <li>test2</li>            <li>test3</li>            <li>test4</li>            <li>test5</li>            <li>test6</li>        </ul>    </div></body>

3.在浮动元素中：

和前面的类似，在浮动元素中使用margin的负值，将会使得元素的边界发生改变，根据边界的改动就能实现前面那些双飞燕布局等等。

下面先举一个简单的例子：

floatmargin

这是正常浮动的三个块级元素，block3由于第一行宽度不够被寄到了第二行

floatmargin-40

在这里我讲block3的margin：-40%，可以看到block3 到了第一行，这是因为它的左边界的判定变了，使得他的左边界加上它的宽度并不超过整个页面的宽度，所以留在了第一行。

floatmargin-70

这里我把margin设为了-70%，可以看到block3 继续向左移动。

所以利用这个特性就可以把写在后面的元素却显示在前面，这也就是那些双飞燕布局，圣杯布局等的原理。说明白些也就是左右列固定，中间列自适应布局：

双飞燕

代码：

<body>   <style>        body {            margin: 0;            padding: 0;            min-width: 600px;            background-color: #ccc;        }        .main {            width: 100%;            float: left;        }        .mainbody {            margin: 0 210px;            height: 200px;            background-color: #666;        }        .left {            margin-left: -100%;            background-color: #f60;            float: left;            width: 200px;            height: 200px;        }        .right {            float: left;            width: 200px;            margin-left: -200px;            background-color: #f60;            height: 200px;        }    </style></head><body>    <div class="main">        <div class="mainbody">main</div>    </div>    <div class="left">left</div>    <div class="right">right</div></body>

4.在绝对定位元素中：

绝对定位元素的top、right、bottom、left等值是元素自身边界到最近的已定位祖先元素的距离，元素自身边界指的就是margin定义的边界，所以可以使用margin来控制元素的位置。

下面是使用绝对定位来进行居中的方法：

absolute

代码：

<body>        <style>        body {            padding: 0;            margin: 0;        }        div {            width: 200px;            height: 200px;            background-color: gold;            position: absolute;            left: 50%;            top: 50%;            margin-left: -100px;            margin-top: -100px;        }    </style></head><body>    <div></div></body>

参考资料：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812

http://www.cnblogs.com/jscode/archive/2012/08/28/2660078.html

阅读全文

0 0