彻底搞懂标准盒模型和怪异盒模型

Posted 五花肉三七分

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了彻底搞懂标准盒模型和怪异盒模型相关的知识,希望对你有一定的参考价值。

一:标准盒模型:box-sizing:content-box;

1:首先强调一点:这个盒子真正的的大小是由文本区域content内边距padding和边框border组成。

但在标准盒模型的代码中的with和height是只指向content的大小不包含padding和border的。我们在代码中写的:

  width: 100px;

  height: 100px;

实际上可以理解为content的宽高,而标准盒模型代码中的with和height是不包含padding和border的。所以写出来真正这个盒子的大小变成了width:100px + 两个padding:10px +两个border:10px最终盒子大小变成如下图所示,盒子宽高都为140px。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>标准盒子模型</title>
	</head>
	<style type="text/css">
		.content_box
			width: 100px;
			height: 100px;
			margin: 10px;
			padding: 10px;
			border: 10px solid red;
		
	</style>
	<body>
		<div class="content_box">这里是标准盒模型</div>
	</body>
</html>

 

这时你要是更改了padding或border等,那么整个盒子的大小就会被改变。那么当你想在固定一个盒子大小不变又想改变padding和border大小的话,就需要用到怪异盒模型。


二:怪异盒模型:box-sizing:border-box;

怪异盒模型的with和height都包含content,padding,border。我们在代码中写的:

  width: 100px;

  height: 100px;

实际上可以理解为指的就是真正盒子的宽高,这个时候我们去设置padding和border的大小时:盒子是固定的100px宽高不会变,content文本区域会随着设置的padding和border的变化而变化。怪异盒模型是固定盒子大小的一种方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>怪异盒子模型</title>
	</head>
	<style type="text/css">
		.border_box
			width: 100px;
			height: 100px;
			box-sizing: border-box;
			margin: 10px;
			padding: 10px;
			border: 10px solid red;
		
	</style>
	<body>
		<div class="border_box">这里是怪异盒模型</div>
	</body>
</html>


总结:

标准盒模型更改padding或border等会改变原本盒子大小。

怪异盒模型基本就是固定了盒子的大小。

具体使用看你应用场景而论。

 

以上是关于彻底搞懂标准盒模型和怪异盒模型的主要内容,如果未能解决你的问题,请参考以下文章

彻底搞懂标准盒模型和怪异盒模型

标准盒模型和怪异(IE)盒模型

css怪异盒模型样式

标准盒模型和怪异盒模型的差异

标准盒模型和怪异盒模型

对标准怪异盒模型的认识