什么是盒模型

最新推荐文章于 2020-06-07 15:41:43 发布

qq_43233759

最新推荐文章于 2020-06-07 15:41:43 发布

阅读量190

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/qq_43233759/article/details/104460284

版权

什么是盒模型

盒模型是CSS布局的基石，它规定了网页元素间以及元素与内容中间位置关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。在这里，我们用一个div元素简单展示一下，代码如下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>什么是盒模型？</title>
		<style type="text/css">
			.box{
				width: 200px;
				height: 200px;
				border: #0B0B0B 10px solid;			
				background-color: #ff0;
			}
		</style>
	</head>
	<body>
		<div class="box">
			这是一个测试用的元素块！
            逆战班，与你同行！
		</div>
	</body>
</html>

代码的逻辑是设置一个宽高皆为200px的div，并设置10px的边框，效果如图。
在这里插入图片描述
我们将元素块及元素块所占的平面区域称为盒模型。
但真的就这么简单吗？

盒模型的组成

我们打开调试页面（F12），可以找到这样一张图。
在这里插入图片描述
通过图片，我们可以知道，元素块所占的平面区域除了我们看到的内容（content）、边框（border），还包括补白（padding）、外边距（margin），这才是盒模型的正确组成。
所以，盒模型由内容（content）、补白（padding）、边框（border）、外边距（margin）这四部分组成。
下面，我们简述一下这四部分的具体作用。

1、内容（content）：盒模型的核心区域，包含我们想要展示的内容，可以是文字图片等等。
2、边框（border）：盒子的边缘。
3、补白（padding）：边框和内容之间的空隙，用来调整内容在元素中、子元素在父元素中的位置。
在这里插入图片描述
这里padding要注意一个问题。
在不计算边框的情况下，我们代码设置的元素宽高是200px，但是，添加padding:40px之后,变成了280px*280px，元素被撑大了，如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding。
在这里插入图片描述
可能这么说有些抽象，这里我们举一个快递盒子的例子来验证一下。
盒子的内容区就是我们想要快递的模型所占的空间，边框就是我们的快递盒子，我们装完，盒子呈现的大小就是模型所占的空间大小，后来我们怕磕磕碰碰，得给他包上一层填充物，这就是我们的补白（padding）区域，这样一来我们的盒子不仅要装模型，还得装填充物，但是我们的模型所占的空间不能减小啊，所以我们的CSS就自动给我们换了一个更大的盒子。
所以，如果我们想让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding，即改变内容区的大小。
4、外边距（margin）：在元素边框以外的空白区，控制同辈元素之间的位置关系。
在这里插入图片描述
这里我们可以看到不加margin之前两个元素相连在一起，没有一点空隙。现在我们给第一个元素加上margin:30px;就会产生以下效果。

粉色区域就是margin:30px;代表的区域。

qq_43233759

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
什么是盒模型

什么是盒模型盒模型是CSS布局的基石，它规定了网页元素间以及元素与内容中间位置关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。在这里，我们用一个div元素简单展示一下，代码如下。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>什么是盒模...
复制链接

扫一扫