我的编程空间,编程开发者的网络收藏夹
学习永远不晚

CSS负边距的行为表现方法

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

CSS负边距的行为表现方法

这篇文章主要讲解了“CSS负边距的行为表现方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS负边距的行为表现方法”吧!

  CSS 中的负边距

  margin 是可以设置为负值的,这会帮你实现靠近顶部/左边相邻元素的效果,或者实现靠近底部/右边相邻元素的效果。

  先介绍下我们的测试元素:一个简单的包含三个段落的容器元素。注意,段落设置了固定宽度 250px。

  <div class="test-container"> <p>First paragraph with a bit of text in it to provide some content.</p> <p>Second paragraph with a bit of text in it to provide some content.</p> <p>Third paragraph with a bit of text in it to provide some content.</p>

  </div>

  <style>

  * { box-sizing: border-box; }

  .container {

  border: 5px double;

  width: 300px;

  padding: 0 10px;

  }

  .container p {

  border: 1px solid;

  width: 250px;

  }

  </style>

  效果:

  负边距 margin-top/bottom

  先给第一段文本 margin-bottom: -15px,结果第二段文本的经浏览器重新计算,向上提升了 15px。

  第二段文本作为邻居紧跟在第一段文本后面,第二段文本和第三段文本之间的间距没有变化,整体依旧是垂直布局。

  这个技巧比较适合用来微调位置,如果一个元素想要轻微的盖住前面一个元素的话,可以使用它。

  现在恢复布局,给第二段文本 margin-top: -15px 看看效果。

  可以看见,跟在第一段文本使用 margin-bottom: -15px 的效果一样。第二段文本在此被向上提升了 15px。通过在浏览器控制台查看,第一段文本的 margin-bottom 仍是默认的 1rem。

  边距合并(Margin collapsing)

  边距塌陷行为在负边距上的行为是不同的。

  针对负边距场景:如果相邻两元素中一个是正边距,一个负边距,则 相邻间距(adjoining margin)= 正边距 - 负边距绝对值(结果两元素相交和相离,取决于谁的绝对值更大);如果相邻两元素中没有正边距,则 相邻边距 = 0 - 边距 1 绝对值 - 边距 2 绝对值(结果两元素相交)。

  对正边距来说,规则是这样的:浏览器会比较第一段文本的 margin-bottom 和第二段文本的 margin-top,谁的值大,最终间距就是谁,以 margin-bottom: 16px 和 margin-top: 4px 为例,那么最终的间距为 16px;而对存在负边距的场景就不是这样了,像上面一个是 margin-bottom: 1em(假设是 16px),一个是 margin-bottom: -15px,那么按照规则,最终的间距是 16px - 15px,得 1px,因为是正值,所以表示两者相离 1px 的距离。

  可以看见,我们可以使用负边距达到两元素相互靠近的布局,而不会受到边距合并的影响。

  到这里,算是介绍完负边距 margin-top/bottom 的情况了。

  负边距 margin-left/right

  负边距 margin-left/right 的工作方式与 margin-top/left 一样,元素还是有一个固定宽度。下面分别给第一和第二个文本段落设置 margin-left: -10px 和 margin-right: -10px。

  可以看见,第一个段落向左偏移了 10px,宽度没有变化,同时右边缘也向左移动了 10px。

  第二个段落的负 margin-right 值没有起作用。因为 margin-right 负值影响的是第二个段落右面的元素,当前第二个段落右边是没有元素的,因此看不到效果。

  为了展示 margin-right 负值效果,需要将段落元素设置成浮动的,这样就有右边的相邻元素了。

  现在在段落上设置负边距。

  可以看见,因为第一个段落设置了 margin-right: -10px,导致第二个段落向左偏移 10px。这跟之前看到的 margin-bottom 负值的效果是一样的。

  同时,第二个段落设置了 margin-top: -10px,于是向上偏移了 10px。第三个元素设置了 margin-bottom: -10px,但没有效果,是因为底部没有元素。

  注:margin-bottom: -10px 产生了影响,效果没有出来不只是因为底部没有元素&mdash;&mdash;我们将第一个元素删除,就能看到父元素高度塌陷了,塌陷的高度正好等于第三个段落元素的负边距绝对值,即 10px(如下图)。而之前没有塌陷的原因是因为第一个元素的高度撑开了父元素,导致父元素高度无法塌陷。

  <figcaption style="margin-top: 5px; text-align: center; color: #888; font-size: 14px;">GIF.gif</figcaption>

  需要注意的是,边距合并只适用于 margin-top 和 margin-bottom 属性,不对 margin-left、margin-right 起作用,所以不用担心这里的左右边距的合并问题。

  如果,我们只是给第二个段落设置 margin-left: -10px,能看到同样的效果。

  可以看见,在元素固宽情况下,margin-left、margin-right 负值的行为表现跟 margin-top 和 margin-bottom 负值的行为表现是一样的。

  width: auto 和 margin-right 负值

  现在不为段落设置固定宽度,而是让它们使用默认的 width: auto 设置观察 margin-right 的负值行为表现。默认情况下,width: auto 段落元素默认会充满在父元素宽度,同时受限于父元素的 padding。

  现在分别给第一和第二个段落设置 margin-left: -10px 和 margin-right: -10px,第三个元素同时设置 margin-left: -10px、margin-right: -10px 查看效果。注意,为了方便对照,这里加入了一个参考元素(Reference paragraph):

  观察发现:第一个段落向左偏移了 10px,宽度增加了,右边缘未受到影响,位置未变;第二个段落向右偏移了 10px,宽度增加了,左边缘未受到影响,位置未变。这种情况,只在 width: auto 下发生,这与固定宽度的元素表现是不一样的。

  第三个段落的左右两端都使用负边距值,导致左右都向外延伸了 10px 的距离,正好抵消了容器元素左右 10px 的 padding。这是负边距最常用的应用场景&mdash;&mdash;为了让内容与容器间保持一定的留白间隙,容器设置了 padding,但是内容里的一个标题需要延伸到整个容器的宽度展示(不畏外部 padding 值),这就到使用负边距的时候了。

  这里贴出了上面结构的样式(容器元素设置了 padding: 10px)。

  h6 { margin-left: -10px; margin-right: -10px; padding-left: 10px; margin-top: 0; margin-bottom: 0; background-color: grey; color: white; }复制代码

  再一次要说明的是,这只在标题元素 width: auto 的情况下才能生效,不过这已经覆盖 99% 的实际使用场景了。

感谢各位的阅读,以上就是“CSS负边距的行为表现方法”的内容了,经过本文的学习后,相信大家对CSS负边距的行为表现方法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

CSS负边距的行为表现方法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

css设置内边距的方法

今天小编给大家分享的是css设置内边距的方法,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。在css中,可以使用padding属性设置内边距,只需要给元素设置“padding:数值+单
2023-06-14

css设置行距的方法

这篇文章主要介绍css设置行距的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css设置行距的方法:首先创建一个HTML示例文件;然后在body中定义多行文字;最后利用“line-height”属性设置行间距即可
2023-06-14

css调整行距的方法

这篇“css调整行距的方法”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“css调整行距的方法”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。css是
2023-06-06

CSS设置行间距和字间距的方法

这篇文章主要介绍“CSS设置行间距和字间距的方法”,在日常操作中,相信很多人在CSS设置行间距和字间距的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS设置行间距和字间距的方法”的疑惑有所帮助!接下来
2023-06-14

css设置表格间距的方法

小编给大家分享一下css设置表格间距的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css设置表格间距的方法:1、使用padding属性对table的td元素
2023-06-14

css中设置表格边框的方法

这篇文章主要介绍css中设置表格边框的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css表格边框的设置方法:1、通过“table{border:1px solid skyblue;}”设置外边框;2、通过“td
2023-06-15

css设置边框为虚线样式的方法

这篇文章主要介绍了css设置边框为虚线样式的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在css中,可以使用border-style属性来设置边框为虚线样式,只需要给元
2023-06-14

css设置行间距的三种方法是什么

本篇内容主要讲解“css设置行间距的三种方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css设置行间距的三种方法是什么”吧!1、使用数值来设置行间距
2023-06-30

通过Java实现设置Word文档页边距的方法详解

页边距是指页面的边线到文字的距离。通常可在页边距内部的可打印区域中插入文字和图形等。今天这篇文章将为您展示如何通过编程方式,设置Word 文档页边距,感兴趣的可以了解一下
2023-02-23

css首行缩进的实现方法

这篇文章主要为大家展示了css首行缩进的实现方法,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“css首行缩进的实现方法”这篇文章吧。css是什么意思css是一种用来表现HTML或XML等文件样式的
2023-06-06

CSS实现侧边栏菜单特效的技巧和方法

CSS实现侧边栏菜单特效的技巧和方法近年来,随着网页设计的发展,侧边栏菜单成为了许多网页中常见的元素之一。无论是用于导航功能还是展示内容,都能给用户带来方便和更好的使用体验。本文将介绍一些常见的CSS技巧和方法,帮助你实现一个漂亮且具有特效
2023-10-24

css实现不规则表格的方法

小编给大家分享一下css实现不规则表格的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!css实现不规则表格的方法:首先创建一个HTML示例文件;然后通过tab
2023-06-14

编程热搜

目录