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

最新推荐文章于 2023-07-21 16:19:37 发布

Wendy Bryant

最新推荐文章于 2023-07-21 16:19:37 发布

阅读量189

点赞数 1

分类专栏： css 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/WenDy18cm/article/details/113272368

版权

css 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

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

标准盒子模型:

当元素设置宽高后,再给元素设置padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content区域手动减去padding和border撑开的大小

怪异盒子模型(内减模式):

当元素设置宽高后,再给元素设置padding和border后,元素的尺寸不会变大,会自动从content区域减去padding和border撑开的大小,盒子的尺寸不变

注意: 使用怪异盒子模型时,必须设置固定的宽高才能实现内减模式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			 标准盒子模型: content+padding+border+margin 当元素设置宽高后,再给元素设置
			 padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content
			 区域手动减去padding和border撑开的大小
			 怪异盒子模型(内减模式):content+padding+border+margin 当元素设置宽高后,
			 再给元素设置
			 padding和border后,元素的尺寸不会变大,会自动从content区域减去padding和borde
			 r撑开的大小,盒子的尺寸不变
			 注意: 使用怪异盒子模型时,必须设置固定的宽高才能实现内减模式
			 */
			.one{
				width: 200px;
				height: 200px;
				background-color: pink;
				padding: 10px;
				border: 10px solid red;
				/* 标准盒子模型 (默认值) */
				box-sizing: content-box;
			}
			.two{
				width: 200px;
				height: 200px;
				background-color: pink;
				padding: 10px;
				border: 10px solid red;
				margin-top: 10px ;
				/* 怪异盒子模型 */
				box-sizing: border-box;
			}
			.three{
				float:left;
				background: blue;
				padding: 10px;
				margin-top: 10px ;
				border: 10px solid red;
				box-sizing: border-box;
			}
			.box{
				
				width: 200px;
				height: 200px;
				
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
		<div class="three">
			<div class="box"></div>
		</div>
	</body>
</html>

可以看到，此时设置了200px * 200px的标准盒子模型.one盒子大小为240px * 240px，因为算上了边框和内边距的宽度

可以看到，此时设置了200px * 200px的怪异盒子模型.two盒子大小为200px * 200px，当给元素设置padding和border后，content区域会变小，此时content区域大小为160px * 160px，盒子整体的大小不变。

Wendy Bryant

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
标准盒子模型和怪异盒子模型

标准盒子模型和怪异盒子模型标准盒子模型: 当元素设置宽高后,再给元素设置padding和border后,元素的尺寸会变大,如果不希望元素的尺寸变大,要相应从content区域手动减去padding和border撑开的大小怪异盒子模型(内减模式): 当元素设置宽高后,再给元素设置padding和border后,元素的尺寸不会变大,会自动从content区域减去padding和border撑开的大小,盒子的尺寸不变注意: 使用怪异盒子模型时,必须设置固定的宽高才...
复制链接

扫一扫