标准盒子模型和怪异盒子模型

标准盒子模型和怪异盒子模型一、概念二、计算方法三、默认盒模型四、盒模型转换五、演示代码六、总结今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。一、概念标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；②怪异盒模型也称为IE盒模型，是IE浏览器设计元

万物之恋

14765人浏览 · 2021-10-08 10:09:07

万物之恋 · 2021-10-08 10:09:07 发布

标准盒子模型和怪异盒子模型

今天来为简单介绍一个在HTML+CSS中的一个重要概念：标准盒子模型和怪异盒子模型。

一、概念

标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；
②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。

二、计算方法

标准盒子模型的内容计算：content=width*height，
盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
总宽度等于所有附加值，偏移值的总和；
怪异盒子模型的内容计算：content=width*height+padding+border
盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；

三、默认盒模型

在编辑html文档时，只要在顶部声明了DOCTYPE，默认都会使用标准盒子模型。如果没有进行声明，则会根据浏览器类型自行调整；

四、盒模型转换

在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。
box-sizing:content-box; 盒模型设置为w3c标准盒子模型
box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型

五、演示代码

首先在页面中设置两个具有固定宽高的div盒子，将他们分别设置为标准盒子模型和怪异盒子模型。

	<style type="text/css">
			body {
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			div {
				width: 300px;
				height: 300px;
				line-height: 300px;
				text-align: center;
				margin-right: 10px;
				font-size: 30px;
			}

			.box1 {
				box-sizing: content-box;
				background-color: #FF0000;
			}

			.box2 {
				box-sizing: border-box;
				background-color: #CD5C5C;
			}
		</style>
	</head>
	<body>
		<div class="box1">标准盒子模型</div>

		<div class="box2">怪异盒子模型</div>
	</body>

效果如图
效果一
给box1设定padding值

padding: 50px 50px;

得到以下结果
效果二·
很明显大小发生了改变，利用f12检查发现，盒子不仅保存了原有内容的大小，还根据padding值进行了相应的放大。
效果图3

再为box2添加同样的属性

padding: 50px 50px;

效果图4
再使用f12检查
效果图四
可以看到，盒子的大小不仅没有增加，原本的内容区域还根据padding值相应的进行了缩小。

六、总结

使用标准盒子模型时，盒子的宽高不会因为第一次的设定而持久不变，还可以通过padding值的设定来进行二次放大；
使用怪异盒子模型时，宽高在第一次设定时就已经固定，不会因为后期padding值的设定而放大，只会相对应的调整内容的位置。
在实际开发中，怪异盒子模型能够在不影响基础布局的情况下，调整内容的位置，大小，是一个很值得一用的属性。
这里是万物之恋，我们下次再见了！