基于CSS盒子模型的Margin属性研究
2014-07-18黄雪琴耿强
黄雪琴 耿强
摘要：在CSS各类属性中，Margin是一个非常重要的属性，在页面的自适应宽度布局、图片与文字的对齐等更多的页面细节处理上，一般都采用Margin属性来实现。深入了解Margin属性，对于应用CSS技术精确定位网页中的各个元素，实现网页的一些高级应用和设计，都有着重要的实践意义。
关键词：负Margin；边界合并；float元素；static元素；位移
中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2014）13-2977-02
1 概述
在CSS中，一个盒子模型由内至外有content（内容），padding（填充）， border（边框）和margin（边界）这4个部分组成。其中margin（边界）用于控制盒子与盒子之间的距离，是透明的，不能为其添加背景色，因此不会遮挡其后的任何元素。
margin属性不仅可以控制盒子与盒子之间的距离，同时对margin在不同情况下进行正值或负值设置，会产生一些不仅仅是盒子外边距的效果，还可以是“塌陷”或“位移”、“腾位”等效果。
2 设置margin属性值
margin属性可以设置一个或多个属性值，用于设置四个边的边界。
设置1个属性值时，表示上下左右4个margin均为该值；设置2个属性值时，前者表示上下边界的值，后者表示左右边界的值。如：margin：20px 30px，表示设置了某盒子的上下边界为20px，左右边界为30px；设置3个属性值时，第1个数值表示上边界值，第2个表示左右边界的值，第3个表示下边界值；设置4个属性值时，按照顺时针方向，依次为上右下左边界的值。
margin的属性设置除了可以使用简写方法外，也可以用具体的属性名称来设置某一个具体方向的margin值，有margin-bottom（下边界）、margin-left（左边界）、margin-right（右边界）和margin-top（上边界）。例如margin-bottom：20px，表示上边界值为20px。
3 margin特性分析
3.1 合并的特性
边界合并是一个相当简单的概念，合并后边界的高度等于两个发生合并的边界高度中的较大者。例如当一个元素出现在另一个元素上面时，第一个元素的下边界与第二个元素的上边界会发生合并。发生合并时，是等于两个边界值中最大的值。
当一个元素包含在另一个元素中时（假设没有padding或border把边界分隔开），它们的上下边界也会发生合并。
CSS盒子模型边界甚至可以与自身发生合并。假设有一个空元素，它有边界，但是没有border或padding。在这种情况下，上边界与下边界就碰到了一起，它们会发生合并，如图1所示。
如果这个空元素的边界遇到另一个元素的边界，边界还会发生合并。只有普通标准流中块级元素的垂直边界才会发生边界合并。行内元素、浮动盒子或绝对定位之间的盒子的边界是不会合并。
图1 空元素边界合并
3.2 负margin的特性
1）static元素的负margin
负margin对static元素的作用是，会使它们在标准流中的位置发生偏移，并且放弃偏移前占据的空间，这样它后面标准流中的其它元素就会被“拉”过来填充这部分空间。这种偏移不同于相对定位，通过相对定位偏移后，其仍然会坚守着它原来占据的空间，不会让标准流的其它元素乘虚而入。
这里看一个简单的实例，在一个页面中有三个div，它们的关系如下代码所示：
对类wrap、类box1与类box2的css设置代码如下：
.wrap {width：200px； height：200px； border：3px solid #F00；margin：0px auto；}
.box1{width：80px；height：100px；background：#CCCCFF；text-align： center；}
.box2{width：80px；height：100px；background：#CCE8CF；text-align： center；}
图2 margin负值作用后效果图 图3 不同方位的margin负值产生的效果
给类box1添加负margin属性，具体代码如margin：-10px 0px -30px -10px，这时页面显示的效果如图2所示。此时可以清楚的看到，“位移元素”已经向上并向左产生了一定数值的偏移。
当static元素的margin四个值都为正值的话，那么margin按照正常逻辑同周围元素产生边距。从实例中可以看出，当static元素margin的top和left是负值时会引起元素的向上或向左位置移动。而当元素margin的bottom和right是负值时会影响右边和下边相邻元素，把它们“拉”过来发生了负值大小的空间重叠。
当static元素的margin设置为负值时，不同方位的margin负值产生的效果如图3示。
2）float元素的负margin
负margin对浮动元素的影响与负margin对static元素的影响其实是差不多的。标准流中元素的位置由标准流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。
根据以上static的负margin属性案例，这里给“位移元素”添加一个兄弟“参考元素2”的块元素，应用的类box3与类box2的设置一样。具体的关系代码如下：
给三个子div添加上左浮动的属性float：left，在浏览器中显示的效果是三个框并排紧挨着。这时，给box1添加margin属性（margin-top：-10px； margin-left：-20px； ），在浏览器显示效果如图4所示。此时，margin的top和left是负值时会引起元素的向上或向左位置移动。如果将所有子div的左浮动都修改为右浮动：float：right，在浏览器显示效果如图5所示。此时，margin的left是负值不会引起位移，而是“腾位”后“拉”了相邻的元素过来发生重叠。
图4 左浮动top、left为负值 图5 右浮动的top、left为负值
在三个子div都设置了右浮动的情况下，再次修改box1的margin，将margin-left的属性去掉，添加上margin-right：-20px，显示效果如图6所示。此时对于右浮动的“位移元素”，margin的right负值是向右位移的作用，top的负值依然保持着向上位移的作用。
再此基础上，再给类box3添加margin属性（margin-right：：-240px；），这时可以看到，“参考元素2”在代码中是最后一位的块元素，但通过margin属性的负值设置，完全位移到了“位移元素”的前面，如图7所示。这个原理在圣杯布局、双飞翼布局中都有使用。
Margin属性研究-DD＼image7.png>
图6 右浮动的top、right为负值 图7 box3的margin-right为-240px
根据案例分析可得知，float元素的负margin根据“浮动流”的方向，将不同方位的margin值产生的作用效果重新定义，但具体的作用效果与对static元素在标准流的作用效果是相似的。
4 结束语
在页面的自适应宽度布局、图片与文字的对齐问题、隐藏首末边框等细节处理上，一般都采用了负margin来实现。负margin不但可以做出一般CSS属性所不能达到的效果，还能解决一些较为疑难的网页布局问题。
参考文献：
[1] 车元媛.基于CSS+DIV的网页布局技术应用[J].电脑知识与技术，2011（9）.
[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007（8）.
[3] 殷卫莉.基于CSS盒子模型的margin属性解析[J].扬州教育学院学报，2009（9）.
[4] 温谦.CSS设计彻底研究[M].北京：人民邮电出版社，2008.
当static元素的margin设置为负值时，不同方位的margin负值产生的效果如图3示。
2）float元素的负margin
负margin对浮动元素的影响与负margin对static元素的影响其实是差不多的。标准流中元素的位置由标准流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。
根据以上static的负margin属性案例，这里给“位移元素”添加一个兄弟“参考元素2”的块元素，应用的类box3与类box2的设置一样。具体的关系代码如下：
给三个子div添加上左浮动的属性float：left，在浏览器中显示的效果是三个框并排紧挨着。这时，给box1添加margin属性（margin-top：-10px； margin-left：-20px； ），在浏览器显示效果如图4所示。此时，margin的top和left是负值时会引起元素的向上或向左位置移动。如果将所有子div的左浮动都修改为右浮动：float：right，在浏览器显示效果如图5所示。此时，margin的left是负值不会引起位移，而是“腾位”后“拉”了相邻的元素过来发生重叠。
图4 左浮动top、left为负值 图5 右浮动的top、left为负值
在三个子div都设置了右浮动的情况下，再次修改box1的margin，将margin-left的属性去掉，添加上margin-right：-20px，显示效果如图6所示。此时对于右浮动的“位移元素”，margin的right负值是向右位移的作用，top的负值依然保持着向上位移的作用。
再此基础上，再给类box3添加margin属性（margin-right：：-240px；），这时可以看到，“参考元素2”在代码中是最后一位的块元素，但通过margin属性的负值设置，完全位移到了“位移元素”的前面，如图7所示。这个原理在圣杯布局、双飞翼布局中都有使用。
Margin属性研究-DD＼image7.png>
图6 右浮动的top、right为负值 图7 box3的margin-right为-240px
根据案例分析可得知，float元素的负margin根据“浮动流”的方向，将不同方位的margin值产生的作用效果重新定义，但具体的作用效果与对static元素在标准流的作用效果是相似的。
4 结束语
在页面的自适应宽度布局、图片与文字的对齐问题、隐藏首末边框等细节处理上，一般都采用了负margin来实现。负margin不但可以做出一般CSS属性所不能达到的效果，还能解决一些较为疑难的网页布局问题。
参考文献：
[1] 车元媛.基于CSS+DIV的网页布局技术应用[J].电脑知识与技术，2011（9）.
[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007（8）.
[3] 殷卫莉.基于CSS盒子模型的margin属性解析[J].扬州教育学院学报，2009（9）.
[4] 温谦.CSS设计彻底研究[M].北京：人民邮电出版社，2008.
当static元素的margin设置为负值时，不同方位的margin负值产生的效果如图3示。
2）float元素的负margin
负margin对浮动元素的影响与负margin对static元素的影响其实是差不多的。标准流中元素的位置由标准流的走向决定，浮动的元素也可以看成有一个“浮动流”存在，不过浮动流既可以向左，也可以向右。
根据以上static的负margin属性案例，这里给“位移元素”添加一个兄弟“参考元素2”的块元素，应用的类box3与类box2的设置一样。具体的关系代码如下：
给三个子div添加上左浮动的属性float：left，在浏览器中显示的效果是三个框并排紧挨着。这时，给box1添加margin属性（margin-top：-10px； margin-left：-20px； ），在浏览器显示效果如图4所示。此时，margin的top和left是负值时会引起元素的向上或向左位置移动。如果将所有子div的左浮动都修改为右浮动：float：right，在浏览器显示效果如图5所示。此时，margin的left是负值不会引起位移，而是“腾位”后“拉”了相邻的元素过来发生重叠。
图4 左浮动top、left为负值 图5 右浮动的top、left为负值
在三个子div都设置了右浮动的情况下，再次修改box1的margin，将margin-left的属性去掉，添加上margin-right：-20px，显示效果如图6所示。此时对于右浮动的“位移元素”，margin的right负值是向右位移的作用，top的负值依然保持着向上位移的作用。
再此基础上，再给类box3添加margin属性（margin-right：：-240px；），这时可以看到，“参考元素2”在代码中是最后一位的块元素，但通过margin属性的负值设置，完全位移到了“位移元素”的前面，如图7所示。这个原理在圣杯布局、双飞翼布局中都有使用。
Margin属性研究-DD＼image7.png>
图6 右浮动的top、right为负值 图7 box3的margin-right为-240px
根据案例分析可得知，float元素的负margin根据“浮动流”的方向，将不同方位的margin值产生的作用效果重新定义，但具体的作用效果与对static元素在标准流的作用效果是相似的。
4 结束语
在页面的自适应宽度布局、图片与文字的对齐问题、隐藏首末边框等细节处理上，一般都采用了负margin来实现。负margin不但可以做出一般CSS属性所不能达到的效果，还能解决一些较为疑难的网页布局问题。
参考文献：
[1] 车元媛.基于CSS+DIV的网页布局技术应用[J].电脑知识与技术，2011（9）.
[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007（8）.
[3] 殷卫莉.基于CSS盒子模型的margin属性解析[J].扬州教育学院学报，2009（9）.
[4] 温谦.CSS设计彻底研究[M].北京：人民邮电出版社，2008.
