统计图怎么调整边距(负边距在布局中的使用)

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

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

当margin-bottom、margin-right设为负值的时候,元素本身没有位置变化,后面的元素会下移、右移

看几个应用场景

1.绝对定位居中的应用

统计图怎么调整边距(负边距在布局中的使用)(1)

效果如下:

统计图怎么调整边距(负边距在布局中的使用)(2)

2、float元素

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

统计图怎么调整边距(负边距在布局中的使用)(3)

有三个div的宽度之和是300px,大于280px,一行排不满,如果第三个div改成下图:

统计图怎么调整边距(负边距在布局中的使用)(4)

就可以显示在一行,如下图:

统计图怎么调整边距(负边距在布局中的使用)(5)

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

统计图怎么调整边距(负边距在布局中的使用)(6)

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

统计图怎么调整边距(负边距在布局中的使用)(7)

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

切图网(qietu.com)是一家专门从事web前端开发的公司,专注we前端开发,关注用户体验,欢迎订阅qietuwang

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页