盒模型的理解

最新推荐文章于 2021-09-08 19:45:56 发布

加油，铁子！

最新推荐文章于 2021-09-08 19:45:56 发布

阅读量58

点赞数 1

分类专栏： web前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119203690

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

当上下两个元素设置margin-bottom和margin-top时

小练习:设置奥运五环效果

盒模型

Windows：在游览器中按f12或右击检查

margin(外边距) - 清除边框外的区域，外边距是透明的
border(边框) - 围绕在内边距和内容外的边框。
padding(内边距) - 清除内容周围的区域，内边距是透明的。
content(中间内容) - 盒子的内容，显示文本和图像。

border

(边框)

border的设置

<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: aqua;
				/* 设置边框
				 solid 实线
				 dashed 虚线
				 */
				/* border: 5px #00FFFF solid; */
				/* 四个方向的边框可以分别设置 */
				/* border-left、border-right、border-top、border-bottom */
				/* border-left: 5px #00FFFF solid; */
				
				/* 边框的样式也可以单独设置 */
				border-left-color: #0000FF;
				border-left-width: 5px;
				border-left-style: solid;
			}
		</style>

padding

(内边距)

padding的设置

<style type="text/css">
			div{
				width: 100px;
				height: 30px;
				background-color: antiquewhite;
				/* 设置四个方向*/
				padding: 20px;
				/* 分别设置padding的上右下左*/
				padding-top: 100px;
				padding-right: 60px;
				padding-bottom: 50px;
				padding-left: 40px;
				/* 设置上下内边距为20px，左右边距为40px */
				padding: 20px 40px;
				/* 或者直接设置四个方位，四个数分别对应上右下左,从上开始，顺时针设置*/
				padding: 10px 20px 30px 40px;
				/* 正常盒模型：设置padding和border会让元素变大 */
				/* IE盒模型：设置padding和border不会让元素变大，会压缩内容区域*/
				border: 100px solid aqua;
			}
		</style>

正常盒模型与IE盒模型的区别?

正常盒模型:设置padding和border会让元素变大

IE盒模型:设置padding和border不会让元素变大,会压缩内容区域

创造IE盒模型

/* 创造IE盒模型 */
				box-sizing: border-box;

margin

(外边距)

margin的设置

<style type="text/css">
			div{
				width: 100px;
				height: 30px;
				background-color: antiquewhite;
				/* 四个方向的外边距 */
				margin: 100px;
				/* 第一个值是上下，第二个是左右*/
				margin: 100px 200px;
				/* 从上开始顺时针设置 */
				margin: 10px 20px 30px 40px;
				/* 分方向设置 */
				margin-top: 10px;
				margin-right: 20px;
				margin-bottom: 30px;
				margin-left: 40px;
			}
		</style>

当上下两个元素设置margin-bottom和margin-top时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				
			}
		</style>
	</head>
	<body>
		<!-- 上下两个元素同时设置margin-bottom和margin-top
		会发生叠压 取最大值 -->
		<div style="margin-bottom: 100px;background-color: #FF0000;">one</div>
		<div style="margin-top: 80px; background-color: #FFFF00;">two</div>
	</body>
</html>

margin的传递问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#out{
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
				
			}
			#in{
				width: 100px;
				height: 100px;
				background-color: #ffff7f;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 第一个子元素的margin-top会传递给子元素 -->
		<div id="out">
			<div id="in"></div>
		</div>
	</body>
</html>

解决方法:

1.给父级设置border

/* 第一种方法 */
				border: 1px solid #FF0000;

2.overflow

子元素超出父元素被隐藏

overflow: hidden;

小练习:设置奥运五环效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				border: 20px solid blue;
				/* border-radius: 120px 120px 120px 120px;*/
				border-radius: 50%;
			}
			#black{
				border-color: black;
				margin-top: -240px;
				margin-left: 260px;
			}
			#red{
				border-color: red;
				margin-top: -240px;
				margin-left: 520px;
			}
			#yellow{
				border-color: yellow;
				margin-top: -120px;
				margin-left: 140px;
			}
			#green{
				border-color: green;
				margin-top: -240px;
				margin-left: 400px;
			}
		</style>
	</head>
	<body>
		<div></div>
		<div id="black"></div>
		<div id="red"></div>
		<div id="yellow"></div>
		<div id="green"></div>
	</body>
</html>

加油，铁子！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
盒模型的理解

Windows：在游览器中按f12或右击检查margin(外边距)- 清除边框外的区域，外边距是透明的 border(边框)- 围绕在内边距和内容外的边框。 padding(内边距)- 清除内容周围的区域，内边距是透明的。 content(中间内容)- 盒子的内容，显示文本和图像。border<style type="text/css"> div{ width: 100px; height: 100px; background-colo...
复制链接

扫一扫

专栏目录