CSS设置精选版（框模型）

1、框模型概述：

注意：IE6 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

 

2、padding和margin的四个属性顺序分别是 上 右 下 左，这些值不止做用于div中，还做用于table中。如果缺少下值，则取上值，如果缺少左值，则取右值

 

3、边框背景在浏览器中的区别：

CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

 

4、设置边框线：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 的值。

 

  4.1 分别设置边框属性：border-top-style  border-right-style  border-bottom-style  border-left-style

  4.2 边框宽度：border-width:

  4.4 边框颜色：border-color，属性顺序依次为 上 右 下 左

  4.4 分别设置边框颜色：border-top-color  border-right-color  border-bottom-color  border-left-color

  4.5 透明边框：border-color: transparent; 如：

        a:link, a:visited {
          border-style: solid;
          border-width: 5px;
          border-color: transparent;
        }
        a:hover {border-color: gray;}

        注意：IE6不支持

 

5、对于span等行内框，如果要改变高度，需要设置line-height属性。