CSS布局的实用小技巧之margin负值的示例

这篇文章主要介绍了CSS布局的实用小技巧之margin负值的示例，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

你所需要的网站建设服务，我们均能行业靠前的水平为你提供.标准是产品质量的保证，主要从事网站建设、成都网站建设、企业网站建设、成都手机网站制作、网页设计、高端网站设计、网页制作、做网站、建网站。成都创新互联公司拥有实力坚强的技术研发团队及素养的视觉设计专才。

负边距即margin属性的值设为负值，在CSS布局中时一个很有用的技巧。值为正的场景很常见，大家都很熟悉其表现

当margin-top、margin-left为负值的时候，会把元素上移、左移，同时文档流中的位置也发生相应变化,这点与position:relative的元素设置top、left后元素还占据原来位置不同
当margin-bottom、margin-right设为负值的时候，元素本身没有位置变化，后面的元素会下移、右移

看几个应用场景

绝对定位元素

当元素被设置为绝对定位的时候其top、right、bottom、left值是指离最近的非static元素的距离，经典的垂直居中的一种方式正是利用的绝对定位元素的负边距实现的

把元素设置为绝对定位，然后设置top和left为50%，这时候元素的上边、左边就到了父元素的50%处，再对元素设置其自身高度、长度一般的负边距，使元素中心移动到父元素中心，实现居中对齐

CSS布局的实用小技巧之margin负值的示例

float元素

负边距对float元素的影响也是按照上面说的，不过有其特殊性，我们看个例子就很清楚了

浮动元素负边距

在一个宽度为280px的div中右3个float:left的子元素，宽度为100px，由于一排放不下，最后一个陪移动到了下一行

CSS布局的实用小技巧之margin负值的示例

我们对代码稍作修改

第三个元素添加-20px的负边距

CSS布局的实用小技巧之margin负值的示例

这时候发现第三个元素移上去了，并且覆盖了第二个元素20px，经典的多列布局正是利用此原理

多列布局





Content Content Content Content Content Content Content 
Content Content Content Content Content Content Content Content


Right

代码很简单

本来right应该在第二行显示了，但是其宽度的左浮动使它到了第一行的最右边，覆盖了wrap的一部分，但是content有right宽度的右边距，覆盖区域没有内容，这样就实现了两列布局

CSS布局的实用小技巧之margin负值的示例

普通元素

负边距对不同块元素的影响很有意思，我们通过几个例子来看一下

多列列表



aaa
bbb
ccc
ddd
eee
fff
ggg
hhh
iii

普通的做法我们肯定是通过浮动实现，通过刚才介绍的知识应该不难理解为什么这样也行。看起来在普通元素上没什么稀奇的

放大元素

什么？负边距还可以放大元素！！！



  
  inner inner inner inner inner inner inner inner inner inner inner inner

这个例子看起来平淡无奇，效果却很惊人，内层的div设置了水平的负边距后竟然变大了

CSS布局的实用小技巧之margin负值的示例

PS. 效果能实现的前提是元素的宽度不能设置为auto以外的值

带有右边距的浮动子元素列表

CSS布局的实用小技巧之margin负值的示例

看到这种效果你第一想法是什么？会不会是子元素设置margin-right，在遍历的时候nth-child(3n)还要设置为0，看看利用上面知识我们可以怎样处理

我们没有设置nth-child(3n)的边距为0，而是通过负边距使父元素“变大”。

感谢你能够认真阅读完这篇文章，希望小编分享CSS布局的实用小技巧之margin负值的示例内容对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，遇到问题就找创新互联，详细的解决方法等着你来学习!

当前标题：CSS布局的实用小技巧之margin负值的示例
文章起源：http://bjjierui.cn/article/jcjcsd.html

建站知识