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

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

标准盒子模型:

        当元素设置宽高后,再给元素设置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,盒子整体的大小不变。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页