内容的宽度为10px。padding为2px，这个padding是padding-left、padding-right、padding-bottom、padding-left的简写属性。框的宽度需要同时考虑padding-left和padding-right。然后左右各有两个边框条。框模型中不计算边距。所以对于盒子模型来说，宽度是16px（10+2*2+1*2），高度也是16px。这是答案吗？不会，因为我们要找的橙色块的宽高其实就是Padding框的宽高，而这个块不包括黑色边框的边框线。所以我们的第一个橙色块是14px宽和高。让我们再深入一点。如果我们设置边框颜色为透明，比如border:1pxsolidrgb(0,0,0,0)，你认为橙色块的宽高是多少？答案是16px。在其顶部添加边框之前，背景颜色将填充整个框。如果边框变得透明，它会露出原本会覆盖的橙色区域的一部分。怪异的盒子模型（border-box）也叫IE模型。早期版本的IE浏览器并没有遵循CSS标准。width和height用于设置Border框的宽度和高度，而不是Content框的宽度和高度，导致在不同的浏览器中有不同的行为。毫无疑问是浏览器bug。后来CSS3引入了box-sizing，让开发者可以选择使用哪种盒子模型，提供了更好的灵活性。通过下面的设置，我们可以将元素的盒子模型设置为一个奇怪的盒子模型。.box{box-sizing:border-box;}在怪异的盒子模型中，width和height属性用于设置Borderbox盒子。即我们直接设置元素对应的框的宽高，然后通过padding和border计算出内容框。让我们看看如何计算标题中第二个橙色块的宽度和高度。.box{宽度：10px;高度：10px；边框：1px实心#000；填充：2px；边距：2px；background-color:orange;}.border-box{box-sizing:border-box;}盒模型的宽度为10px，减去border的2px（两个1px的border左右两行），Border框的计算宽度为8px。高度计算是一样的。所以这道题的答案是：第一个橙色块的宽高是14px，第二个橙色块的宽高是8px。结束对于DOM元素，我们有两种盒模型：box-sizing:content-box:width和height对Content盒生效的标准盒模型是默认盒模型；box-sizing:border-box:width和height奇怪的盒子模型对Borderbox有效。另外，box-sizing只支持以上两个值，没有padding-box这种盒子模型，不要想太多。