Author：Chemandy
第一章 CSS和文档
略
第二章 选择器
1. 选择器分类：
1) 文档结构选择器
①元素选择器：如p{} span{}
②集团选择器：p, body, img, div{}
③类选择器：.class1{}
④多类选择器：.class1.class2{}
⑤ID选择器：#di1{}
⑥后代选择器：body ul li{}
⑦直接后代选择器：div > p{}
⑧相邻兄弟选择器： div + p{} 说明：选择div元素后面的p元素兄弟节点。
2) 属性选择器
①简单属性选择：h1[class]{} 说明：含class属性的h1
②具体属性选择：h1[class="head"]{} 说明：含class属性值为head的h1
③空格分离属性选择：h1[class~="head"]{} 说明：class属性值含有head或空格+head的h1
④开头属性选择：h1[foo^="bar"]{} 说明：选择foo属性以bar开头的h1
⑤结尾属性选择：h1[foo$="bar"]{} 说明：选择foo属性以bar结尾的h1
⑥包含属性选择：h1[foo*="bar"]{} 说明：选择foo属性含有bar字符片段的h1
⑦杠开头属性选择：h1[foo|="bar"]{} 说明：选择foo属性以bar开头或bar-开头的h1
3) 伪类选择器
①:link
②:visited
③:hover
④:active
⑤:focus
⑥:first-child，例p:first-child{}选择作为第一个子节点的p元素
⑦:last-child
4) 伪元素选择器（选择的是文本）
①:first-letter
②:first-line
第三章 结构和层叠
1. 选择器特殊性：
①对于选择器中给定的各个ID属性值，加0,1,0,0
②对于选择器中给定的各个类属性值、属性选择或伪类，加0,0,1,0
③对于选择器中给定的各个元素和伪元素，加0,0,0,1
④结合符合（>和+）和通配选择器（*）对特殊性没有任何贡献，0,0,0,0。
⑤内联样式，特殊性为1,0,0,0
⑥继承样式没有没有特殊性，连0特殊性都没有，可以被通配选择符的0特殊性覆盖。
⑦!important，独立，特殊性最强，强于上面所有。
2. 层叠
①按特殊性比较。
②相同特殊性，后面出现的权重高。
第四章 值和单位
略
第五章 字体
1. font-family：
2. font-weight:
3. font-size：使用百分比长度时，根据父元素的字体大小计算。font-size确定em框大小。
4. font-style：有两个非默认值：italic（斜体字体）、oblique（倾斜文本）
5. font-variant：字体变形，一个非默认值small-caps要求使用小型大写字母文本。
6. font：属性值有顺序规定：[[<font-style>||<font-variant>||<font-weight>]?<font-size>[/<line-height>]?<font-family>]|系统字体
7. font-face规则，可用于匹配更多字体。
8. 上述各属性都有继承性。
第六章 文本属性
1. text-indent：只用于块级元素，有继承性，百分数根据当前font-size指定。
2. text-align：只用于块级元素，有继承性。
3. line-height：可用于所有元素，有继承性。百分数根据当前字体大小指定。
4. vertical-align：只应用于行内元素和表个单元。无继承性。百分数按当前line-height计算。
5. word-spacing：有继承性。
6. letter-spacing：有继承性。
7. text-transform：处理文本大小写，有继承性。uppercase | lowercase | capitalize|
8. text-decoration：无继承性。
9. text-shadow：三个长度，两个相对于左上角的偏移量和一个模糊半径。
10. white-space：各个值：nowrap | pre | pre-wrap | pre-line |
11. direction：有继承性，可用于所有元素。值：ltr | rtl
12. unicode-bidi：值：embed | bidi-override
第七章 基本视觉格式化
1. 块级元素
1) 块级元素的总宽度：外边距+边框+内边距+内容宽度。
2) 负外边距的应用，会影响块级元素总宽度的计算。
3) 水平外边距auto则自动占据父元素宽度。
4) 边距百分数值是相对于父元素计算的。
5) 块级元素，垂直内容高度若无定义，一般为包含内容高度。若定义外垂直边距为auto，则自动设为0。
6) 块级元素垂直外边距会合并。
2. 行内元素
1) 匿名文本：没有包含在内行元素内的字符串。
2) em框：font-size定义的单个字的文本内容框。
3) 内容区：由em框组成的文本内容片区域。
4) 行间距：line-height与font-size值之差
5) 行内框：内容区+行间距区
6) 行框：行内框的最高点和最低点组成。
7) 垂直内、外边距对行框没有影响。但确实存在。
3. display部分值
1) inline-block：行内快元素，类似与<img>的替换元素。
2) run-in：如果一个元素生成run-in框，而且该框后面是一个块级框，那么该run-in元素将成为块级框开始出的一个行内框。
第八章 内边距、边距和外边距
1. width宽度和height高度不能应用到行内元素。margin和padding可以应用到任何元素。
2. height、width、margin、padding的百分数都是相对父元素的height和width来设定的。
3. 边框border默认样式为none，若果不设置border样式，则无论border-width设多少都不会显示边框。
4. 不论行内元素的边框定义怎样的宽度和高度，元素行高不变。但内、外边距会影响显示宽度。
第九章 颜色和背景
1. color前景色：影响字体颜色，边框颜色，表单框的颜色。
2. 图像的偏移，background-position:属性若果用百分数表示，则是图像与元素框的相应百分比的点对齐，先是x轴，再是y轴。
3. backgournd-attachment:属性，默认为scroll，通过声明fixed可以使图像相对于可视区固定，图像从视窗左上角开始平铺。
第十章 浮动和定位
1. 所有元素都可以浮动，浮动后元素从正常文档流删除，但还是会影响布局。所有浮动元素会生成一个块级框，包含块是最近的祖先块级元素。
2. clip
3. 浮动元素的布局规则：
①浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界。
②浮动元素的左（或右）外边界必须是源文档中之前出现的左浮动（或右浮动）元素的右（左）外边界，除非后出现浮动元素的顶端在先出现浮动元素顶端的下面。
③左浮动元素的右外边界不会在其右边右浮动元素的左外边界的右边。
④一个浮动元素的顶端不能比起父元素的内顶端更高。
--------------------下面几点比较关键---------------
⑤浮动元素的顶端不能比之前所有浮动元素或块级元素的顶端更高。
⑥如果源文档中一个浮动元素之前出现另一个元素，浮动元素的顶端不能包含比该元素所生成框的任何行框的顶端更高。
⑦左（或右）浮动元素的左边（右边）有另一个浮动元素，前者的右外边距不能在其包含块的右（左）边界的右（左边）。
⑧浮动元素必须尽可能高地放置。
⑨左浮动元素必须向左尽可能远，右浮动元素则必须向右尽可能远。
4. 如果一个浮动元素在内容流过的边上有负外边距（例如，右浮动元素上的左外边距为负）：
①行内框与一个浮动元素重叠时，其边框、背景和内容都在该浮动元素“之上”显示。
②块框与一个浮动元素重叠时，其边框和背景在该浮动元素“之下”显示，而内容在浮动元素“之上”显示。
5. 清除claear的本质：
①在css2.1中，引入一个清除区域（clearance），清除区域是在元素上外边距之上增加额外间隔，不允许任何浮动元素进入这个范围内。
②要确保一个清除元素（设置clear属性的元素）的顶端与一个浮动元素的低端之间有一定空间，可以为浮动元素本身设置一个下外边距。
6. 偏移属性值是百分数的话基数是父元素的宽高。
7. 宽度自动延伸为父元素宽度，高度根据内容变化。
8. IE6不支持min-height、min-width、max-width、max-height。
9. 绝对定位元素可以通过clip属性进行内容裁剪，配合overflow可以实现内容裁剪的显示。
10. z-index只用在绝对定位上。
11. 固定定位在ie6下会出错。
第十一章 表布局
1. display指定类型为表格中的某一种类型时，会触发表格化的匿名对象生成。
2. 表单元格边框类型有两种：分隔边框模型和合并边框模型。
3. Empty-cell属性可以使表格单元发生visibility为hidden的情况。
4. IE6不支持css属性cell-spacing调整单元格间距，需要使用table的cellspacing属性。
5. table-layout可以触发两种布局模型：固定布局和自动布局。
□固定布局速度快：主要取决于首行单元格宽度来设定列宽，若为auto，则自动设置，不管其他行的宽度。
□自动布局速度慢：根据各个单元格的宽度进行设定。
6. table设置height会被看做最小高度。
7. 表单元格的内容垂直对齐可以使用vertical-align，对表单元格可设属性有4个（其他会忽略）：top、bottom、middle、baseline。
第十二章 列表与生成内容
1. list-style-type是有继承性的。
2. 生成内容：
①IE6、IE7都不支持。
②生成内容必须应用于:before和:after元素。
③可以使用quotes属性生成引号，再在生成内容属性值中插入。
④配合计数器可以生成计数目录。counter-reset、counter-increment。
第十三章 用户界面样式
1. 可以在font中使用系统字体，可以在color和background-color中设置系统颜色。
2. cursor可以设置鼠标形状。
3. 轮廓：不参与文档流，设置轮廓不会影响文档宽度。
第十四章 非屏幕媒体
1. 暂无
来源：https://www.cnblogs.com/chemandy/archive/2011/08/20/2146388.html