css-负margin总结

leap_frog 发布于2019-08-28 18:16 / 1981人阅读

摘要：为负时，属性是元素本身的右下边为参考线水平向右下位移。总结盒子最后的显示大小等于盒子的正，而负不会影响其大小。

这篇文章是从原博客转载过来的，是2013年写的，有些不对的地方请指出。

原文地址

博客地址 , 欢迎订阅

这是一篇我自己关于负margin的理解，今天因为做项目用到了负margin，几经找资料，终于搞懂了，就赶紧记下来，免得忘记了！

margin为正时，top、left属性是以content上（左）或垂直上方相连元素margin的下（右）边为参考线垂直向下（右）位移。

margin为负时，right、bottom属性是元素本身的border右（下）边为参考线水平向右（下）位移。

总结

盒子最后的显示大小等于盒子的border+padding+正margin，而负margin不会影响其大小。

margin为负且盒子static时：

若属性为top、left，盒子将被拉进指定的方向;

若属性为bottom、right,将后续的元素拖拉进来，覆盖本来的元素。

若width没有被设置，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样

选项卡demo

怎么样实现上面菜单栏的选中状态下没有下边框的效果？
一般的思路是每个菜单栏设置边框，选中的状态没有下边框

其实还可以这样，边框不是上面菜单栏的，而是下面内容块的：

明白了把，所以只要给菜单栏设置margin-bottom:-1px就可以让下面的内容块上移1px，刚好让菜单栏的背景色盖住那个1px的边框。
如果选中状态没有背景色，就悲剧了：

请看 demo

现在看这个例子没有明显展示出负margin的能力，再看下面的

负margin加宽元素

再看一个width没有设置，通过负margin加宽的元素的布局例子，这是很常见的例子，如果不用负margin，就会很麻烦呢
demo

圣杯布局

因为BFC有这个特性：

元素在设定width时，添加border、padding、margin会导致元素变宽；但是在没有设定width时，元素会自动填满父元素，添加padding、border、margin会使元素变窄，减少量等于他们三个之和。

demo

负margin实现两列等高布局

demo

参考文章

负值之美

以上是网上资料总结，我的总结就一句话：left、top不论正负自己动，right、bottom不论正负别的元素动！正的向外，负的向内！考虑问题的时候还要考虑到盒子的特性问题！！

PS:遇到问题只要先想想什么是margin，margin的作用是什么，则负margin的工作原理则迎刃而解！

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

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

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

CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

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

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

tianhang 2019-08-30 12:50 评论0 收藏0
CSS 布局经典问题初步整理

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

Amos 2019-08-29 12:36 评论0 收藏0
css实现元素水平垂直居中

摘要：结构如下实验结果如下实现了子元素的水平垂直居中，同时可观察到两张图溢出的方式不同绝对定位的溢出或或的溢出 1.绝对定位，利用负边距利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的position设为absolute，绝对定位；以及设置left和top为50%；再加上负边距，margin-left值为w...

ninefive 2019-08-29 13:46 评论0 收藏0
负margin的几个问题

摘要：可是这个篱笆的宽度偏偏可以是个负值。图当我们去掉的代码中的后，竟然超出了的范围也就是说它把负的绝对值，加到了自身的内容中，这无疑增大了元素本身的宽度。总结如果元素没有设置负边距方向上的长度或宽度，负边距会使负边距方向上的长度或宽度增加。此文持续更新，发现有趣的东西负边距是一个比较奇葩的东西，为什么说它奇葩呢？padding在border的里面；margin在b...

ddongjian0000 2019-08-28 18:26 评论0 收藏0