W3C 的盒模型：一切都是附加的

基本规则就是一个元素的宽度或高度计算值等于：

margin + border + padding + (width|height)

在许多情况下，width 和/或 height 都设置的是其默认的 auto 值，这就是说为页面内容预备的画布区域等于：

available_canvas ? margin ? padding ? border

在这样的等式中，available_canvas 本身是一个离散值（如果是自动计算的话）, 用它来减去边距，边框和填充距。 这个数字对元素的宽度极为重要，设计者的计算错误将会导致在浏览器窗口上出现水平滚动条这种让人头疼的结果。另外，浏览器通常会将元素置于浏览器画布的左边，但它可能会溢出浏览器窗口的右边，除非有其它命令来限定。

看看下面的样式表规则:

#myLayoutColumn {
  width: 50em;
  margin: 1.5em auto 1.5em auto;
  border: .1em;
  padding: .9em;
}

如前面在讨论边距属性时说过的那样，#myLayoutColumn 会将自身对齐到其容器元素的中心，无论其容器是 body，还是由开发团队做出的其它东西。

另外，如果“严格模式”的激活（通过一个适当的 !DOCTYPE 声明）应用了 W3C 的盒模型的话，也可估算出非边距 al宽度是：

0.1em + .9em + 50em + .9em + .1em = 52em

在 screen 媒体上，浏览器会采用此值，将所有属性值分别取整为最接近的像素值，并按照这些值来进行最终效果渲染。

W3C 盒模型中的百分比边距和填充距

使用 W3C 盒模型时，百分比的边距和填充距是相对于其包含元素的 width 计算值来计算的。例如，如果为一个包含在 800 像素宽的元素中的元素指定 margin: 20%，该元素周围的边距就是每边 160 像素（800 的 20% 是 160）。

如果对这个元素指定 padding: 5%，它的内容宽度计算值就是400像素:

20% + 5% + 5% + 20% = 50%
0.50 × 800 = 400
800 ? 400 = 400

对文件流进行处理

由于后面的教程要讨论多栏式布局的制作，本文下面将介绍三个 CSS 属性：display、float 和 clear。

元素类型和显示属性

除 html、body 和 table 部分之外，在 HTML 4.01 推荐中与主要内容有关的所有元素都有一种相关联的类型：内联或块。每种类型以不同方式决定了默认布局表现：

inline

• 紧接在内联元素前/后的文本和图片与内联元素的内容渲染为同一基准线。但如果该文本或图片过长，它们就会与包含元素的边缘相重叠，在这种情况下，内嵌内容就会跑到一条新基准线上面，而该基准线位于之前的那条基线的下面。
• 内联元素中，文本行的布置会视需要（或允许）而带有软换行符，除非用 white-space 属性修改了这种方式。
• 样式表规则中可应用于这些元素的 margin、width、height 和 float 属性被忽略。（除了 img 和 object）
• 内联元素只能容纳文本或其它内联元素。

block

• 这些元素将在其容器中渲染为离散块。
• 这些元素的前后将总是渲染有断行点，除非将 float 值设为 left 或 right。
• 如果嵌套块元素之间没有任何内容，它们之间的断行点通常会被合并。
• 宽度为 auto（默认）的块元素会一直扩展，直到占满所有可获得的宽度。

display 属性有三个常用的值¬——block、inline 和 none——其中两个是指对应的元素类型。改变元素的 display 值可以使内联元素的表现方式像块元素那样，也可以使块元素的表现方式像内联元素那样，还可以改变文件的渲染效果，使之看起来就像元素（和它的所有内容）根本不存在一样。

• 上一篇:用不同的 CSS 怎样定位不同的浏览器
• 下一篇:CSS选择符