CSS标准盒模型与怪异盒模型：padding、border不为零时，相同width的input与button不等宽

本文链接：https://blog.csdn.net/shenjie_xsj/article/details/123746106

现象

在padding和border不为零时，同width的input与button显示宽度不一致。尝试将如下代码在浏览器中显示出来：

<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	div {
		width: 100px;
		border: 1px solid red;
	}

	.elem {
		/* 
			input和button均采用本类选择器类的样式： 
			1. 同样的padding
			2. 同样的border
			3. 同样的width
		*/
		padding: 10px;
		border: 2px solid royalblue;
		width: 100%;
	}
</style>

<body>
	<div>
		<input type="text" class="elem" placeholder="文本框" />
		<br>
		<button class="elem">按钮</button>
	</div>
</body>

</html>

如图，在相同的padding、border下，将input和button都设置为100%时，input和button的渲染宽度不一样（input会超出div的宽度）：
在这里插入图片描述

原因

因为两者的盒模型不同：

其中：input默认使用标准盒模型

设置的width是内容的宽度，增加padding和border会使得渲染出来的input占用的实际宽度变大。
如图：
在这里插入图片描述

其中：button默认使用怪异盒模型

设置的width是左右边框相距的宽度，增大padding和border会挤压内容的宽度。
如图：
在这里插入图片描述

解决办法

将两者的盒模型改成相同的模式，

要么就将input改为怪异盒模型，即给input增加CSS样式：

box-sizing: border-box;

要么就将button改为标准盒模型，即给button增加CSS样式：

box-sizing: content-box;

统一为标准盒模型

设置相同的如下CSS样式，实际渲染出来两者一样长（但是超出了div）：

.elem {
		/* 
			input和button均采用本类选择器类的样式： 
			1. 同样的padding
			2. 同样的border
			3. 同样的width
			4. 都改为标准盒模型
		*/
		padding: 10px;
		border: 2px solid royalblue;
		width: 100%;
		box-sizing: content-box;
	}

在这里插入图片描述

统一为怪异盒模型：

设置相同的如下CSS样式，实际渲染出来两者一样长（但是都未超出div）：

.elem {
		/* 
			input和button均采用本类选择器类的样式： 
			1. 同样的padding
			2. 同样的border
			3. 同样的width
			4. 都改为怪异盒模型
		*/
		padding: 10px;
		border: 2px solid royalblue;
		width: 100%;
		box-sizing: border-box;
	}

在这里插入图片描述

还有一个不是办法的办法

将左右padding和左右border都设置为0

.elem {
		/* 
			input和button均采用本类选择器类的样式： 
			1. padding清除
			2. 左右border清除
			3. 同样的width
		*/
		padding: 0px;
		border-left: 0px;
		border-right: 0px;
		border-bottom: 1px solid royalblue;
		width: 100%;
	}