《CSS权威指南》读书笔记

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. 暂无