css的负margin外边距功能简单介绍_html/css_WEB-ITnose
关于margin外边距可能绝对多数朋友都不陌生,它的功能就是设置元素的外边距。
代码如下:
div{ width:100px; height:100px; margin:10px 5px 15px 20px;}
更多基础应用可以参阅CSS的margin属性一章节。
但是与负外边距的很多功能许多人并不是太了解,下面就通过代码实例做一下简单介绍。
一.对于普通文档流的影响:
关于文档流的基本概念可以参阅什么是文档流一章节。
也就是说处于文档流的元素位置跟随文档流的变化而变化,先看一个简单的代码实例:
无标题文档 蚂蚁部落欢迎您
对于上面代码的表现,应该没有什么异议。下面就应用负外边距,代码实例如下:
无标题文档 蚂蚁部落欢迎您
大家看到上面的效果了,div元素的尺寸没有发生变化,但是文字却跑到div元素上面去了。
负外边距对于处于文档流的元素的影响是这样的,会使元素在文档流中占据的空间发生偏移,后面文档流的内容会填补发生偏移的空间,这一点和相对定位是不同的,相对定位即便是发生了偏移,但是原来的空间还是保留,所以后面的元素不会填补。上面的代码margin-bottom:-20px可以是div元素的文档流回退20px,所以文本就会填补这个回退的空间。
总结如下:在文档流中,元素的最终边界是由margin决定的,margin为负的时候就相当于元素的回退,文档流只认边界,不会管它的实际尺寸是多少。
代码实例如下:
无标题文档
上面的代码中,点击按钮可以设置内部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/
上一篇: 给90后程序员的一个建议
下一篇: SEO:怎么寻找高质量外链
推荐阅读
-
css的负margin外边距功能简单介绍_html/css_WEB-ITnose
-
css的负margin外边距功能简单介绍_html/css_WEB-ITnose
-
padding对于margin的影响简单介绍_html/css_WEB-ITnose
-
margin外边距负值的作用_html/css_WEB-ITnose
-
[转]如何解决外边距margin叠加的问题探讨_html/css_WEB-ITnose
-
body在默认情况下是具有margin外边距的_html/css_WEB-ITnose
-
绝对定位对margin外边距的影响_html/css_WEB-ITnose
-
body在默认情况下是具有margin外边距的_html/css_WEB-ITnose
-
padding对于margin的影响简单介绍_html/css_WEB-ITnose
-
绝对定位对margin外边距的影响_html/css_WEB-ITnose