CSS中边框使用负边距值的奇技淫巧

2020-05-05 07:31:49易采站长站整理

自从1998年CSS2作为推荐以来,表格的使用渐渐退去,成为历史。正因为此,从那以后CSS布局成为了优雅代码的代名词。

对于所有设计师使用过的CSS概念,负边距作为最少讨论到的定位方式要记上一功。这就像是在线纹身-每个人都会做,但是没有人会谈论它。(It’s like an online taboo—everyone’s doing it, yet no one wants to talk about it.)

为其正名

我们都使用过CSS得外边距,但是当谈到负边距的时候,我们好像往差的方向发展啦。在网页设计中负边距的使用出现了两种极端,一种特别喜欢它,也有一些人认为这完全就是魔鬼的作品。

负边距的使用如下:

CSS Code复制内容到剪贴板

#content {margin-left:-100px; }  

负边距通常在小范围使用。但是接下来你会看到,它能做的事情很多。下面是一些你应该知道的关于负边距的事情:

他们是完全有效的CSS
这不是在跟你开玩笑。W3C甚至都说,在外边框中使用负边距是允许的。
负边距不是在hack
这是尤其正确的。正是因为没有很好地了解负边距才是导致各种奇怪的问题。只有在被用来解决其他地方的bug的时候才是hack
它符合正常的文档流
当负边距使用在没有浮动的元素上时并不会破坏正常的文档流。所以付过你使用负边距把元素向上微调的话,所有后面的元素也会向上微调。
它是相当好的兼容性
负边距基本上被所有现代的浏览器支持(IE6的大部分情况也是)
当使用了float之后,会有不同的表现
负边距不是你平常使用的属性,所以使用的时候要格外小心。
Dreamweaver不理解它
负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢?
与其共事

负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。

在static元素中使用负边距
201622110620418.gif (500×410)

一个static元素是一个没有使用过float的元素。上面的图片展示了一个static的元素使用负边距之后的情况。

当一个static元素在top/left使用负边距时,它把元素向这个特定的方向拉,比如

CSS Code复制内容到剪贴板

/* Moves the element 10px upwards */  
#mydiv1 {margin-top:-10px;}  

但是当你将负边距设置为相对bottom/right时,它并不会把元素向下或右拉,相反,它会把后面的元素往里面拉,从而覆盖自己。

CSS Code复制内容到剪贴板

/*  
 所有在#mydiv1后面的元素都会向上  
 移动10px,而#mydiv1一点都不会移动