2020/11/23外边距的应用

最新推荐文章于 2022-02-11 11:10:56 发布

九千七@

最新推荐文章于 2022-02-11 11:10:56 发布

阅读量146

点赞数

分类专栏：课堂笔记文章标签： html

本文链接：https://blog.csdn.net/qq_44359844/article/details/109990386

版权

本文详细探讨了HTML中的盒子模型，特别是外边距的使用技巧和实战应用，包括如何通过外边距调整元素间距，实现布局优化。

摘要由CSDN通过智能技术生成

盒子的模型、

外边距：

		<style>
			.box{
				width: 200px;
				height: 200px;
				border: 10px red solid;
				margin: 10px 5px 20px 30px;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>```
外边距的应用：
<title>margin的应用</title>
		<style>
			 /*1.初始化网页元素:网页中所有元素的内外边框都为0*/
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 200px;
				border: 2px solid green;
				/*2.盒子水平居中:左右外边距设置为auto.前提提交:有width.*//*可以给他左右自动*/
				/*margin: 0 auto;*/
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
盒子的塌陷问题：
<title>盒子合并与塌陷</title>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
		/*1.给相邻两个盒子都设置margin,垂直方向外边距取两者最大值;
		2.塌陷:套的两个盒子都设置了margin,垂直方法的外边框取最大值;