CSS单元格式框的属性

● 1．height 和 width
　　简单地说，单元的宽度和高度就是包围其内容的边缘框（bounding box）的大小——也即位于边距、衬距或边界之内的空间大小。这个框，有时也称之为内边缘框（inner bouding box）。内边缘框尽可能地接近单元的内容，因此，单元的高度和宽度可以简单地定义为内边缘框对边的距离。
　　CSS中，有时可使用 width 和 height 特性来指定单元的宽度和高度。原则上，这两个特性既可以取具体的长度值，也可以取关键字 auto。关键字 auto 要求浏览器根据实际情况自动调整大小。Width 还可以取百分比值，在这种情况下，width 值应是父单元宽度的百分比值。Width 和 height 的缺省值均为 auto。
　　并不是所有的格式类型都可以指定宽度和高度。如，非空的行间格式单元就不能定义宽度或高度。行间格式单元可能占据多行，创建多个不同宽度，也可能是不同高度的格式框。因此，width 和 height 特性同这些单元是不相关的。但要注意，width 和 height 能够用来改变行间 IMG 单元的大小。
　　多数情况下并不需要指定高度和宽度，因为浏览器会调整这些特性值以满足单元内容的需要（缺省情况）。相反，如果为块级单元强制定义一个固定大小的方框，很可能会出现一些问题。因为文档内容的改变或者样式表特性的改变将会时内容不再适合所指定的方框。
　　然而，在另外一些情况下，为块级单元或浮动单元指定其中的一个特性是有用的，这样仍可改变其它的尺寸，并最终使内容适合单元的方框。
　● 2．衬距 （padding）
　　衬距（padding space）是值“衬”于单元内容周围的空白。多数情况下，衬距都被看成是单元的一部分，并且同单元内容有一样的背景颜色和背景图像。衬距常用来在单元的周围开辟一片缓冲区，在单元和相邻单元之间创建空白区，或是在单元内容和单元边界（border）之间创建空白区。不过，相邻格式单元之间的衬距作用与单元类型有着很大关系。
　　衬距特性值既可以是长度值，也可以是百分比值。百分比值相对于父单元的宽度计算。衬距值必须是正的，因为该值指定衬距区域的大小，而区域大小是不能为负值的。衬距特性的缺省值是0。显而易见，衬距是不能够被继承的。
　　有五个定义衬距宽度的特性：其中四个 padding-top、padding-bottom、padding-left、padding-right 分别定义单元上边、下边、左边和右边的衬距宽度，还有一个简写特性 padding 可一次定义所有的衬距宽度，使用参见下表。此外，简写特性 border-width 和 margin 的使用同特性 padding。
四种可能的简写特性（padding）值及含义 特性指定 含义
padding : len1 所有衬距宽度均为 len1
padding : len1 len2 上衬距和下衬距宽度为 len1，左衬距和右衬距宽度为 len2
padding : len1 len2 len3 上衬距宽度为 len1，右衬距和左衬距宽度为 len2，下衬距宽度为 len3
padding : len1 len2 len3 len4 上、右、下和左衬距的宽度分别为 len1、len2、len3 和 len4
　　衬距可用于任一格式单元。衬距对相邻格式单元布局的影响与单元的格式类型密切相关。对于块单元或浮动单元，增大衬距，可使单元远离其父单元的内边缘框或相邻单元的外边缘。
　● 3．边界 （border）
　　边界是位于单元内容和衬距之外的直线。四条边界的宽度可由特性：border-left-width（左边界宽度），border-right-width（右边界宽度），border-top-width（上边界宽度），border-bottom-width（下边界宽度）分别定义或由简写特性 border-width 一次定义。同边距宽度一样，以上特性既可以取长度值，也可以取百分比值。所有的边界宽度特性也可以取四个关键字：thin（细）、medium（中）、thick（粗）和none（无）。每一个都具有明显的含义。缺省的宽度指定为 medium 。同衬距一样，边界的宽度不能够为负值。
　　另有两个特性定义边界的特征。其中 border-color 定义边界颜色，其值既可以为颜色名称，也可为RGB代码。缺省时，边界颜色同单元文本颜色；border-style 定义边界类型。其可能取值及含义见下表，缺省值为 none，即不显示任何边界，即便是给定了宽度值。注意浏览器并不支持所有的边界类型，对于其不支持的所要求的类型，使用类型“solid”代替。
Border-style 特性值及含义 特性值 描述
dashed 使用虚线绘制边界，该线绘制在单元背景之上
dotted 使用点划线绘制边界，该线绘制在单元背景之上
double 使用双线（a double line）绘制边界，该线绘制在单元背景之上。内层边线与外层边线之间的距离为边界的宽度
groove 使用三维的槽纹图形作为边界
inset 绘制的边界使单元内容看起来好象有凹陷的感觉
none 不显示边界（缺省值）
outset 绘制的边界使单元内容看起来好象有凸出的感觉
ridge 将边界绘制成脊状（凸出的槽纹）
solid 使用实线绘制边界
　　最后，特性 border 可同时设置四条边界的宽度、类型和颜色。一般形式如下：
　　　　border : width style color ;
其中，width 是任何允许的宽度值，style是任何允许的类型值，color 是任何允许的颜色值。这些值的写法是不计顺序的，或者也可以不写。后一种情况下，浏览器将假设其为缺省值。
　　同衬距一样，边界可用于任一个格式单元。边界对相邻格式单元布局的影响与单元的格式类型密切相关。对于块单元或浮动单元，增大边界宽度，可使单元远离其父单元的内边缘框或相邻单元的外边缘。
　　尽管 border 常用来包围一个文本块，但从原理上讲，border 也可以创建标记文本快的边界线，或是相邻文本块之间的分界线。
　● 4．边距 （margin）
　　边距（margin）是指围绕在单元及其衬距和边界四周的空白。边距是透明的，显示父单元的背景。因此，如果一个具有黄色背景的P单元及其边距位于一个具有红色背景的DIV单元内，那么，围绕P的边距区域将为红色。单元四周边距的宽度可由以下特性分别定义：margin-left（左边距）、margin-right（右边距）、margin-top（上边距）和margin-bottom（下边距），也可由简写特性 margin 一次定义。
　　边距值可以是长度值，也可以是百分比值，或是关键字 auto。关键字 auto 所设置的边距大小取决于单元的类型（块级、行间、浮动），同时也取决于与其相关联的边距、宽度或高度指定。
　　对于块级单元或浮动单元，边距特性既定义单元所占的空间，又定义单元相对于父单元（或相邻单元）的位置。