读书笔记 精通CSS 高级Web标准解决方案（第2版）1~3章
在读CSS权威指南的时候明显的感觉到那本书实在是有点outofdate，遂弃之。选择了读现在的这本，虽然这本书并不比权威指南新多少…
这几天也有读别人的博客，大神们的学习方法还有经验总结。其中一点我觉得受用的，是除了部分书之外，其他的书要尽可能快速的读完，找到其中的要点和精髓，通过实践逐个击破。毕竟时间的成本才是最贵的。
在读这本书的时候我尝试运用这种方法进行，效果还不错。
一本比较基础的CSS书籍，以下是每章零碎的知识点。
第一章 基础知识
- 设计代码的结构
- 命名约定
- 什么时候使用ID和类名
- 微格式
- 文档类型、doctype切换和浏览器模式
设计代码的结构
早期HTML标签充斥着没有结构意义的样式标签。产生的问题是网页越来越有表现力，但是代码变得越来越难以理解和维护。布局脆弱，很容易被破坏。如果产生bug，对bug的定位会非常困难。即使是简单地修改代码，可能需要修改整个网站。
- HTML代码意义的重要性
和表现性的页面相比，有意义的页面更容易处理，搜索引擎更容易识别出标题并予以重视，更重要的是有意义的标记可以简便地将元素调整为你所需要的样式。
命名约定
在分配ID和类名时，一定要尽可能的保持名称和表现方式无关。因此，应该根据“他们是什么”来为元素命名，而不是根据“他们外观如果”来命名。这种方式让代码更有意义，而且避免代码与设计不同步。有意义的类名最大的有点是可以在整个网站中重用他们。
什么时候用ID和类名
换句话说，如果在绝对确定在这个元素只出现一次的情况下，才应该使用ID。如果你认为以后可能需要相似的元素，就实用类。
无论如歌，对类名的过度依赖是不必要的，如果你发现你的代码中添加了很多类，那么很可能意味着你的HTML文档结构有问题。
div和span
许多人误以为div元素没有语义，但是div实际上代表部分（division）。它将文档分割为几个有意义的区域
div可以对块级元素进行分组，而span元素可以对行内元素进行分组或标示（终于知道span是干啥的了。。）
文档类型、DOCTYPE切换和浏览器模式
文档类型
DOCTYPE当前有两种风格，严格（strict）和过度（transitional）。过度DOCTYPE的目的是帮助开发人员从来版本迁移到新版本。因此HTML4.01和XHTML1.0的过度版本仍然允许使用已经废弃的元素。
浏览器模式
浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了2种呈现模式：标准模式和混杂模式（quirks mode）。在混杂模式中，页面以一种宽松的向后兼容的方式显示。
DOCTYPE切换
DOCTYPE切换是浏览器用来区分遗留文档和符合标准的文档的手段。无论是否编写了CSS，如果选择了错误的DOCTYPE，那么页面将以混杂模式呈现。其行为可能有错或不可预测。
第二章 为样式找到目标应用
- 常用的选择器
- 高级选择器
- 新的CSS3选择器
- 特殊性和层叠的作用
- 计划和维护样式表
- 如何在代码中加注释
常用的选择器
元素选择器或者简单选择器
p{color:black}
h1{font-size:large}
后代选择器
blockquote p{paddind:2px}
伪类
a:link{}
a:focus{}
a:hover{}
a:active{}
注意
IE6只注意用于锚链接的:active 和：hover，会完全忽略:focus。IE7在任何元素上都支持：hover，但是忽略：active和：focus。
通用选择器
*{}
高级选择器
子选择器和相邻同胞选择器
#nav>li{}/* 子选择器 */
#nav>li+li{}/* 同胞选择器 */
注意
后代选择器选择一个元素的所有后代，相邻同胞选择器只选择相邻的下一个元素。IE7和更高版本都支持子选择器，但是在IE7中有一个小BUG，如果父元素和子元素之间有HTML注解，就会出现问题。
属性选择器
a[href^="http://www.baidu.com"]/* 以..开头 */
a[href$=".jpg"]/* 以..结尾 */
a[href*="baidu"]/* 只要包含.. */
层叠
CSS通过一个称为层叠的过程处理样式冲突。层叠给每个规则分配一个重要度。然后根据选择器的特殊性决定规则的次序。如果规则的特殊性相同那么后定义的规则优先。
重要性和特殊性
重要性
层叠采用以下重要次序
- 标有！important的
- 用户样式
- 标有！important的作者样式
- 作者样式
- 用户样式
- 浏览器/用户代理应用的样式
特殊性
特殊性分为4个成分等级，a、b、c、d。
- 如果样式是行内样式，a=1
- b等于ID选择器的总数
- c等于类、伪类、属性选择器的数量
- d等于类型选择器和伪元素选择器的数量
注意
- 继承，子类选择器和相邻同胞选择器无特殊性。
- ,统配选择器的特殊性为0，0，0，0
在主体标签上添加类和ID
在body上应用类和ID，这么做之后可以根据页面或在站点范围内覆盖样式。例如，如果希望新的页面具有特殊布局，那么可以在页面主体元素上添加一个类名，并且覆盖它的样式。
继承
人们总把继承和层叠混为一谈，尽管他们看起来有点相似，但是这两个概念实际上是很不一样的。恰当的使用层叠可以简化CSS，恰当的使用继承可以减少代码中选择器的数量和复杂性，但是大量使用继承可能会使样式来源变得困难。
规划、组织和维护样式表
导入样式表(@import url(//css/layout,css))比资源链接样式慢
在使用多个CSS文件时，多个文件会导致从服务器发送过多数据包，这些数据包的数量（而不是内容）会影响下载时间。
浏览器只能从同一个域下载数量有限的文件。对于老浏览器是2个，现代浏览器时8个。
（我觉得开发的时候可以写成多个，但是部署的时候最好只有一个样式表）如果CSS文件非常长，那么寻找特定的样式会很困难。一种改进的方法是在每个注释前添加一个标志。例如：/* @group typography */
设计代码的结构
为了代码的维护，最好把样式表划分为几大块。显然，常常把最一般的规则放在最前面。这包括应用于body标记的、应该由站点上所有元素继承的样式。接下来是最可能需要的所有全局reset样式，然后是链接、标题、和其他元素（我觉得这个对代码的规范相当重要，结构清晰的样式表会给人眼前一亮的感觉，至少我是这么看的）
一般性样式
- 主体样式
- reset样式
- 链接
- 标题
- 其他元素
辅助样式
- 表单
- 通知和错误
- 一致的条目（ul和ol吗？）
页面结构
- 标题、页脚和导航
- 布局
- 其他页面结构元素
页面组件
- 各个页面
覆盖
使用风格统一的大注释分割各个部分
/* @group general styles
——————-*/
/* @group helper styles
——————-*/
/* @group page structure
——————-*/
/* @group overrides
——————-*/
样式指南
模式组合是一个页面或一系列页面，他们使用当前的样式表显示站点上可能出现的每种样式排列组合，从标题级别和文本样式知道页顶的内容和布局类型。这些页面为后端和前端开发人员提供极具价值的资源。好处是可以检查对CSS的修改是否产生了问题。
第三章 可视化格式模型
- 盒模型的复杂性和特点
- 如何以及为什么使用外边距叠加
- 绝对定位和相对定位的差别
- 浮动和清理是如何工作的
盒模型概述
盒模型是CSS的基石质疑，它制定元素如何显示以及如何相互交互。页面上每个元素都被看做一个矩形框，这个框由元素的内容、内边距、边框和外边距组成
内边距出现在内容区域的周围。如果在元素上添加背景，那么背景会应用于由内容和内边距组成的区域。
元素框是内容区域、内边距、边框、外边距总的大小
CSS2.1还包含outline属性、与border不同，轮廓绘制在元素框之上，所以他们不影响元素的大小或定位。但是IE7和更低不支持轮廓。（outline是啥还存疑）
width和height指的是内容区域的宽度和高度。增加内边距边框和外边距不会影响内区域的尺寸，但会增加元素框的总尺寸。
外边距叠加
外边距叠加有2种情况。非包含和非包含关系元素的外边距叠加。
定位概述
可视化格式模型和定位模型
可视化格式模型
p、h1或div元素常常称为块级元素。这意味着这些元素为一块内容，即行块。与之相反，strong和span等元素称为行内元素，因为他们的内容显示在行中，即行内框。
CSS中有3种定位机制：普通流、浮动和绝对定位。
普通流中元素的位置由元素在HTML中的位置决定
行内框就是行内元素所占的框
行内框在一行中水平排列。可以使用水平内边距、边框和外边距调整水平间距。但是垂直内边距、边框和外边距不影响行内框的高度。在行内框上设置显式的高度和宽度没有作用。行内框尺寸的唯一的修改方法是修改行高或水平边框、内边距或外边距
inline-block可以让元素像行内元素一样水平地一次排列，但是框的内容仍然符合会级框的行为。例如可以显式的设置高度宽度、垂直外边距和内边距。（IE8及以上）
相对定位
相对定位相对的是它在普通流中的位置。可以通过top、left等属性来设置位置
在使用相对定位时，无论是否移动，元素仍然占据原来的空间。
绝对定位
绝对定位与使元素的位置与文档流无关，因此不占据空间。普通文档流中的其他元素布局就像绝对定位的元素不存在一样
相对定位是“相对于”元素在文档流的初始位置，而绝对定位是相对于距离它最近的已定位祖先元素，如果不存在已定位的祖先元素，那么久响度对html元素节点。
浮动和清理
浮动让元素脱离文档流，不再影响不浮动的元素。实际上，如果元素后面有一个文档流中的元素，那么这个元素的框会表现得想浮动根本不存在一样。但是框的文本内容会受到浮动元素的影响，会移动以流出空间。用技术术语来说，浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因此行框围绕浮动框。实际上，创建浮动框可以围绕图像。
浮动元素不占据空间。但是它后面元素（特别是包含文本的元素）的行框会给它流出空间。就酱紫
清理浮动的3中方案
- 让容器也浮动，那么内部的元素将重新占据空间
- 在尾部添加空的元素(一般是div)，使用clear:both
- 给容器元素添加overflow:hidden属性。（但是会影响表现性）