CSS中外边距bug以及外边距缺陷的问题

有兴趣的可以访问我的github地址：https://github.com/wangzhichao2019/-web-

一、外边距bug：

  • 两嵌套模块的margin-top及margin-bottom问题 
    <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>外边距合并</title>
	<style>
		div
		{
			width: 300px;
			height: 200px;
			background-color: purple;
		}
		.xiongda
		{
			margin-bottom: 100px;
			/*给xiongda下面100px*/
		}
		/*用另一颜色把这两个隔开*/
		.xionger
		{
			/*优先级，类选择器的优先级（层叠性）更高*/
			background-color: pink;
			margin-top: 50px;
			/*给xionger上面50px的距离，这时如果没有bug的话，两个盒子应该是相距150px*/
			/*但是发现盒子间的距离不变，叫作外边距bug，最终2个盒子间的距离是两者的最大者*/
		}
	</style>
</head>
<body>
	<!--
		清楚元素内、外边距
		*代表所有的意思：执行效率较慢，所以腾讯等大网站的全局都很长，行内元素只有左右边距，没有上下边距
		* {
			margin:0;
			padding:0;
		  }
	-->
	<div class="xiongda"></div>
	<div class="xionger"></div>
</body>
</html>

     

二、外边距塌陷：

  • 只出现在嵌套垂直方向上的外边距塌陷
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>外边距合并</title>
	<style>
		.father
		{
			width: 500px;
			height: 500px;
			background-color: pink;
			padding-top: 50px;/*发现小盒子被挤下来了*/
		}
		.son
		{
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-top: 50px;/*发现大盒子和小盒子整体都下移了50px（两种的最大者）————外边距塌陷（只会出现在嵌套外边距的垂直方向上）*/
			/*
			 解决方案：
			 给父亲：border：1px solid pink；（会撑开盒子）
			 padding-top：1px；也可以（也会撑开盒子）
			 overflow：hidden；（溢出隐藏，不会影响盒子的体积）
			 */
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

三、作业：

自己瞎捣鼓的针对今天学的作业：（用三种方法来解决外边距塌陷——三个盒子）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>外边距bug及塌陷</title>
	<style>
		*
		{
			margin: 0;
			padding: 0;
			/*清除内外边距*/
		}
		.lu,.father,.teacher
		{
			width: 200px;
			height: 200px;
			background-color: green;
		}
		.huangfu,.son,.student
		{
			width: 100px;
			height: 100px;
			background-color: pink;
			margin-top: 20px;
			/*小盒子再次移动20px，大盒子不动*/
		}
		.lu
		{
			margin-top: 20px;/*发现盒子一起下移了20px*/
			height: 190px;
			padding-top:10px;
			/*小盒子被挤下来了10px，所以原来的height得在原来的基础上减少190px*/
			margin-bottom: 10px;
		}
		.father
		{
			border:1px solid pink;
			height: 199px;
			margin-bottom: 10px;
		}
		.teacher
		{
			overflow:hidden;
		}
	</style>
</head>
<body>
	<div class="lu">
		<!--这是第一种解决外边距塌陷的办法-->
		<div class="huangfu"></div>
	</div>
	<hr />
	<div class="father">
		<!--这是第二种解决外边距塌陷的办法-->
		<div class="son"></div>
	</div>
	<hr />
	<div class="teacher">
		<!--这是第三种解决外边距塌陷的办法-->
		<div class="student"></div>
	</div>
</body>
</html>

实现的效果是这样的：

posted @ 2019-09-07 21:52  lures  阅读(100)  评论(0)    收藏  举报
油
加