你的位置:首页 > 网页设计

[网页设计]css的负margin外边距功能简单介绍


css的负margin外边距功能简单介绍:
关于margin外边距可能绝对多数朋友都不陌生,它的功能就是设置元素的外边距。
代码如下:

div{ width:100px; height:100px; margin:10px 5px 15px 20px;}

更多基础应用可以参阅CSS的margin属性一章节。
但是与负外边距的很多功能许多人并不是太了解,下面就通过代码实例做一下简单介绍。
一.对于普通文档流的影响:
关于文档流的基本概念可以参阅什么是文档流一章节。
也就是说处于文档流的元素位置跟随文档流的变化而变化,先看一个简单的代码实例:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#antzone{ width:200px; height:100px; background:#ccc;}</style></head><body><div id="antzone"></div>蚂蚁部落欢迎您</body></html>

对于上面代码的表现,应该没有什么异议。下面就应用负外边距,代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#antzone{ width:200px; height:100px; background:#ccc; margin-bottom:-20px;}</style></head><body><div id="antzone"></div>蚂蚁部落欢迎您</body></html>

大家看到上面的效果了,div元素的尺寸没有发生变化,但是文字却跑到div元素上面去了。
负外边距对于处于文档流的元素的影响是这样的,会使元素在文档流中占据的空间发生偏移,后面文档流的内容会填补发生偏移的空间,这一点和相对定位是不同的,相对定位即便是发生了偏移,但是原来的空间还是保留,所以后面的元素不会填补。上面的代码margin-bottom:-20px可以是div元素的文档流回退20px,所以文本就会填补这个回退的空间。
总结如下:在文档流中,元素的最终边界是由margin决定的,margin为负的时候就相当于元素的回退,文档流只认边界,不会管它的实际尺寸是多少。
代码实例如下:

<!DOCTYPE html><html><head><meta charset=" utf-8"><title>无标题文档</title><style type="text/css">#box{ width:200px; background:#ccc; overflow:hidden;}#inner{ width:80px; height:100px; background:red;}</style><script>window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("inner"); obt.onclick=function(){  odiv.style.marginBottom="-20px"; }}</script></head><body><div id="box"> <div id="inner"></div></div><input type="button" id="bt" value="查看效果"/></body></html>

上面的代码中,点击按钮可以设置内部div的margin-bottom值为-20px,那么它在文档流中就回退20px,那么外层div元素高度也会减少20px。但是需要注意的是,父元素必须要有overflow:hidden,否则虽然文档流回退,父元素的高度也减小了,但是没有效果。
二.负外边距对宽度的影响:
这里就不多介绍了,具体可以参阅负外边距margin对宽度的影响一章节。
三.负外边距对浮动元素的影响:
这里就不多介绍了,具体可以参阅负外边距margin对浮动元素的影响一章节。
四.负外边距对定位元素的影响:
这里就不多介绍了,具体可以参阅负外边距margin对于定位元素的影响一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18295

更多内容可以参阅:http://www.softwhy.com/divcss/