当前位置：网站首页 > 技术文章 > 正文

负边距在布局中的使用

zhezhongyun 2025-05-25 16:44 2 浏览

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

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

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

看几个应用场景

1.绝对定位居中的应用

效果如下：

2、float元素

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

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

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

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

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

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

切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang

CSS Margin(外边距)

上一篇：input输入框最常用样式修改
下一篇：CSS 样式表小结

相关推荐

带你看好玩的CSS-霓虹灯按钮: 对于前端开发人员来说，css是我们再熟悉不过的朋友的，它就相当于是我们页面的衣服，页面好不好看，就看我们css运用的是否炉火纯青。css学起来简单，但是我们要把它“修炼”到出神入化境界，那这可不是一丁...

自动生成的静态代码示例: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/...

如何用代码快速制作营销网站底部广告?: 当前在很多的旅游网站，底部固定广告已经成为一种常见的形式，可以参看下图。以途牛为例，下边我们一起来说一下整个制作流程显然底部是固定定位的盒子，并且是分为两组，一组为显示状态下，一组为隐藏状态下，并且通...

CSS中清除浮动的几种方法，快来学习一下吧: 前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为：html代码css部分代码为：css代码通过上面的图片可以看出，当内部的div设置float后，外部的元素的...

css reset 标签属性默认值: 在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见，但有时候我们已经为了reset而reset，我们经常看到这样的reset代码其实大部分CSSreset是没必要...

CSS实现溢出显示省略号: 小伙伴们，对于省略号呢，咱们前端攻城狮的实现方法可就是多种多样了，那接下来呢我就给你罗列一下如果用css书写这些特殊效果，来一起看看吧~~~1.单行文本超出显示省略号效果图：实现代码:HTML部分&l...

CSS 基础大揭秘:打造酷炫网页的魔法钥匙: 在当今这个数字化时代，网页已经成为我们生活中不可或缺的一部分。无论是购物、学习还是娱乐，我们每天都会与各种各样的网页打交道。而你是否曾好奇，那些设计精美的网页是如何实现的呢？今天，我们就来揭开网页设计...

治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日: 晨光透过窗户洒在键盘上，又是充满希望的一天。前端的小伙伴们，在忙碌的工作和面试压力下，不妨趁着清晨和上午这段宁静时光，静下心来，和我一起解锁CSS的奇妙世界。今天咱们就用两道高频面试题，开启元气满...

浅谈position中absolute和relative: CSSposition属性中absolute和relative很容易让人弄混，基本的概念什么着，你去参考W3C，就不啰嗦了--------------------------------------...

Highcharts基础教程(二):图表配置: 一、图表容器Highcharts实例化中绑定容器的方式有两种：1.通过dom调用highcharts函数的方式$("#container").highcharts({//...

CSS之垂直导航条: 今天的内容比较简单，我们来学习一种常见的垂直导航条的实现方法，首先看一下效果图：1.首先我们创建一个有效的列表<li><ahref="http://www.？？？.com">...

Inkscape 1.4 新功能介绍: 各位Inkscape爱好者们，备受期待的Inkscape1.4版本已经正式发布，现在就可以从Inkscape官网下载体验了！这次更新带来了许多强大的新功能和改进，旨在提升你的矢量图形编辑...

前端内功修炼:5大主流布局系统进阶: 获课：keyouit.xyz/14642/前端布局进阶：从盒模型到弹性布局，深入解析5大主流布局系统核心原理前端布局是构建用户界面的基石，理解不同布局系统的底层逻辑和适用场景对于开发高效、可维护的...

MVP最小可用产品实践:用Pywebio库写一个接口加解密的小工具: 背景最近在接口测试的过程中，由于请求报文需要先进行加密再发起请求，响应报文也需要先解密才能提取指定字段的返回值传递给下一个接口，每次都要通过代码运行相应的加/解密方法进行解析，操作起来特别麻烦，所以我...

网易的互动版涂小瓶子爆火，究竟是如何做到的?: https://mp.weixin.qq.com/s/5vmXPBWcJZ_oZ4p1znNNLw附上爆火图文链接，复制打开即可查看其实最开始看见的时候没想到这个小小的瓶子会这么火，现在的SVG交互图...

一周热门

最近发表

首页
收录
顶部