CSS3 盒子模型(box-sizing: border-box(内减模式))

最新推荐文章于 2024-08-29 11:23:00 发布

houyanhua1

最新推荐文章于 2024-08-29 11:23:00 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/houyanhua1/article/details/79642002

版权

CSS 同时被 3 个专栏收录

65 篇文章 1 订阅

订阅专栏

HTML5

54 篇文章 1 订阅

订阅专栏

CSS3

33 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		div {
			width: 200px;
			height: 200px;
			background-color: red;
			margin-top:20px;
		}

		.box2,.box3 {
			border: 25px solid blue;
			padding: 30px;
		}

		/* CSS3的盒子模型 box-sizing:
			content-box: 盒子大小(宽高)不包括padding和border (默认的和CSS2一样)
			padding-box: 盒子大小(宽高)包括padding 不包括border
			border-box:  盒子大小(宽高)包括padding和border
		*/
		.box2 {
			box-sizing: content-box;   /* 外加模式,添加padding和border盒子会变大 */
			box-sizing: border-box;   /* 内减模式,添加padding和border盒子可放内容会变小 */
		}

	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>