聊一聊标准盒模型和怪异盒模型的区别

最新推荐文章于 2023-10-22 03:49:23 发布

JohnKuo888

最新推荐文章于 2023-10-22 03:49:23 发布

阅读量456

点赞数

文章标签： css3 html5

本文链接：https://blog.youkuaiyun.com/u012197150/article/details/104463247

版权

本文深入解析标准盒模型与怪异盒模型的区别，通过实例演示两者在元素尺寸计算上的差异，帮助前端初学者理解并掌握盒模型的运用。

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

作为前端工作者，想必对于盒模型这个概念应该并不陌生，我们在平日的工作中无时无刻不在使用它，但是作为刚刚踏入这个行业的小白来讲，对于标准盒模型和怪异盒模型的理解或许还是傻傻分不清，这里小编我就来跟大家聊一聊关于我理解中的盒模型的那些事儿~希望对刚刚踏入这个行业的小伙伴们有所帮助！！！废话不多说，我们走起！！！！

首先我们要了解一下什么是盒模型？下面甩出盒模型的解释！！

通俗的讲，盒模型是css布局的基础。
它的作用是规定了网页元素在网页上如何显示以及元素之间的相互关系。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
即都包含内容区、补白（填充）、边框、边界(外边距)。

上图很明白的就可以看出来，盒模型由以下几部分组成：

内容区(content):元素的宽和高
补白（填充）(padding)：元素内容和外边缘之间的空间
边框(border)：盒子的外边缘
边界(外边距)(margin)：盒子外边缘以外的空间

这其实就是一个标准的盒模型。

那么接下来，我们再来看看什么是怪异盒模型吧。下图所示：

可以明显的看出，怪异盒模型的组成部分则只划分为了两个部分，分别为：

width/height(元素的内容宽或高)：内容区(content)、补白（填充）(padding)以及边框(border)的总和
边界(外边距)(margin)：盒子外边缘以外的空间

不难看出，怪异盒模型的一个构成形式为元素的宽高包含了填充以及边框所占有的空间，也就是说当我们页面元素为怪异盒模型的时候，给予元素padding或者border属性之后并不会改变元素原有宽高的值，而如果我们给标准盒模型的元素添加padding或者border属性之后，元素最终的宽高值会发生变化，盒子会变大，这也就是标准盒模型与怪异盒模型区别所在。（下面通过案例以及图片给与对比加深理解）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box{
				width:300px;
				height:300px;
				background:#f00;
				border:10px solid #000;
				padding:20px; 
                box-sizing: border-box;/* 转换成怪异盒模型 该属性下面有说明*/
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>

标准盒模型的呈现形式为：

图片上可以看到，div的值由原始的300加上padding和border的值最后变为了360x360

怪异盒模型的呈现形式为：

可以看到，加上padding和border值之后，div的宽度和高度依旧为300x300不变，填充以及边框属性值都包含在了元素的体内。

相信看到这里，大家应该能够理解他们的不同之处了吧？

PS : 我们可以通过CSS3属性进行盒模型之间的转换操作，下面是它的一个属性设置：

border-sizing: border-box/* 表示怪异盒模型 */
border-sizing: content-box/* 表示标准盒模型 */

通过设置该属性，我们可以转换元素的盒模型进行自己想要的效果呈现，当然我们常用的一些元素中也有自带怪异盒模型属性的，例如我们大家熟知的页面提交按钮，还有表格table，其实他们都是属于怪异盒模型的，所以在以后的工作中，应该明白为什么明明设置了填充，元素高度依旧不够的缘故了吧？

结束语-------------------分享知识从我做起，大家一起高飞猛进！