#外边距1

最新推荐文章于 2024-08-30 17:03:57 发布

撒都不干

最新推荐文章于 2024-08-30 17:03:57 发布

阅读量60

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/c200310045217/article/details/138661385

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>外边距</title>
		<style>
			/* 初始化所有标签的内边距和外边距,写在样式中最开始的位置 */
			*{		/* 通配符:指所有的标签 */
				margin:0;
				padding:0;
			}
			.box1{
				width:400px;
				height:400px;
				background-color: pink;
				margin-bottom: 80px;
				/* 设置块级盒子水平居中:给盒子的左右外边距设置为auto(自动的) */
				/* margin:10px auto 0; */
			}
			.box2{
				margin-top: 120px;
				width:300px;
				height:300px;
				background-color: skyblue;
			}
			/* 外边距问题1:相邻块级元素垂直外边距合并.
			解决:一般只给其中一个盒子设置外边距.
			 外边距问题2：嵌套块级盒子之间外边距的塌陷。
			 解决方法1:给父盒子添加边框；
			 解决方法2：给父盒子添加内边距，但是会导致父盒子被撑大。
			 解决方法3：给父盒子添加样式overflow:hidden; 使用最多的解决方法 
			 */
			.bigbox{
				width:600px;
				height:600px;
				background-color: red;
				margin-top: 100px;
				/* border: 1px solid black; */
				/* padding-top: 100px; */
				overflow: hidden;		/* 超出部分隐藏,能解决外边距塌陷问题 */
			}
			.smallbox{
				width: 300px;
				height: 300px;
				background-color: green;
				/* margin-top: 100px; */
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="bigbox">
			<div class="smallbox"></div>
		</div>
	</body>
</html>