-
width为auto,或不存在width属性。left和right使宽度增加,top向上位移,bottom减少css可读取高度
-
对文档流:使用负margin上移一个元素,所有跟随的元素都会被上移。不破坏文档流
-
对浮动元素:负margin会改变浮动元素的显示位置,即使我的元素写在DOM的后面,我也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的,都是利用这个原理实现的。
-
对绝对定位的影响(absolute):负margin会基于其绝对定位坐标再偏移
-
常见布局应用
-
左右固定,中间自适应(双飞翼布局)
1.可以让主要内容出现在dom结构的前面,现将主要内容渲染
2.中间只适应,两边固定宽度的效果.main { float: left; width: 100%; } .main .main-content { margin: 0 210px; background-color: rgba(33, 114, 214, 0.8); height: 500px } .left { width: 200px; float: left; background-color: rgba(255, 82, 0, 0.8); margin-left: -100%;//-100%相对于整个屏幕,相当于-1349px height: 200px } .right { width: 200px; height: 200px; margin-left: -200px;//-200回到右边 float: left; background-color: rgba(90, 243, 151, 0.8); }
-
1、margin为负数会发生什么
![](https://img-home.csdnimg.cn/images/20240711042549.png)