CSS框模型部分


  见图片,这一部分主要所涉及的就是这几个属性,由于之前对一些模板做小修改时接触比较多,所以看起来并不难理解。值得注意的是,IE5.x和6在对元素定义位置时所参考的标准不同,对width的处理也不同,为了兼容,一般来说简单的处理方法是将内边距定义到父元素或子元素。

  对padding和margin定义数值的单位可以有百分比(px)、字宽( em)、字高(ex)、英寸( in)、厘米(cm)、百分比(%),它们可以定义四个数值,分别对应上右下左。

  与上面相同的是border也可以用四个数值,分别对应上右下左边框的属性。border的基础属性有border-style, border-width, border-color。其中border-style有以下的样式:

描述
none 定义无边框。
hidden 与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。

  margin即外边距,数值可以为负,用法和padding类似。特别需要注意的是外边距在垂直方向上的合并,取最大值作为最终的外边距,见图片只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

我也说两句儿......