精通CSS：高级Web标准解决方案（第二版） 初读笔记

2.1 常用的选择器

1. 类型选择器  p { color: black; }

2. 后代选择器  blockquote p { padding-left: 2em; }

3. ID选择器  #intro { font-weight: bold; }

4. 类选择器  .date-posted { color: #cccccc; }

5. 伪类  a:link { color: blue; }

6. 通用选择器  * { padding: 0; }

7. 子选择器  #nav>li { padding-left: 20px; }

8. 紧邻同胞选择器   h1+p{ font-size: 1.4em; }

紧邻同胞选择器可用于定位同一个父元素下紧跟某个元素之后的一个元素；

9. 一般同胞选择符~  h2~a { color: red; }

一般同胞选择符可用于定位同一个父元素下某个元素之后的所有元素;

10. 属性选择器

可以根据某个属性是否存在寻找元素:  arconym[title] { border-bottom: 1px dotted #999; }

也可以根据属性的值来寻找元素：a[rel="nofollow"] { padding- right: 20px; }

如果有多个属性值，可以这样: a[rel~="co-worker"] { padding-left: 20px; }

2.3.3 层叠和特殊性

（1）层叠的重要度次序

• 标有!important的用户样式。
• 标有!important的作者样式。
• 作者样式。
• 用户样式。
• 浏览器/用户代理应用的样式。

（2）规则的特殊性计算。

选择器的特殊性分成4个成分等级: a、b、c和d;

• 如果样式是行内样式，那么a=1。
• b等于ID选择器的总数。
• c等于类、伪类和属性选择器的数量。
• d等于类型选择器和伪元素选择器的数量。

如果两个规则的特殊性相同，那么后定义的规则优先。

2.3.4 继承

直接应用于元素的任何样式会覆盖继承而来的样式。这是因为继承而来的样式的特殊性为空。

Firebug是一个方便的Firefox附加组件，可以用它检查各个元素，查明他们的样式来源。

2.4.1 对代码应用样式

1. 设计代码的结构

• 一般性样式(@group general styles)
• 辅助样式(@group helper styles)
• 页面结构(@group page structure)
• 页面组件(@group page components)
• 覆盖(@group overrides)

2. 自我提示

gotcha: 使用@todo来表示某些东西需要在以后进行修改、修复或复查。用@bugfix表示代码或特定浏览器遇到的问题。用@workaround来表示并不完善的权宜之计。

3.1 盒模型概述

1. 当一个元素包含在另一个元素中(假设没有内边距或边框将外边距隔开)，他们的顶和/或底外边距也会发生叠加。

2. 假设有一个空元素，他有外边距，但是没有边框或内边距。在这种情况下，顶外边距和底外边距就碰到了一起，他们会发生叠加。

3. 外边距叠加的重要意义：以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的顶外边距。如果没有外边距叠加，段落之间的空间是页面顶部的两倍。如果发生外边距叠加，段落之间的顶外边距和底外边距就叠加在一起，这样各处的距离就一致了。

4. 只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。

3.2 定位概述

可视化格式模型和定位模型，理解这两个模型的差异是非常重要的，因为他们一起控制着如何在页面上布置每个元素。

3.2.1 可视化格式模型

可以使用display属性改变生成的框的类型。

CSS中有3中基本的定位机制：普通流、浮动和绝对定位。

行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整他们的水平间距。但是，垂直内边距、边框和外边距不影响行内框的高度。同样，在行内框上设置显式的高度或者宽度也没有影响。由一行形成的水平框称为行框，行框的高度总是足以容纳它包含的所有行内框。但是，设置行高可以增加这个框的高度。因此，修改行内框尺寸的唯一办法是修改行高或者水平边框、内边距或外边距。

对于上面那句话，我是这么理解的。行框容纳它所包含的所有行内框，这就意味着行框是一个整体，必须要有统一的高度，不然一行看起来就会高低不平。所以不能通过某个行内框来设置其高度，应该通过行高来设置整个行框的高度。

但是，元素的display属性允许设置为inline-block。这个声明让元素像行内元素一样水平地依次排列，但是，框的内容依然符合块级框的行为，例如能够显式地设置高度、宽度、垂直外边距和内边距。

将一些文本添加到一个块级元素(比如div)的开头时，即使没有把这些文本定义为块级元素，它也会被当成块级元素对待。<div>some text</div>。在这种情况下，这个框称为匿名框。

3.2.2 相对定位

相对定位被看做是普通流定位模型的一部分，因为元素的位置是相对于它在普通流中的位置的。使用相对定位时，无论是否移动，元素依然会占据原来的空间。因此，移动元素会导致他覆盖其它框。

3.2.3 绝对定位

绝对定位使元素的位置和文档流无关，因此不占据空间。绝对定位的元素的位置是相对于距离它最近的那个已定位的祖先元素确定的。(这里我进行了一点测试，position共有五个可取的属性值——relative, absolute, fixed, inherit 和 static；测试后我认为“已定位”的意思为祖先元素的position=relative/absolute/fixed. 如果是继承(inherit)的话也应该要继承前面的3个值。)如果元素没有已定位的祖先元素，那么他的位置是相对于初始包含块的。

固定定位（fixed）是绝对定位的一种，固定定位的元素总是出现在窗口中相同的位置。

3.2.4 浮动

如果浮动的元素后面有一个文档流的元素，那么这个元素的框会表现得像浮动元素根本不存在一样。但是，框的文本内容会受到浮动元素的影响，会移动以留出空间。用技术术语来说，浮动元素旁边的边框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。

要想阻止行框围绕在浮动框的外边，需要对包含这些行框的属性应用clear属性。

1. P49-P51例子的理解（感谢chrome的"审查元素"）

P49 "在清理元素时，浏览器在元素顶上添加足够的外边距，使元素的顶边缘垂直下降到浮动框下面"。因此，在P51 添加了一个空元素<br class="clear" />时，<br>元素的外边距包含了<img>和<p>元素，当然，外边距是透明的，没有背景颜色。但是，要记住，<br>元素是切切实实包含在<div>元素中的，<br>的外边距也是<div>内容的一部分，因此，灰色的背景颜色来源于<div>元素。

2. 我们有理由坚信，浮动元素虽然脱离的正常的文档流，但是其实他们是都在另外一个维度的文档流中。

例如前面的3个<p>元素一起向左浮动，最后的效果是他们并排浮动，而不是覆盖浮动。

这里让父元素也向左浮动，等于让父元素也进入到了另一个维度的文档流，父子关系重新维系，<div>元素包含了<img>元素和<p>元素。

3. 添加一个点，因为它是个非常小的不引人注意的字符。以为不希望新内容占据垂直空间或者在页面上显示，所以需要将height设置为0，将visibility设置为hidden。因为被清理的元素在它们的顶外边距上添加了空间，所以生成的内容需要将它的display属性设置为block。这样设置之后，就可以对生成的内容进行清理：

.clear:after {
  content: "."
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}