CSS属性允许作者指定一个元素的前景色color和背景background。背景可以是颜色也可以是图片。background属性允许作者定位背景图、重复他以及声明他是否应该相对于viewport规定或者随着文档滚动。

前景色：color属性

• color

  值： <颜色color> | inherit

  初始化： 取决于用户代理

  应用在： 所有元素

  可继承： 可以

  百分比： 不可用

  媒介： 可见媒体

  计算值： 和指定值一样

在某些情况下，作者可能想要用户代理渲染不是来自于文档树中的内容。一个类似的例子就是有序列表；作者不想单独列出这些数字，他想用户代理自动创建他们。简单的，作者可能想用户代理在图的标题之前插入标题单词，或者在第七章的标题之前加上第七章。特别对于音频或者盲文，用户代理应该能插入这些字符串。

在CSS2.1中，有两种机制来生成内容：

• content属性，和伪元素:before和:after结合使用。

• display的属性是list-item的元素。

overflow 和 clipping

一般一个块盒的内容是限制在这个盒的内容边界的。在某些情况下，一个盒可能溢出overflow，意味着他的内容会部分或者完全的在这个盒的外边。例如：

• 不能换行的行，导致这个行盒会比块盒还要大。

• 对于一个包含块来说一个块级盒是超大的。当一个元素的width属性的值导致生成的块盒溢出包含块边界的时候就会发生。

• 一个元素的高要比包含块的显式指定的高还要高（例如，包含块的高是由height属性决定的，不是内容高）。

• 子盒设是绝对定位的，且部分在盒的外边。这样的盒并不是总是被他们的祖先的overflow属性截掉；特殊情况下，他们不会被在他们自身和他们的包含块之间的任何的祖先的overflow截掉。

• 子盒有负margin，导致他部分定位到了盒子的外边。

• text-indent属性导致一个行内盒和块盒的左边界或者右边界拉开一定距离。

包含块的定义

有时一个元素的盒的位置和尺寸的计算是相对于一个确定的矩形的，叫做这个元素的包含块。一个元素的包含块的按照如下定义：

1. 根元素所在的包含块是一个叫做初始包含块的矩形。针对于持续型媒体来说他和viewport一样的尺寸且固定在了画布的原点；针对于分页型媒体来说压实每一page区域。初始化包含块的direction属性的值是和根元素的一样。

2. 针对于其他元素，如果元素的position属性是relative或者static的话，，包含块就是最近的祖先块容器盒的内容区域的边界。

3. 如果元素是position：fixed的，那么其包含块就是，针对于持续媒体来说是由viewport创建的，针对于分页媒体来说就是page区域。

4. 如果元素是position：absolute的，包含块是由最近的position是absolute、relative或者fixed的祖先元素以下边的方式创建的：

   1. 如果祖先元素是行内元素，包含块的顶、左边就是祖先元素的第一个盒的顶、左padding边界，右、下边就是祖先元素生成的最后一个盒的右、下padding边界。

   2. 其他情况，包含块区域是祖先元素的padding边界。

   如果没有这样额祖先元素的话，包含块就是初始包含块。

可视化格式模型简介

这一章以及下一章来描述可视化格式模型：用户代理针对于可视化媒介是怎样处理文档树的。

在可视化格式模型中，在文档树中的每一个元素会通过盒模型生成0个或者多个盒子。这些盒子的布局是这样管理的：

• 框的尺寸和类型。

• 定位体系（普通流、浮动float、和绝对定位）。

• 文档树中的元素之间的关系。

• 额外的信息（例如，viewport的大小、图片的固有尺寸等等）。

CSS盒模型描述了在文档树中的元素通过‘可视化格式模型’进行布局的矩形盒子。

盒尺寸

每一个盒子都有一个内容区域（content area）和周围的可选的内边距（padding），边框（border） 和外边距（margin areas）；每一个区域的大小按照下边的属性指定。下边的图展示了这些区域之间的关系以及margin，border以及padding所用到的术语：

PS：为了方便，后边这几个词的均以英文代替中文

指定值、计算值和实际值

一旦用户代理（一般指浏览器）把一个文档解析然后生成文档树，他就必须对树上的每一个元素根据目标媒介类型所使用的每一个属性指定一个值。

得到某个属性的最终值需要经过下面的4步计算：

• 通过指定值确定这个值

• 将这个值分解为一个可以用来继承的值，也就是计算后的值，计算值

• 在需要的情况下，将计算值转换成一个绝对的值，也就是使用值

• 最终，根据本地环境的限制，把值转换为实际值

模式匹配

在CSS中，模式匹配的规则确定了文档树中的元素应用哪些样式规则。这些模式，就是选择符，可能也就是通过简单的元素名来丰富整个上下文的模式。对于一个元素来说，如果一个模式所有的条件都符合的话，我们就可以这样说：这个选择符匹配这个元素。

元素的名字可能是区分大小写的，这取决于他所在的文档语言。例如，在HTML中，是元素名是不区分大小写的，而在XML中，就是区分的。

生，活！

dolymood

身在帝都的一名程序猿。

我的Github地址：dolymood