CSS 盒子模型（标准盒模型和怪异盒模型）

最新推荐文章于 2025-05-14 09:57:15 发布

容景

最新推荐文章于 2025-05-14 09:57:15 发布

阅读量417

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css html

本文链接：https://blog.youkuaiyun.com/ySFRaabbcc/article/details/109698491

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了HTML盒子模型，包括内容、内边距、边框和外边距的概念。讨论了标准盒模型与怪异盒模型的区别，其中标准模型中width和height不包含padding和border，而怪异模型则包含。通过实例展示了两种模型下元素的实际尺寸计算，并提供了相应的CSS代码示例。理解盒子模型对于网页布局至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子模型介绍

所谓盒子模型（Box Model）就是把 HTML 页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。

所有的文档元素（标签）都会生成一个矩形框，我们称为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

标准的 W3C 盒子模型和 IE 盒子模型。

标准盒模型中 width 指的是内容区域 content 的宽度；height 指的是内容区域 content 的高度，即padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽度等于设置的 width 值和 border、padding 之和，即 ( Element width = width + border + padding )，设置元素的 box-sizing：content-box，即可设为标准盒模型，这也是默认盒模型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标准盒子模型</title>
	</head>
	<style type="text/css">
		.content_box{
			width: 100px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 10px solid red;
		}
	</style>
	<body>
		<div class="content_box">这里是标准盒模型</div>
	</body>
</html>

效果：

元素的实际宽度 = 内容 + 内边距 + 边框 = 100 + 20 + 20 = 140

元素的实际高度 = 内容 + 内边距 + 边框 = 100 + 20 + 20 = 140

怪异盒模型中的 width 指的是内容、边框、内边距总的宽度（content + border + padding）；height 指的是内容、边框、内边距总的高度，即 padding 和 border 被包含在定义的 width 和 height 之内。对象的实际宽度就等于设置的 width 值，即使定义有border 和 padding也不会改变对象的实际宽度，即 ( Element width = width )，设置该元素的 box-sizing：border-box，即可设为怪异盒子模型。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>怪异盒子模型</title>
	</head>
	<style type="text/css">
		.border_box{
			width: 100px;
			height: 100px;
			box-sizing: border-box;
			margin: 10px;
			padding: 10px;
			border: 10px solid red;
		}
	</style>
	<body>
		<div class="border_box">这里是怪异盒模型</div>
	</body>
</html>

效果：

元素实际宽度和实际高度始终是一开始所设置的宽高，定义了 border 和 padding 也不会改变元素的实际宽高。

标准盒模型和怪异盒模型在一起的效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>盒子模型</title>
	</head>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 10px solid red;
		}
		.border_box{
			box-sizing: border-box;
		}
	</style>
	<body>
		<div>这里是标准盒模型</div>
		<div class="border_box">这里是怪异盒模型</div>
	</body>
</html>