CSS模型教程:boxes,borderes,margins和padding

【 tulaoshi.com - Web开发 】

乍看之下, CSS 布局模式简单明了。盒子，边框和边距都是相当简单的对象， CSS 语法对它们的特性描述并不复杂。

然而, 浏览器渲染引擎遵循着 CSS 2.1 推荐中所规定的一大堆规则，此外还有一些自己的规则。因此，对设计师而言，在将某个高级技巧添加到自己的技术集之前，需要先了解大量细节问题。

在本文中，我们将对那些控制 HTML 元素的布局的 CSS 属性进行介绍，这些 CSS 属性包括 HTML 元素的边框，边距和许多其它属性。本文所涵盖的范围还包括上面提到的一些规则。高级的栏式布局以及栅网聚焦技术将在后面的文章中讨论，这些文章将更加详细地对布局，浮动，清除，以及定位进行探讨。

在默认情况下，许多 HTML 元素如 div 元素和标题会渲染到占据浏览器画布的全部宽度，并且会强制实行末端断行，因此成串的这种元素的渲染效果在文档画布上会处于从上到下的堆叠中。

但是，HTML 元素和其通常的浏览器样式并不能满足开发员想达成的所有用途。把 CSS 与 HTML 合在一起用来弥合差距，从而 class 和 id 给标签添加语义，而样式表规则可以精确地改变布局和页面内容外观甚至可能通过抵消掉浏览器默认样式的大部分效果来实现这一点。

对空白的细致控制是设计者最重要的工具之一笔者认为它是重中之重。然而，尽管对空白的控制度能给网站设计带来高产品价值，但在默认的浏览器样式表中却缺乏这种控制，这就意味着设计师会频繁用到本文所说的边距,边框,填充距, 和其它 CSS 布局属性。

边距，边框和填充距的分布如图1所示。

图1：一个元素盒中各组成成分的详细图示，标有相关CSS属性。

边距可单独指定，也可在一条缩写规则中加以指定。另外缩写规则还可以对某个对象周围的各个边框进行控制。合法的值通常是用 px 或 em 单位指定的（像素或字体高）。而在 print-specific 样式表单中会相反用 in、cm 或 pt 单位（英寸、厘米或点）。

在所有情况下 %（百分比）值都是合法的，但须谨慎使用；此类值是按照父元素宽度的比例来计算的，漫不经心的赋值会造成意外的后果。这一问题将会在下面对 CSS 盒模型的讨论中加以详述。

除图像外所有内联元素都没有边距，因而无需边距值。关于这些元素的列表，请参阅下面的表2.

依据不同的情况，auto 的赋值会指示浏览器按照自己样式表中的值来渲染边距。但是，在将这样的边距应用到某个元素上，而该元素的宽度具有意义时，auto 边距会将所有可用空间渲染成空白。

看看下列规则：

.narrowWaisted {  width: 16.667em;  margin: 1em auto 1em auto;}

class narrowWaisted 的块元素会将自身对齐到可用画布的中心。

或可将某个适当元素的右边距设成某个相对较小的值，而左边距设为 auto 值。

设置完成后，这样的元素就会接近于右对齐。

所有边距属性都可以设为 negative。进行这种设置之后，就能以任意程度抵消相邻的边距。如果将一个足够大的负边距应用到一个足够大的元素上，受其影响的相邻元素甚至可以被重叠。

例如，看看下面简单的 div 元素（取自示例文件 negativemargin1.html。）

div id="header"h1Lovely header/h1/div
div id="content"pOverlapping text is entirely unreadable/p/div

如果用下面的CSS来样式化

body {background-color:white font-family:Geneva, Arial, Helvetica, sans-serif;}
#header { background-color:yellow }
h1 { color:red; font-size:2em; }

就会产生如图 2 所示的效果：

图2：这个简单示例中的两个元素。看起来很普通。

有意思的是下面这部分。现在我们要通过下面的规则给位于下边的元素的顶部添加一个相当大的负边距：

#content {margin-top:-3em;}

这样我们就会看到该元素上移了，重叠在标题上，如图3所示（实际例子参见negativemargins2.html 示例文件）。

图 3：应用了负边距之后，下边的元素上移并重叠在标题上。

两个相似并相邻的块元素都有正边距时，两个边距中只有较大那个才会得以应用。如，试试下面的规则：

p {  margin: 1em auto 1.5em auto;}

如果按照字面含义对含有这种样式规则的文件进行渲染，连续的两个段落之间的最终边距应该是 2.5em ，即段落 1(1.5em)的底部边距与段落 2(1em)的顶部边距之和。但是，由于合并边距的应用，它们之间的边距只有 1.5em。

在块元素中列表和标题是特例，它们的边距不会与其它块元素的边距相合并。