CSS学习笔记之框模型

1、概述

为了更好的处理元素内容、内边距、边框和外边距之间的关系，CSS 定义了框模型如下：

内边距、边框和外边距的默认值都是零，可以通过设置元素的 padding、border 和 margin 属性来覆盖这些默认的浏览器样式。另外，要注意的是 width 和 height 属性可以分别用于设置内容区域的宽度和高度

2、内边距

padding 属性定义元素的内边距，其接受长度值和百分数值，要注意的是百分数值是相对于其父元素的 width 属性计算的

一般情况下，我们需要指定四个值分别对应上、右、下、左四个方向，但是 CSS 提供了一种名为 值赋值 的机制，允许为我们可以指定少于 4 个值，其规则如下：

如果缺少左边的值，则使用右边的值代替
如果缺少下边的值，则使用上边的值代替
如果缺少右边的值，则使用上边的值代替

也就是说，如果提供了四个值，则按上、右、下、左的顺序分别设置；如果提供三个值，则第一个值设置上边，第二个值设置左边和右边，第三个值设置下边；如果提供两个值，则第一个值设置上边和下边，第二个值设置左边和右边；如果只提供一个值，则该值同时用于设置上、右、下、左四个方向

如果希望单独设置某一方向的内边距，则可以使用 padding-top、padding-right、padding-bottom 和 padding-left 属性实现

3、边框

（1）样式

可以使用 border-style 属性设置边框样式，其可选值如下：

none：无边框
hidden：一般情况下效果与 none 相同，但是应用于表格时，可以用于解决边框冲突
dotted：点状边框，不过在大多数浏览器中呈现为实线
dashed：虚线边框，不过在大多数浏览器中呈现为实线
solid：实线边框
double：双线边框，宽度等于 border-width 的值
groove：3D 凹槽边框，其效果取决于 border-color 的值
ridge：3D 垄状边框，其效果取决于 border-color 的值
inset：3D inset 边框，其效果取决于 border-color 的值
outset：3D outset 边框，其效果取决于 border-color 的值
inherit：从父元素继承 border-style 属性

该属性同样遵循 值赋值 机制，如果希望单独设置某一方向的边框样式，可以使用 border-style-top、border-style-right、border-style-bottom 和 border-style-left 属性实现

（2）宽度

可以使用 border-width 属性设置边框宽度，其可选值如下：

thin：细边框
medium：默认值，中等边框
thick：粗边框
长度值
inherit：从父元素继承 border-width 属性

该属性同样遵循 值赋值 机制，如果希望单独设置某一方向的边框样式，可以使用 border-width-top、border-width-right、border-width-bottom 和 border-width-left 属性实现

（3）颜色

可以使用 border-color 属性设置边框宽度，其可选值如下：

颜色名称
十六进制颜色
RGB 颜色
transparent：默认值，透明
inherit：从父元素继承 border-color 属性

该属性同样遵循 值赋值 机制，如果希望单独设置某一方向的边框样式，可以使用 border-color-top、border-color-right、border-color-bottom 和 border-color-left 属性实现

（4）属性简写

使用 border 简写属性允许我们在一个声明中设置所有的边框属性，其顺序如下：

border-width
border-style
border-color

4、外边距

margin 属性定义元素的外边距，其接受长度值和百分数值，也可以使用 auto，说明由浏览器计算外边距，同样的，该属性也遵循 值赋值 机制，如果希望单独设置某一方向的外边距，则可以使用 margin-top、margin-right、margin-bottom 和 margin-left 属性实现

现在我们再考虑这样一个问题，当元素的外边距重叠的时候会发生什么呢？用一句简单的话概括其规则就是：

当两个垂直外边距重叠时，它们将合并成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并

5、定位

（1）一切皆为框

在 CSS 中存在着这样一种说法：一切皆为框

像 div、h1 和 p 等元素常常被称为块级元素，也可以将它们看成块框；像 span 和 strong 等元素常常被称为行内元素，也可以将它们看成行内框。我们可以使用 display 属性改变框的类型，常见的可选值如下：

none：此元素不会被显示
block：此元素将显示为块级元素，前后带有换行符
inline：此元素将显示为内联元素，前后没有换行符，默认值
inline-block：行内块元素，CSS2.1 新增的值
run-in：根据上下文作为块级元素或内联元素显示
list-item：作为列表显示
table：作为块级表格来显示，表格前后带有换行符
inline-table：作为内联表格来显示，表格前后没有换行符

（2）一切皆可定位

任何元素都可以看成框，任何元素都可以进行定位，属性 position 规定定位类型，其可选值如下：

static：默认值，不设置定位，元素将出现在正常流中，此时忽略 top, bottom, left, right 声明
absolute：生成绝对定位元素，相对于 static 定位以外的第一个父元素进行定位，元素的位置通过 left, top, right 和 bottom 属性进行规定
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 left, top, right 和 bottom 属性进行规定
relative：生成相对定位的元素，相对于其正常位置进行定位，元素的位置通过 left, top, right 和 bottom 属性进行规定
inherit：从父元素继承 position 属性

position 属性常常需要配合下面的属性确定框的移动距离，它们接受一个长度值或一个百分数值：

top：定义元素的上外边距边界与其包含块上边界之间的偏移
right：定义元素的右外边距边界与其包含块右边界之间的偏移
bottom：定义元素的下外边距边界与其包含块下边界之间的偏移
left：定义元素的左外边距边界与其包含块左边界之间的偏移

（3）定位模式

下面我们再来谈谈 CSS 中三种定位模式的区别，它们分别是绝对定位、相对定位和浮动

相对定位：如果对一个元素进行相对定位，它将出现在原本所在的位置上，然后通过设置垂直或水平位置，让该元素相对于起点进行移动

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致覆盖页面上的其它元素
绝对定位：如果对一个元素进行绝对定位，它将从文档流中完全删除，原先在文档流中所占的空间也会关闭，然后通过设置垂直或水平位置，让其相对于最近的已定位祖先元素进行移动，如果没有已定位的祖先元素，则相对于最初的包含块进行移动

注意，因为绝对定位的元素与文档流无关，所以它们可以覆盖页面上的其它元素
浮动：浮动框可以任意移动，直到它碰到包含框或另一个浮动框为止，另外，由于浮动框不在文档普通流中，所以文档普通流中的块框表现得就像浮动框不存在一样，可以使用 float 属性定义元素向哪一侧浮动，可以使用 clear 属性定义元素哪一侧不允许其他浮动元素

参考资料：http://www.w3school.com.cn/css/index.asp