三.CSS框模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

element:元素。

padding:内边距，也有资料将其翻译为填充。

border:边框。

margin:外边距，也有资料将其翻译为空白或空白边。

浏览器兼容性

元素内容占据的空间是由width属性设置的，而内容周围的padding和border值是另外计算的。

但IE5和6的呈现的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

目前最好的解决方案是回避这个问题。

也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

1.内边距

例如，如果您希望所有h1元素的各边都有10像素的内边距，只需要这样：

h1{padding:10px;}

注释：不允许使用负值。

可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：

h1{padding:10px0.25em2ex20%;}

也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：

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:dottedsoliddoubledashed;}上边框是点状,右边框是实线,下边框是双线,左边框是虚线

{border-style:dottedsolid;}上边框和下边框是点状,右边框和左边框是实线

(2)边框的宽度border-width

border-width属性为边框指定宽度

有两种方法：可以指定长度值，比如2px或0.1em；或者使用3个关键字之一，它们分别是thin、medium（默认值）和thick。

定义单边宽度

可以按照top-right-bottom-left的顺序设置元素的各边边框：

p{border-style:solid;border-width:15px5px15px5px;}

可以简写为（这样写法称为值复制）：

p{border-style:solid;border-width:15px5px;}

(3)没有边框

border-style设置为none

p{border-style:none;border-width:50px;}

如果边框样式为none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为0，而不论原先定义的是什么。

(4)边框的颜色border-color

任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和RGB值：

{border-color:bluergb(25%,35%,45%)#909090red;}

(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:toprightbottomleft

可以为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设置元素的上外边距。