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

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

  1. 若两个"相邻"垂直摆放的盒子,上面盒子的下外边距与下面盒子的上外边距会发生重叠,称为外边距合并

    若合并后,外边距会选择重叠外边距的较大值

  2. 若两个盒子具有父子关系,则两个盒子的上外边距会发生重叠,若改变盒子的上外边距,父子盒子都会随之移动位置

    三种解决办法:

    1. 可以为父元素添加边框

    2. 可以为父元素添加内边距

    3. 为父元素添加overflow: hidden;

    学习完浮清除动元素的最终解决方案:

    html 复制代码
    .clearfix::after,
    .clearfix::before {
    	content: "";
    	display: table;
    	clear: both;
    }

示例如下:

html 复制代码
<!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>
相关推荐
酌量18 分钟前
路径平滑优化详解(二次规划): 数学建模与目标函数推导
经验分享·笔记·学习·机器人·自动驾驶
Tajang20 分钟前
推荐一个浏览器代理插件(Tajang Proxy),支持Chrome和Edge
前端·chrome·网络安全·渗透测试·靶场·edge
鹏多多24 分钟前
前端音频兼容解决:音频神器howler.js从基础到进阶完整使用指南
前端·javascript·音视频开发
龙仔CLL1 小时前
使用vue-pdf做本地预览pdf文件,通过垂直滚动条展示全部pdf内容,不展示分页按钮
前端·vue.js·pdf
前端架构师-老李1 小时前
12、electron专题(electron-builder)
前端·javascript·electron
IT_陈寒1 小时前
JavaScript性能飞跃:5个V8引擎优化技巧让你的代码提速300%
前端·人工智能·后端
艾小码2 小时前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation2 小时前
vue 右键菜单的实现
前端·javascript·vue.js
爱倒腾的老唐3 小时前
01、如何学习单片机
单片机·嵌入式硬件·学习
00后程序员张4 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview