关于盒模型1_盒子模型四个值时什么-CSDN博客

本文链接：https://blog.csdn.net/weixin_41909719/article/details/111239063

1、什么是盒模型以及html文件

盒模型

html文件是由一个个的html标签(元素)组成
盒模型：把每一个html元素想象成一个盒子

盒模型的结构

content(内容):用来显示内容
padding(内边距):内容与边框之间的距离
border(边框):元素的边框
margin(外边距):元素与元素之间的距离(兄弟关系，父子关系)
盒子的宽=width + 左右padding + 左右border + 左右margin
盒子的高=height + 上下padding + 上下boder + 上下margin

2、margin和padding的写法

1.合写 (以margin为例，padding同理)

一个值：代表上下左右 margin都是20px；margin：20px；上下左右
两个值：第一个值代表上下margin，第二个值代表左右margin；margin：20px 15px
三个值：第一个值表示上，第二个值表示左右，第三个值表示下；margin：20px 15px 10px;
四个值：分别代表上右下左（顺时针记）margin：20px 15px 10px 5px

2.分开写 (以margin为例，padding同理)

上margin: margin-top：20px; 距离上边界20px;
下margin: margin-bottom: 20px; 距离下边界20像素;
左margin: margin-left: 20px; 距离左边界20像素;
右margin: margin-right: 20px; 距离右边界20像素；

3、margin的坑点

相邻兄弟的元素在竖直方向上margin会出现融合。

融合的标准：以较大的为准

解决办法：

尽量只给一个元素设置竖直margin
给两个元素的任意一个元素设置display:inline-block;

父子关系的元素在竖直方向上margin会出现传递现象;

解决办法：

给父级加一个边框
给父级加display:inline-block;
给父级添加overflow:hidden;(溢出隐藏)
用父级的padding代替子集的margin。

4、盒模型练习之margin写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型6层练习</title>
		<style type="text/css">
			/* *{
				margin: 0;
				padding: 0;
			} */
			
			#div1{
				width: 590px;
				height: 590px;
				border: 5px dashed #000;
				margin: auto;
				margin-top: 50px;
			}
			
			#div2{
				width: 490px;
				height: 490px;
				border: 5px solid lightblue;
				margin: 45px;
			}
			
			#div3{
				width: 400px;
				height: 400px;
				background-color: purple;
				margin: 45px;
				overflow: hidden;
			}
			
			#div4{
				width: 300px;
				height: 300px;
				border: 5px dashed white;
				margin: 45px;
			}
			#div5{
				width: 200px;
				height: 200px;
				border: 5px dashed white;
				margin: 45px;
			}
			
			#div6{
				width: 100px;
				height: 100px;
				border: 5px solid yellow;
				margin: 45px;
				background-color: greenyellow;
			}
		</style>
	</head>
	
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					<div id="div4">
						<div id="div5">
							<div id="div6"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

5、盒模型练习之padding写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型之padding的用法</title>
		<style type="text/css">
			#div6{
				width: 100px;
				height: 100px;
				border: 5px solid yellow;
				background-color: greenyellow;
			}
			
			#div5{
				width: 110px;
				height: 110px;
				border: 5px dashed #000;
				padding: 45px;
			}
			#div4{
				width: 210px;
				width: 210px;
				border: 5px dashed #000;
				padding: 45px;
			}
			
			#div3{
				width: 310px;
				height: 310px;
				padding: 45px;
				background-color: purple;
			}
			#div2{
				width: 400px;
				height: 400px;
				border: 5px  solid royalblue;
				background-color: lightgrey;
				padding: 45px;
			}
			#div1{
				width: 500px;
				height: 500px;
				border: 5px dashed black;
				padding: 45px;
				margin: auto;
				margin-top: 50px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">
					<div id="div4">
						<div id="div5">
							<div id="div6"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>