我读了一本叫做“防弹网页设计”的书，那是我不太了解的东西。它说“虽然我们为#nav 声明了 720 像素的宽度，但为了缩进标签，我们还分配了 46 像素的左内边距。由于内边距被添加到元素的宽度，导航的总宽度等于 766 像素。”
#nav
{
float:left;
width:720;
margin:0;
padding:10px 0 0 46px;
background:#FFCB2D;
}
我的意思是在#nav 选择器中定义的宽度是 720 像素，填充是 46 像素。我不知道这本书的总宽度是什么意思。我以前从未听过这种表达方式。总宽度是等于宽度+填充的常用术语吗？
如果您查看下图，您会看到填充对块的总宽度有影响：
此外，作者对填充使用了速记符号，可分解为：
top-padding: 10px;
right-padding: 0px;
bottom-padding: 0px;
left-padding: 46px;
水平填充对总宽度有贡献。
当他说“总宽度”时，他指的是元素占用的实际物理空间。它将在屏幕上以 766px 显示。
这里是 Box-Model 混淆的经典经典示例。不过，冷静下来。总宽度是这样的。但是对于新的 CSS 概念，这仅在内容框框模型中有效。然而，还有另外两种模型，Border-box & Padding-Box
您所指的从未听说过的是最古老的，可能是最常用的盒子模型，如果您指定元素的某个宽度，则填充和边框宽度超出该宽度 - 所有这些结合起来为您提供总宽度 = 内容宽度 (720px) + 填充宽度 (20px+20px) + 边框宽度（如果有）
但是，padding-box盒子模型意味着即使你在元素上指定了一个宽度，你仍然会发现总宽度 = Content Box (720-40)px + padding (20+20)px
推荐读物