分享人:顾仁鹏
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
CSS盒模型中,margin是我们非常熟悉的一个属性,大多数情况下,我们采用的都是正数的 margin 值,可能有时候会用到负的 margin 值。 很多人都觉得,负的 margin 值总是可能出现莫名其妙的问题,所有不愿使用。但是,本文要说明的就是,负的 margin 值并不是 hack,这是正常范围内的写法。
根据 W3C,margin 是能够接受负值的,只是在具体实现上有一些区别。那么,设置margin为负值究竟会是什么样的效果呢?
首先我们先了解margin的性质
负margin就是在缩小自身的边界
在margin属性中一共有两类参考线,top和left的参考线属于一类,right和bottom的参考线属于另一类。top和left是以外元素为参考,right和bottom是以元素本身为参考。
负margin是绝对标准的CSS
不脱离文档流,不使用float的话,负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素,所有跟随的元素都会被上移。
负margin会改变浮动元素的显示位置,即使元素写在DOM的后面,也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的,都是利用这个原理实现的。
对于绝对定位元素,负margin会基于其绝对定位坐标再偏移
1.双飞翼
2.去除边框
1.bootstrap4中负margin的默认样式
2.利用负margin居中
1.双飞翼还可以怎么实现
2.负Margin元素重叠问题
1.两个block元素重叠时,后面元素可以覆盖前面元素的背景,但无法覆盖其内容 2.当两个inline元素,或两个line-block元素,或inline与inline-block元素重叠时,后面元素可以覆盖前面元素的背景和内容 3.当inline元素(或inline-block元素)与block元素重叠时,inline元素(或inline-block元素)覆盖block元素的背景,而内容的话, 后面的元素覆盖前面的元素
3.不设置宽度时,负margin会怎么样
感谢大家观看
by: 顾仁鹏