简单聊一聊标准和模型和怪异盒模型的高度计算

什么是盒模型

CSS的盒模型是CSS技术所使用的一种思维模式，CSS里面可以形象的把所有的HTML标签当成一个矩形的盒子，类似现实生活中各种盒子。
盒模型又分为标准盒模型和怪异盒模型

标准盒模型

在标准盒子模型下，计算一个容器的总高度

 内容区 content 
 +
 填充补白（里面的）  padding   
 +
 边框 border
 + 
外边距 （margin）   

 如果是计算的自己：
   设置的height+padding+border
   
 如果计算的是父元素的   
   子元素设置的height+子元素设置padding+子元素设置border+子元素设置margin

如下所示：

<style>
		.box {border: 10px solid blue;
			width: 300px;
			height: 300px;
			background: red;
		}
		.box div {
			width: 100px;
			height: 100px;
			background: #000;
			color: #fff;
			border: 10px solid #999;
			margin-top: 10px;
			margin-left: 10px;
		}
	</style>
	<div class="box">
	       <div>  </div>
	     </div>

div盒子的高度包括margin border 和 height / width
也就是 10 + 10 +100 = 120

怪异盒模型也叫IE盒子模型

在怪异盒子模型下，计算一个容器的总高度

 如果未设置高度：
  内容区域 +  margin外边距

已知高度：
  height / width

还是以上面的为例子，给.box div 添加 box-sizing: border-box;：

	<style>
		.box {
			border: 10px solid blue;
			width: 300px;
			height: 300px;
			background: red;
		}
		.box div {
			width: 100px;
			height: 100px;
			background: #000;
			color: #fff;
			border: 10px solid #999;
			margin-top: 10px;
			margin-left: 10px;
			box-sizing: border-box;
		}
	</style>
	<div class="box">
	       <div>  </div>
	     </div>

这时候高度计算方式就不是标准盒模型计算高度方式了,而是直接给的height / width

触发条件：

 1、给元素添加CSS3属性   box-sizing：border-box；
 CSS3属性的兼容都到IE9+，部分兼容到IE10+
 所以如果用CSS3新属性，就不要考虑低版本浏览器了
 触发容器为怪异盒子模型之后，再给元素添加border或者padding就不会把盒子撑大，也不需要去做减法了。
        
2、文档结构的doctype不写，
这个是在IE8  IE7  IE6 IE5等低版本上有，
测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。