对怪异盒模型的介绍
怪异模式主要表现在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，但效果不同
