外边距叠加和负margin技术

小小潘不放弃

已于 2022-02-25 15:23:27 修改

阅读量356

点赞数

分类专栏： CSS进阶文章标签： css css3 html

于 2022-02-24 16:27:47 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123094636

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

外边距叠加

问题引入

看看以下例子：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>外边距叠加</title>
  <style type="text/css">
		.div1{
			background-color: #1E90FF;
			width:100px;
			height:100px;
		}
		.div2{
			background-color:sienna;
			width:50px;
			height:50px;
			margin-top: 25px;
			margin-left:25px;
		}
  </style>
 </head>
 <body>
	<div class="div1">
		<div class="div2"></div>
	</div>
 </body>
</html>

你觉得程序运行结果是怎样的？
是不是应该这样
在这里插入图片描述
但实际上却是：

其原因就是父元素和子元素发生了外边距的叠加。

三种外边距叠加情况

同级元素

当一个元素出现在一个元素上方的时候，两者的外边距（margin-top和margin-bottom）会发生叠加，最终的值是两个值之间的较大者。

父子元素

当一个元素出现在另一个元素内部时，如果没有padding和border分隔开，子元素和父元素的上下外边距也会发生合并。就如上述例子。

空元素

没有子元素或没有文字内容的元素，如br和hr。

注意

只有块级元素的垂直外边距才会叠加，且叠加后的值为两者中的较大者。

如何解决外边距叠加

这个涉及到BFC布局了，该专栏后期会详细介绍的！

负margin技术

简介

当margin-top和margin-left为负数时，当前元素会被拉向指定方向；
当margin-bottom和margin-right为负数时，后续元素会被拉向指定位置。
例如以下例子：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>外边距叠加</title>
  <style type="text/css">
		div{
			background-color: #1E90FF;
			width:200px;
			height:100px;
			text-align: center;
			line-height: 100px;
			font-size: 40px;
		}
		.div1{
			background-color: aqua;
		}
		.div2{
			background-color: yellowgreen;
		}
		.div3{
			background-color: burlywood;
		}
  </style>
 </head>
 <body>
	<div>
		<div class="div1">1</div>
		<div class="div2">2</div>
		<div class="div3">3</div>
	</div>
 </body>
</html>

在正常情况下，运行结果应该是这样的
在这里插入图片描述
当我们修改div2的CSS代码：

.div2{
	background-color: yellowgreen;
	margin-top:-50px;
}

程序运行结果如下
在这里插入图片描述
当我们修改div3的CSS代码：

.div3{
	background-color: yellowgreen;
	margin-bottom:-50px;
}

程序运行如下：
在这里插入图片描述
margin-left和margin-right效果也是类似的！

负margin技术的应用

图片与文本对齐

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>外边距叠加</title>
  <style type="text/css">
		
  </style>
 </head>
 <body>
	<div>
		<img src="img/roll_in.PNG"width="50px">这是图片
	</div>
 </body>
</html>

在这里插入图片描述
我们发现图片和文字是没有对齐的，但是如果给图片应用如下负margin技术，

<div>
	<img src="img/roll_in.PNG"width="50px"style="margin:0 3px -3px 0">这是图片
</div>

在这里插入图片描述
这样就对齐了。至于数据为什么是3px，记住就好。

自适应两栏布局（重点）

右端宽度固定，左端宽度自适应：
1 两栏都设置浮动布局
2 左栏宽度设置100%，然后给margin-right设置负值，以留出右栏的宽度。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>外边距叠加</title>
  <style type="text/css">
		/* 都向左浮动 */
		.left,.right{
		  float:left;
		 }
		 /* 左侧宽度设置100%，然后给margin设置负值以留出右栏的宽度 */
		.left{
		background-color:yellowgreen;
		width:100%;
		height:300px;
		margin-right:-200px;
		}
		.right{
		background-color:brown;
		width:200px;
		height:300px;
		}
  </style>
 </head>
 <body>
	<div>
		<div class="left"></div>
		<div class="right"></div>
	</div>
 </body>
</html>

在这里插入图片描述

左端宽度固定，右端宽度自适应就比较简单了，只需要左端浮动即可。

垂直居中对齐

1 父元素的position设置为relative，子元素的position设置为absolute
2 子元素top和left属性都设置为50%
3 子元素的margin-top和margin-left设置负为自身大小的一半

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>外边距叠加</title>
  <style type="text/css">
	.father{
		background-color: aqua;
		width:200px;
		height:100px;
		position:relative;
	}
	.son{
		position: absolute;
		background-color:rosybrown;
		width:100px;
		height:50px;
		top:50%;
		left:50%;
		margin-top:-25px;
		margin-left:-50px;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son"></div>
	</div>
 </body>
</html>