负margin的几个问题

ddongjian0000 发布于2019-08-28 18:26 / 2654人阅读

摘要：可是这个篱笆的宽度偏偏可以是个负值。图当我们去掉的代码中的后，竟然超出了的范围也就是说它把负的绝对值，加到了自身的内容中，这无疑增大了元素本身的宽度。总结如果元素没有设置负边距方向上的长度或宽度，负边距会使负边距方向上的长度或宽度增加。

此文持续更新，发现有趣的东西
负边距是一个比较奇葩的东西，为什么说它奇葩呢？padding在border的里面；margin在border的外面。我们可以把”border“比作房子的围墙”，margin“比作房子外面的篱笆。可是这个篱笆的宽度偏偏可以是个负值。

好了，闲话少叙，放代码！


    对照
    测试

.parent{width: 400px;height: 100px;border:2px solid green;}
.child1{background: #ccc;height: 50px;}
.child2{background: #eee;height: 50px;border: 5px solid red;box-sizing:border-box;margin-right: -50px;width:400px;}

      child1作为对照，child2作为测试对象。
      以上代码在html文件中测试的结果是child1继承父元素宽度，而child2也继承父元素的宽度。

      图1

当我们去掉child2的css代码中的“width：400px”后，child2竟然超出了parent的范围！也就是说它把负margin的绝对值，加到了自身的内容中，这无疑增大了元素本身的宽度。

图2

好了，我们总结以下:
      元素设定宽度：负边距对元素的宽度没有影响
      元素未设定宽度：负边距增大元素的宽度（注意是元素本身的宽度！）以至于超出容器。
      好了，第一部分的验证结束，至于应用举例，网上的例子很多，我们只要知晓其中巧妙，大可放心应用。那再在来探讨一下，负边距对相邻元素的影响是怎样的呢？
      答案是没有空间上的影响（有遮挡效果，这是相对产生的结果）。

      图3
此文系本人原创，如有不严谨的地方还请指正。

第一次更新，回看时候发现我并没有对内容上的影响做相应的测试，这次补上

图4

图5

内容上依然没有空间上的影响，只是z轴上的先后顺序有些不同，这和布局是有关系的。

总结

如果元素没有设置负边距方向上的长度或宽度，负边距会使负边距方向上的长度或宽度增加。

 应用： 多列等宽布局/多行等高布局

如果元素设置了负边距方向上的长度或宽度，负边距会使元素和相邻元素重叠，这就是所谓的“塌陷”

 应用：元素重叠

GPU云服务器云服务器最小费用最大流算法负圈 margin: margins margin

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111229.html

css-负margin总结

摘要：为负时，属性是元素本身的右下边为参考线水平向右下位移。总结盒子最后的显示大小等于盒子的正，而负不会影响其大小。这篇文章是从原博客转载过来的，是2013年写的，有些不对的地方请指出。原文地址博客地址 , 欢迎订阅这是一篇我自己关于负margin的理解，今天因为做项目用到了负margin，几经找资料，终于搞懂了，就赶紧记下来，免得忘记了！ margin为正时，top、lef...

leap_frog 2019-08-28 18:16 评论0 收藏0
[译] 负边距详解

摘要：正是因为没有很好地了解负边距才是导致各种奇怪的问题。不理解它负边距不会在的设计窗口展示出效果。有两种场景负边距是很重要的。微调元素这是负外边距最常也是最简单的使用方式。原文 The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。...

Vixb 2019-08-28 18:20 评论0 收藏0
[译] 负边距详解

摘要：正是因为没有很好地了解负边距才是导致各种奇怪的问题。不理解它负边距不会在的设计窗口展示出效果。有两种场景负边距是很重要的。微调元素这是负外边距最常也是最简单的使用方式。原文 The Definitive Guide to Using Negative Margins 自从1998年CSS2作为推荐以来，表格的使用渐渐退去，成为历史。正因为此，从那以后CSS布局成为了优雅代码的代名词。...

Richard_Gao 2019-08-01 14:53 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
那些年，奇妙的圣杯与双飞翼，还有负边距

摘要：奇妙的圣杯与双飞翼相信很多人和我在学习前端差不多的时候就听说过了圣杯布局与双飞翼布局。他往前移动之后，文档流也会跟着移动元素宽度负边距负边距可以增加元素的宽度，对于没有的元素，负边距可以加宽他们。 [TOC] 没错，题目就是模仿《那些年，我们一起清除过的浮动》而来的。奇妙的圣杯与双飞翼相信很多人和我在学习前端差不多的时候就听说过了圣杯布局与双飞翼布局。关于取名无非是觉得长得像圣杯，...

tianhang 2019-08-30 12:50 评论0 收藏0