这个总宽度实际上意味着什么

Question

我读了一本名为“防弹网页设计”的书，这是我不太懂的。 它说“虽然我们已经为#nav声明了720px的宽度，但是为了缩进标签，我们还要分配46px的左边距。由于填充被添加到元素的宽度，导航的总宽度等于766px。”

#nav
{
   float:left;
   width:720;
   margin:0;
   padding:10px 0 0 46px;
   background:#FFCB2D;
}

我的意思是宽度是720px，它是在#nav选择器中定义的，填充是46px。 我不知道这本书的总宽度是什么意思。我以前从未听过那个表达。 总宽度是一个常用术语，宽度等于宽度+填充吗？

Answer 1

如果你看下面的图形，你会发现填充有助于块的总宽度：

此外，作者使用简写符号表示填充，分解为：

top-padding: 10px;
right-padding: 0px;
bottom-padding: 0px;
left-padding: 46px;

水平填充有助于总宽度。

Answer 2

当他说“总宽度”时，他指的是元素占据的实际物理空间。它将在屏幕上以766px显示。

Answer 3

Box-Model混淆的经典经典例子。但是，冷静下来。有总宽度这样的东西。但是对于新的CSS概念，这仅在内容框 Box模型中有效。还有另外两种型号，边框＆amp;的填充盒

你所指的是从未听说过的是Box Model中最古老也可能是最常用的，如果你指定一个元素的某个宽度，那么填充和边框宽度都在那个宽度之外 - 所有这些都结合在一起给你总宽度=内容宽度（720px）+填充宽度（20px + 20px）+边框宽度（如果有的话）

然而，填充框框模型意味着即使您在元素上指定宽度，您仍会发现总宽度=内容框（720-40）px +填充（20 + 20）px

推荐读物

1. http://www.paulirish.com/2012/box-sizing-border-box-ftw/
2. http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/
3. http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/
4. http://learn.shayhowe.com/html-css/box-model
5. Types of Box Model