box-sizing:content-box与border-box的用法教程

来源：网络文章列表 2018-12-20 8

css3的box-sizing属性下的盒模型分析

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式：

content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型
border-box：怪异盒模型，低版本IE浏览器中的盒模型

现代浏览器和IE9+默认值是content-box。

box-sizing 语法格式：

box-sizing：content-box;
或
box-sizing：border-box;

content-box 和 border-box 的区别：

content-box：padding 和 border 不被包含在定义的 width 和 height 之内。盒子的实际宽度=设置的width+padding+border
border-box：padding 和 border 被包含在定义的 width 和 height 之内。盒子的实际宽度=设置的 width（padding和border 不会影响实际宽度）

我们新建一个HTML页面来详细解释

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
	div{
	 height:200px;
	 width:200px;                
	 margin:50px;
	 border:20px solid black;
	 padding:20px;
	} 
	.div1{
	  background:green;
	  float: left;
	  box-sizing:content-box;
	} 

	.div2{
	  background: pink;
	  float: left;
	  box-sizing:border-box;  
	}
  </style>
</head>
<body>
	<div class="div1">
		div1
	</div>
	<div class="div2">
		div2
	</div>
</body>
</html>

得到如下效果：