一、怪异盒模型代码
怪异盒模型指的是IE浏览器所采用的盒模型。在怪异盒模型下，元素的宽度和高度坐标包括了元素的边框和内边距，而不是只包括元素的内容。
怪异盒模型的代码示例如下：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
}
这段代码定义了一个宽度为200像素、高度为100像素的盒子，内边距为20像素，边框为10像素实线黑色边框。
在怪异盒模型下，该盒子实际占据的宽度为：200 + 20*2 + 10*2 = 260像素；实际占据的高度为：100 + 20*2 + 10*2 = 140像素。
二、怪异盒模型和标准盒模型
与怪异盒模型对应的是标准盒模型。在标准盒模型下，元素的宽度和高度只包括元素的内容，不包括元素的边框和内边距。
标准盒模型的代码示例如下：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box; /* 设置盒模型 */
}
当我们在CSS中设置了box-sizing:border-box时，元素就采用了标准盒模型。在标准盒模型下，该盒子实际占据的宽度为：200像素；实际占据的高度为：100像素。
三、怪异盒模型是什么
怪异盒模型是指IE浏览器（主要包括IE6、IE7、IE8）所采用的盒模型。
由于IE浏览器的盒模型与标准盒模型不同，因此称其为怪异盒模型。
四、怪异盒模型和标准盒的区别
怪异盒模型和标准盒模型最大的区别在于宽度和高度的计算方式不同。
在怪异盒模型下，元素的宽度和高度包括了元素的内容、内边距和边框；而在标准盒模型下，元素的宽度和高度只包括元素的内容。
这种差异会导致在布局时的计算方式不同，因此可能会出现兼容性问题。
五、怪异盒模型教程
开发者在开发网站的过程中，需要搞好盒模型的理解，特别是要掌握怪异盒模型的相关知识。
下面是一些常用的实现怪异盒模型的技巧：
1、使用
使用声明，可以指定HTML文档的文档类型。在文档类型已经确定的情况下，IE浏览器会自觉采取标准盒模型，否则将采用IE的怪异盒模型。
<!DOCTYPE html> <html> <head> ... </head> <body> ... </body> </html>
2、重设盒模型
通过CSS的box-sizing属性可以重设盒模型，从而实现在IE浏览器中采用标准盒模型。
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
box-sizing: border-box; /* 设置盒模型 */
}
3、使用hack
通过CSS的hack可以针对性地，针对IE浏览器做出特定的样式，从而实现不同盒模型下的兼容。
/* IE怪异盒模型下的hack */
.box {
width: 220px; /* 实际宽度，含边框和内边距 */
height: 140px; /* 实际高度，含边框和内边距 */
padding: 10px; /* 内边距 */
border: 1px solid black; /* 边框 */
*width: 200px; /* IE6/7/8 */
*height: 120px; /* IE6/7/8 */
*padding: 0px; /* IE6/7/8 */
*border: none; /* IE6/7/8 */
}
六、怪异盒模型属性
以下是常见的怪异盒模型相关属性：
1、width
width属性指定了元素的实际宽度，这里的实际宽度包括了元素的内容、内边距和边框。
.box {
width: 200px;
}
2、height
height属性指定了元素的实际高度，这里的实际高度包括了元素的内容、内边距和边框。
.box {
height: 100px;
}
3、padding
padding属性指定元素的内边距大小。
.box {
padding: 20px;
}
4、border
border属性指定元素的边框大小和样式。
.box {
border: 10px solid black;
}
七、怪异盒模型一般用在哪里
怪异盒模型主要用在IE浏览器中。由于早期的IE浏览器实现了怪异盒模型，因此在开发IE浏览器兼容性的网站时，需要使用怪异盒模型的知识。
八、怪异盒模型和标准盒模型的区别
怪异盒模型和标准盒模型的最大区别在于宽度和高度的计算方式不同，由此导致了其他计算方式的不同。
但是，怪异盒模型和标准盒模型的选择并没有本质的区别。只是在不同的浏览器和开发环境中，可能会存在兼容性等问题，需要了解这些知识以便解决相关的问题。
九、怪异盒模型适用于什么场景
怪异盒模型适用于IE浏览器，并且在某些IE浏览器版本中，可能无法避免其使用。
在开发IE浏览器兼容性网站时，会用到怪异盒模型的知识。
十、怪异盒模型总宽高不包括
怪异盒模型总宽高不包括margin，只包括元素的内容、内边距和边框。
