re:从0开始的CSS学习之路 11. 盒子垂直布局

扶摇|

已于 2024-02-12 11:50:48 修改

阅读量1.3k

点赞数 17

分类专栏：从0开始的CSS之旅文章标签： css 学习前端

于 2024-02-12 11:47:59 首次发布

本文链接：https://blog.csdn.net/qq_40394751/article/details/136100344

版权

从0开始的CSS之旅专栏收录该内容

20 篇文章 2 订阅

订阅专栏

本文讲述了在CSS垂直布局中，如何处理相邻盒子的外边距合并问题，介绍了使用父元素添加边框、内边距或`overflow:hidden`来避免这个问题，以及clearfix技巧的运用实例。

摘要由CSDN通过智能技术生成

1. 盒子的垂直布局的注意

若两个“相邻”垂直摆放的盒子，上面盒子的下外边距与下面盒子的上外边距会发生重叠，称为外边距合并
若合并后，外边距会选择重叠外边距的较大值
若两个盒子具有父子关系，则两个盒子的上外边距会发生重叠，若改变盒子的上外边距，父子盒子都会随之移动位置
三种解决办法：
1. 可以为父元素添加边框
2. 可以为父元素添加内边距
3. 为父元素添加overflow: hidden;
学习完浮清除动元素的最终解决方案：
```
.clearfix::after,
.clearfix::before {
	content: "";
	display: table;
	clear: both;
}
```

示例如下：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	div {
		width: 200px;
		height: 200px;
	}
	
	/* .box1 {
		background-color: #c7edcc;
		margin-bottom: 300px;
	}
	
	.box2 {
		background-color: #fde6e0;
	
		margin-top: 200px;
	} */
	
	.clearfix::after,
	.clearfix::before {
		content: "";
		display: table;
		clear: both;
	}
	
	.father {
		background-color: #c7edcc;
	
		/* border: 1px solid #000; */
		/* padding: 1px; */
		/* overflow: hidden; */
	}
	
	.son {
		width: 100px;
		height: 100px;
		background-color: #fde6e0;
		margin-top: 100px;
	}
</head>

<body>
	<div class="father clearfix">
		<div class="son"></div>
	</div>

	<!-- <div class="box1"></div>
	<div class="box2"></div> -->
</body>

</html>

扶摇|

关注

17
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
re:从0开始的CSS学习之路 11. 盒子垂直布局

若两个盒子具有父子关系，则两个盒子的上外边距会发生重叠，若改变盒子的上外边距，父子盒子都会随之移动位置。若两个“相邻”垂直摆放的盒子，上面盒子的下外边距与下面盒子的上外边距会发生重叠，称为。2. 可以为父元素添加内边距。1. 可以为父元素添加边框。
复制链接

扫一扫

专栏目录