css中怪异盒模型代码

CSS中的怪异盒模型是一种与标准盒模型不同的盒模型，会直接影响到元素的宽度和高度计算。在标准盒模型中，元素的宽度和高度是由内容区域、内边距和边框共同决定的，而在怪异盒模型中，元素的宽度和高度还会包括外边距。

在CSS中使用怪异盒模型最简单的方式就是将元素的box-sizing属性设置为border-box。此时元素的宽度和高度将包括内边距和边框，并且不会受到外边距的影响。下面是怪异盒模型的代码示例：

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  box-sizing: border-box;
} 

在上述代码中，.box元素的宽度为200px，在加上左右各2px的边框和padding后，实际的内容区域宽度就是196px（200 - 2 * 2）。此时再加上左右10px的外边距，那么元素的总宽度就是216px（196 + 10 * 2 + 2 * 2）。

使用怪异盒模型可以方便的控制元素的尺寸，但需要注意的是，在不同浏览器和设备上，盒模型的表现可能会有所不同，需要进行兼容性处理。