HTML第十次

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



盒子：内容区（content）、边框（border）、内边距(padding)、外边距
（margin）、

left:左  right:右  top:上  bottom:下  auto：自动

外边距合并：相邻两个盒子之间同时设置margin，最终取的值是最大的那一个

避免邻居盒子外边距合并： 只给其中一个盒子设置外边距。

外边距塌陷：嵌套的两个盒子之间同时设置margin，最终取的值也是最大的一个

避免嵌套盒子外边距塌陷：给父盒子添加边框、或添加padding、或添加
overflow：hidden；



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>作业3.11</title>
		<style>
	   .box{
			width:75rem;
			height:50rem;
			background-color:pink;
			margin:1.25rem auto;
			overflow:hidden;
		}
		.box1{
			width:12.5rem;
			height:12.5rem;
			background-color:deeppink;
			margin-top:3.125erm;
			margin-left:3.125rem;
		}
		.box2{
			width:12.5rem;
			height:12.5rem;
			background-color:hotpink;
			border: black solid 0.3125rem;
			border-top-style: dashed;
			margin auto;
		}
		.box3{
			width:12.5rem;
			height:12.5rem;
			background-color:deeppink;
			margin-left:62.5rem;
		}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
	</body>
</html>
猜你喜欢
