.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}上面的代码定义了一个.box类，其宽度为200像素，高度为100像素，具有20像素的填充、1像素的固定边框和10像素的外边距。注意，这里的尺寸指的是内容区域之外的部分。
那么为什么CSS盒模型被称为“魔性”呢？主要是因为在不同的浏览器和实现中，盒模型的计算方式可能不同。具体来说，盒模型的两种计算方式分别是标准盒模型和IE（Internet Explorer）盒模型。
标准盒模型是指CSS3和CSS2.1规范中的盒模型，其中宽度和高度仅包括内容部分。也就是说，如果大家定义一个200像素宽、100像素高的元素，那么它的内容区域的宽度和高度就是200和100。
IE盒模型（也称作怪异盒模型）则是IE浏览器独有的实现方式，其宽度和高度包括了填充和边框部分。也就是说，如果大家定义一个200像素宽、100像素高的元素，那么它的宽度和高度就是内容区域的200加上填充和边框的宽度和高度。
那么，在实际开发中，如何处理这种“魔性”问题呢？一种常见的方式是使用box-sizing属性，该属性值可以为content-box（标准盒模型）或border-box（IE盒模型）。例如：
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
box-sizing: border-box;
}在上面的例子中，大家将box-sizing属性设置为border-box，这样就使用了IE盒模型。这样一来，大家就可以在元素的宽度和高度中包含填充和边框，而不需要再另行计算。
总之，CSS盒模型是Web开发中非常重要的概念。了解盒模型的计算方式、应用范围和特点，可以更好地掌握页面的布局和样式，为开发优质网站提供支持。