怪异模式主要表现在IE内核的浏览器。
当不对doctype进行定义时，会触发怪异模式。
在标准模式下(box-sizing:content-box;)，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式下(box-sizing:border-box;)，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怪异盒模型</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#test1{
box-sizing:border-box;
/*怪异盒模型
width（100px）=内容宽度+padding+border
实际容器所占区域宽度 = width（100px）+ margin
*/
width: 100px;
height:100px;
margin: 10px;
background-color: red;
}
#test2{
box-sizing:content-box;
/*标准盒模型
width（100px） = 内容宽度
实际容器所占区域宽度 = width（100px）+ margin + padding + border
*/
width: 100px;
height:100px;
margin: 10px;
padding: 10px;
border: 10px solid black;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
var test1 = document.getElementById("test1");
console.log(test1.offsetWidth);
var test2 = document.getElementById("test2");
console.log(test2.offsetWidth);
}
</script>
</head>
<body>
<div id="test1">怪异盒模型</div>
<div id="test2">标准盒模型</div>
</body>
</html>两个div的width都设置为100px，但效果不同
