三.CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
    element : 元素。
    padding : 内边距，也有资料将其翻译为填充。
    border : 边框。
    margin : 外边距，也有资料将其翻译为空白或空白边。
浏览器兼容性
元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。
但IE 5 和 6 的呈现的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
目前最好的解决方案是回避这个问题。
也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

1.内边距
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
注释：不允许使用负值。
可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top、padding-right、padding-bottom、padding-left
内边距的百分比数值
可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样。
所以，如果父元素的 width 改变，它们也会改变。

2.边框
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面：宽度、样式，以及颜色。

(1)边框与背景
CSS 规范指出，边框绘制在“元素的背景之上”。元素的背景是内容、内边距和边框区的背景。

(2)边框的样式border-style
border-style 属性定义了 10 个不同的非 inherit 样式，包括 none。
{border-style:dotted solid double dashed; }上边框是点状,右边框是实线,下边框是双线,左边框是虚线
{border-style:dotted solid;}上边框和下边框是点状,右边框和左边框是实线

(2)边框的宽度 border-width
 border-width 属性为边框指定宽度
有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值） 和 thick。
定义单边宽度
可以按照 top-right-bottom-left 的顺序设置元素的各边边框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
可以简写为（这样写法称为值复制）：
p {border-style: solid; border-width: 15px 5px;}

(3)没有边框
border-style 设置为 none
p {border-style: none; border-width: 50px;}
如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论原先定义的是什么。

(4)边框的颜色 border-color
任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：
{border-color: blue rgb(25%,35%,45%) #909090 red;}

(5)透明边框border-color: transparent;
如果边框没有样式，就没有宽度,创建有宽度的不可见边框。
 border-color: transparent;
重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

3.外边距 margin
(1)margin 属性
margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：
h1 {margin : 0.25in;}
与内边距的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的：
margin: top right bottom left
可以为 margin 设置一个百分比数值：
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
(2)值复制
如果缺少左外边距的值，则使用右外边距的值。
如果缺少下外边距的值，则使用上外边距的值。
如果缺少右外边距的值，则使用上外边距的值。
提示：Netscape 和 IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。
相反地，Opera 将内部填充（padding）的默认值定义为 8px，
因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

4.外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
(1)当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
(2)当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。
(3)外边距甚至可以与自身发生合并。假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
CSS 边框属性（Border 和 Outline）
属性                                                                  描述                                                              CSS
border                  在一个声明中设置所有的边框属性。    1
border-bottom           在一个声明中设置所有的下边框属性。   1
border-bottom-color     设置下边框的颜色。   2
border-bottom-style     设置下边框的样式。   2
border-bottom-width     设置下边框的宽度。   1
border-color            设置四条边框的颜色。  1
border-left             在一个声明中设置所有的左边框属性。   1
border-left-color       设置左边框的颜色。   2
border-left-style       设置左边框的样式。   2
border-left-width       设置左边框的宽度。   1
border-right            在一个声明中设置所有的右边框属性。   1
border-right-color      设置右边框的颜色。   2
border-right-style      设置右边框的样式。   2
border-right-width      设置右边框的宽度。   1
border-style            设置四条边框的样式。  1
border-top              在一个声明中设置所有的上边框属性。   1
border-top-color        设置上边框的颜色。   2
border-top-style        设置上边框的样式。   2
border-top-width        设置上边框的宽度。   1
border-width            设置四条边框的宽度。  1
outline                 在一个声明中设置所有的轮廓属性。    2
outline-color           设置轮廓的颜色。    2
outline-style           设置轮廓的样式。    2
outline-width           设置轮廓的宽度。    2


CSS 外边距属性（Margin）
属性                                                  描述  CSS
margin          在一个声明中设置所有外边距属性。    1
margin-bottom   设置元素的下外边距。  1
margin-left     设置元素的左外边距。  1
margin-right    设置元素的右外边距。  1
margin-top      设置元素的上外边距。