2013-08-19 84 views
3

我读了一本书,叫“防弹网页设计”,这是什么,我真的不明白。 它说:“虽然我们已经宣布的720像素的宽度为#nav,缩进我们也指定46px的左填充的标签。因为填充被添加到元素的宽度,导航的总宽度等于766px。”这是什么总宽度意味着实际

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

我的意思是宽度是720px,它是在#nav选择器中定义的,填充是46px。 我不知道这本书的意思是总宽度。我从来没有听过那种表情。 总宽度是等宽+填充的常用术语吗?

+1

这才是真正的示例代码?它缺少'px'。 –

回答

6

如果你看看下面的图片,你会看到填充有助于宽的块:

另外,笔者使用的缩写符号为填充,其分解为:

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

水平填补处理有助于到宽度。

+0

通常被称为“盒模型”,这个词应该在你的阅读中出现。 – kunalbhat

+0

它似乎也包含在总宽度 – user2658578

+0

@ user2658578的边距不是元素的宽度(您是否应该用背景颜色对它进行着色),而是元素占据的总空间本身。 – stommepoes

0

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

0

经典经典案例盒模型混淆在这里。但是,冷静下来。总宽度是这样的。但是,对于新的CSS概念,这仅适用于内容框 Box模型。还有另外两个车型,然而,边界框 & 填充盒

什么你指的是作为从未听说过的是最古老,也许是最常用的盒状模型的地方,如果你指定一个一个元素的某个宽度,然后填充和边框宽度超出该宽度 - 所有这些组合给你总宽=内容宽度(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