css负外边距是什么？

1、css负外边距是什么？负边距介绍 负边距的用法如下： contentmargin-left:-100px; 负边距通常在小范围用法。但是接下来你会看到，它能做的事情无数。下面是一些你应当知道的关于负边距的事情： 他们是彻低有效的css 这不是在跟你开玩笑。w3c甚至都说，在外边框中用法负边距是允许的。 负边距不是在hack 这是尤其正确的。正是由于没有很好地了解负边距才是导致各种惊奇的问题。惟独在被用来解决其他地方的bug的时候才是hack 它符合正常的文档流 当负边距用法在没有浮动的元素上时并不会破坏正常的文档流。所以付过你用法负边距把元素向上微调的话，全部后面的元素也会向上微调。 它是相当

2、好的兼容性 负边距基本上被全部现代的扫瞄器支持（ie6的大部分状况也是） 当用法了float之后，会有不同的表现 负边距不是你平时用法的属性，所以用法的时候要分外当心。 dreamweaver不理解它 负边距不会在dw的设计窗口展示出效果。那你为什么还用dw的设计窗口查看效果呢？与其共事呢？ 负边距假如可以正确的用法的话它的功能是很强大的。有两种场景负边距是很重要的。 在static元素中用法负边距： 1.gif 一个static元素是一个没有用法过float的元素。上面的展示了一个static的元素用法负边距之后的状况。 当一个static元素在top/left用法负边距时，它把元素向这个特

3、定的方向拉，比如 /*movestheelement10pxupwards*/ mydiv1margin-top:-10px; 但是当你将负边距设置为相对bottom/right时，它并不会把元素向下或右拉，相反，它会把后面的元素往里面拉，从而笼罩自己。 /* 全部在mydiv1后面的元素都会向上 移动10px，而mydiv1一点都不会移动 */mydiv1margin-bottom:-10px; 假如宽度没有设置，左右负边距会把元素向两个方向拉以增强宽度。在这里margin的作用相当于padding 在浮动中用法负边距 加入下面就是我们的html代码： first second 假如对一个浮

4、动的元素用法负边距，它会产生一个空白，其他元素就可以笼罩这一部分。这个技巧可以很好地用户流式布局。比如有一列宽度100%，另一列有固定的宽度，比如说100px。 mydiv1float:left;margin-right:-100px; 假如两个元素都用法了左浮动并且设置margin-right:-20px。mydiv2会把mydiv1看成宽度缩小20px（所以会笼罩一部分），但是好玩的是mydiv1并不会有任何变幻，而是依旧保持原先的宽度。 假如负边距和宽度一样大的话，它就会被彻低笼罩掉。由于外边距，内边距，边框和内容加起来等于元素的宽度。假如负外边距等于元素的宽度的话，那么该元素的宽度就会

5、变成0px。 学以致用 既然我们知道用法负边距在css2中是有效的，用法它可以给我们提供一些十分好玩的css技巧。 把单个列表变成三列 假如你有一个列表垂直方向太长了，为什么不把它分成几列呢？负边距可以让你在不增强任何浮动和标签的状况下完成。你会发觉用负边距实现这个是多么地容易，就像下面： html： eggs ham bread butter flour cream css ullist-style:none; liline-height:1.3em; .col2margin-left:100px; .col3margin-left:200px; .topmargin-top:-2.6em;/*theclincher*/ 通过对.top的添加margin-top:-2