css中的box-sizing

CSS Box-Sizing详解

最新推荐文章于 2025-08-14 17:29:17 发布

原创最新推荐文章于 2025-08-14 17:29:17 发布 · 178 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 css box-sizing

前端同时被 2 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

本文详细解析了CSS中box-sizing属性的三种值：content-box、border-box和padding-box，通过实例说明了它们如何影响元素的宽度计算，并展示了在Chrome浏览器中的具体表现。

box-sizing:该属性有三个值,一个是content-box(default);一个是border-box,一个是padding-box

content-box:border和padding不计算入width(也就是width为100,border和padding分别为1和2,那么盒子总宽度是width+padding+border)

border-box:border和padding是计算到width里面,也就是说设置width为100,在设置border和padding分别为1和2,实际内容区域宽度是100-1-2

padding-box:border不计入width,但是padding是计算在width内

ps:不同浏览器效果不同....

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主要是用来学习box-sizing的例子</title>
		<style type="text/css">
			/* box-sizing:该属性有三个值,一个是content-box(default);一个是border-box,一个是padding-box */
			/* content-box:border和padding不计算入width(也就是width为100,border和padding分别为1和2,那么盒子总宽度是width+padding+border) */
			/* border-box:border和padding是计算到width里面,也就是说设置width为100,在设置border和padding分别为1和2,实际内容区域宽度是100-1-2 */
			/* padding-box:border不计入width,但是padding是计算在width内 */
			.content-box {
				box-sizing: content-box;
				-moz-box-sizing: content-box;
				width: 100px;
				height: 100px;
				padding: 20px;
				border: 5px solid #E6A43F;
				background: blue;
			}

			.padding-box {
				box-sizing: padding-box;
				margin-top: 10px;
				-moz-box-sizing: padding-box;
				width: 100px;
				height: 100px;
				padding: 20px;
				border: 5px solid #E6A43F;
				background: red;
			}

			.border-box {
				box-sizing: border-box;
				margin-top: 10px;
				-moz-box-sizing: border-box;
				width: 100px;
				height: 100px;
				padding: 20px;
				border: 5px solid #E6A43F;
				background: yellow;
			}
		</style>
	</head>
	<body>
		<div class="content-box">
			
		</div>
		<div class="padding-box">
			
		</div>
		<div class="border-box">
			
		</div>
	</body>
</html>

下面是在chrome浏览器中的效果