虽然重复了千百遍但是图表解釋什么是CSS盒子模型盒子怎么处理的文章还是挺少的，这对初学者并不是很友好

（1）有两种， IE 盒子模型盒子怎么处理、W3C 盒子模型盒子怎么處理；

但实际上这样的回答，未必能让面试官满意本文就再重复一下。

网页设计中的每个元素都是一个矩形框简单粗暴的理解就是這样的。 如何精确计算盒子的大小这是一个图表：

我们在Firebug中，或者chrome的开发者工具中可能都能看到这样的图表，这可以很好地向您显示影响页面上任何框的数字：

请注意在这两个示例中，边距都是白色的边距的独特之处在于它本身不会影响盒子本身的大小，但它会影響与盒子交互的其他内容因此是CSS盒子模型盒子怎么处理的重要部分。

如果填充padding或边框border未声明則它们为0,或浏览器默认值（可能不为零，尤其是对于通常未重置的表单元素）
如果边框的宽度未声明（并且盒子是块级元素），则事情會变得更加怪异

如果没有声明宽度，并且盒子具有静态或相对定位则宽度将保持100％的宽度，并且padding和border将向内推而不是向外但是，如果您明确将框的宽度设置为100％则填充将正常向外推动框。

这里的教训是盒子的默认宽度不是真正的100％，而是一个不太明显的“剩下的东覀”这一点特别有价值，因为在很多情况下设置或不设置宽度都非常有用。
此外还需要注意如textarea的元素它们非常需要设置宽度，以重置“cols”属性因此，我们常需要将textarea明确设置为100％

没有设置宽度的绝对定位的盒子表现得有些奇怪。它们的宽度只与它内部的内容所需的寬度一致盒子中只有一个字，那就是一个字的宽度有两个字，就是两个字的宽度

这会一直增加，直到盒子的宽度达到父级宽度的100％（具有相对定位的最近父级或浏览器窗口）然后开始换行。盒子垂直扩展以容纳内容感觉自然而且正常但是当水平发生时它会感觉很渏怪。这种奇怪的感觉是有道理的因为不同的浏览器如何处理这个问题有很多怪癖，更不用说文本在不同平台上呈现不同的事实

对于沒有宽度的浮动元素，可以看到相同的确切行为该盒子的宽度只能容纳内容，最大可达其父元素（尽管不需要相对定位）由于这些无寬度框的脆弱性， 需要做的是是在关键任务场景中不依赖它们例如整体页面布局。如果浮动一列用作侧边栏并依靠内部的某个元素（如圖像）来负责保持其宽度那么您就会遇到麻烦。

我们一直专注于将盒子作为块级元素很容易将块级元素视为盒子，但内联元素也是盒孓把它们想象成真正的长而瘦的矩形，恰好包裹在每一条线上他们可以像任何其他盒子一样有边距，填充边框。