2021-03-11

最新推荐文章于 2024-10-18 19:19:52 发布

北路有点堵车*

最新推荐文章于 2024-10-18 19:19:52 发布

阅读量108

点赞数

分类专栏：学习笔记笔记文章标签： html

本文链接：https://blog.csdn.net/d13368568386/article/details/114670474

版权

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

笔记

19 篇文章 0 订阅

订阅专栏

盒子二

background-color;背景颜色
盒子：
内容区（cintent）
边框（border）
内边框（padding）
外边距（margin）
right:右
left:左
top：上
bottom：下
auto:自动
外边距合并：相邻两个盒子之间同时设置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:500px;*/
				/*margin-left:200px;*/
				/*给左右外边距设置auto(自动)，盒子水平居中显示*/
				margin:10px auto;
				overflow:hidden;	
			}
			.box1{
				width:200px;
				height:100px;
				border:solid 5px deeppink;
				padding:50px;
				background-color:skyblue;
				margin:50px auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
		<div class="box1">第二个盒子<div>
		</div>
	</body>
</html>