结构与层叠
每个合法的文档都会生成一个结构树，有了结构树元素的祖先、属性兄弟元素等等创建选择器来选择元素，这是CSS继承的核心。继承是从一个元素向后代元素传递属性值所采用的机制。面向一个元素使用哪些值时，用户代理不仅要考虑继承，还要考虑特殊性，另外需要考虑声明本身的来源，这个过程就叫层叠。
本文讨论3种机制之间的关联：特殊性、继承和层叠。
特殊性
同一元素可以使用不同的方法来选择元素。但是每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则的个个声明。如果一个元素有两个或多个冲突的属性声明，那么最高特殊性的声明会胜出。
特殊性计算规则：
1）对于选择器中给定的各个ID属性值，加0100
2）对于选择器中给定的各个类属性值，属性选择或伪类，加0010
3）对于选择器中给定的各个元素和伪元素，加0001
4）结合符和通配选择器对特殊性没有任何贡献
对于重叠的选择，如果符合多种规则，这些规则将累加计算。0011特殊性优于0001，0100优于0022。这是因为值从左向右排序。
题目：下列选择器同指向同一元素，容器的颜色应该为什么颜色？
- div.container div.bright{background: #996699;}
- div.bright{background: #99CCCC;}
- div#id216{background: #FFFF66;}
- #id216{background: #CC3333;}
- div.container div#id216{background: #333399;}
考察特殊性，答案#333399;特殊性分别为：0022，0011，0101，0100，0112
注意：特殊性不是解决冲突的全部，实际上，所有样式冲突的解决都由层叠来处理。
到目前为止，我们只见过以0开头的特殊性。一般地，第一个0是为内联样式声明保留的，他比所有其他声明的特殊性都高。
- <div class ="bright" id ="id216" style="background:#003300"></div>
有时候某个声明可能非常重要，超过了所有其他声明，并允许在这些声明的结束分号之前插入！important来标志。
- #id216{ background: #990033 !important;}
当样式表增设！important时，内联冲突样式将会失效，以important为准。
继承
基于继承机制，样式不仅应用到指定的元素，还会应用到它的后代元素。
一般地，大多数框模型属性（包括外边距、内边距、背景和边框）都不能继承，其原因是因为如果这些属性被继承，文档将会变得更加混乱。
继承的值根本没有特殊性，甚至连0特殊性都没有。（0特殊性比无特殊性要强）
不加区别地使用通配选择器可能存在的问题之一，由于他能匹配任何袁术，所以通配选择器往往有一种短路继承的效果。
层叠
如果特殊性相等的两个规则相同同时应用到同一个元素，浏览器会通过层叠解决这个冲突。
css所基于的方法就是让样式层叠在一切，这是通过结合继承和特殊性做到的。层叠的规则：
1）找出所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。
2）按显式权重对应用到该元素的所有声明排序。标志!important的规则的权重要高于没有 !important标志的规则。声明权重考虑5级：（权重有大到小顺序依次为）
1.读者的重要声明
2.创作人员的重要声明
3.创作人员的正常声明
4.读者的正常声明
5.用户代理声明
3）按特殊性对应用到给定元素的所有声明排序。有较高特殊性的元素权重要大于有较低特殊性的元素。
4）按出现顺序对应用到给定元素的所有声明顺序。一个声明在样式表或文档中越后出现，他的权重就越大。。如果样式表中有导入的样式表，一般认为出现在导入样式表中的声明在前，在主样式表中的所有声明在后。
注意：多类选择符，以空格分割不同的类名，但是根据层叠的规则，元素中的类的顺序无关，而是与样式表声明的位置有关。
- <div class = "box red blue yellow"></div>
red和blue和yellow设置冲突的背景颜色属性，但是，box最终显示的颜色和html中这三个类顺序无关。声明样式表如下：
- .red{background: red;}
- .yellow{background: yellow;}
- .blue{background: blue;}
box最终显示的颜色以声明的顺序有关，最终显示为blue背景颜色。
基本视觉格式化
css包含如此开放、如此强大的一个模型，对于这样一个模型，可以有无数种方法结合应用各种属性，可以得到的效果数不胜数。
基本框
css假定每个元素都会生成一个或多个矩形框，这称为元素框。各元素中心有一个内容区，这个内容区周围包含可选的内外边距和边框（之所以认为是可选，是因为可以设置为0）。
对不同类型的元素格式化时存在着差别。块级元素的处理就不同于行内元素，而浮动元素和定位元素也分别有各自不同的表现。
包含块
每个元素都相当于包含块摆放；可以这么说，包含块就是一个元素的”布局上下文“，css2.1定义了一系列规则来确定元素的包含块。
常用名词：
正常流，文本从左向右，从上向下显示。要让一个元素不在正常流中，唯一的办法是使之成为浮动或定位元素。
非替换元素，如果元素的内容包含在文档中，则称之为非替换元素。
替换元素，指用作为其他内容占位符的一个元素。替换元素的一个经典例子就是img元素。它只是指向一个图像文件，这个文件将插入到文档流中该img元素本身的位置。
块级元素，这是指段落、标题或div