HTML笔记（7）

最新推荐文章于 2023-03-03 19:51:57 发布

MENFYIN

最新推荐文章于 2023-03-03 19:51:57 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/MENFYIN/article/details/114670360

版权

第一个盒子
类：box
宽高：500*400px
背景色(background-color)：pink
边框：5px green 实线
内边距：50px

第二个盒子
宽高：200*100px
边框：5px deeppink
背景色：skyblue
内边距：50px

外边距合并：相邻两个盒子之间同时设置margin，最终取的值是最大的那一个
避免相邻盒子外边距合并：只给其中一个盒子设置外边距
外边距塌陷：嵌套的两个盒子之间同时设置margin,最终取的值也是最大的一个
避免嵌套盒子外边距塌陷：给父盒子添加边框、或添加padding、或添加overflow: hidden;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第一个盒子</title>
		<style>
			.box{
				width:500px;
				height:400px;
				/* border:solid 5px green; */
				/* padding:50px; */
				background-color:pink;
				/*四个值：上 右 下 左 顺时针 */
				/*三个值：上 左右 下 */
				/*两个值：上下 左右 */
				/*margin: 100px; */
				/*margin-left: 100px;
				/*给左右margin设置auto(自动)，盒子水平居中显示 */
				margin:10px auto;
				/*超出部分: 隐藏 */
				overflow: hidden;
			}
			.box2{
				width:200px;
				height:100;
				border:solid 5px deeppink;
				padding:50px;
				background-color:skyblue;
				margin:50px auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box2">盒子</div>
		</div>
		
	</body>
</html>