读书笔记 精通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通过一个称为层叠的过程处理样式冲突。层叠给每个规则分配一个重要度。然后根据选择器的特殊性决定规则的次序。如果规则的特殊性相同那么后定义的规则优先。

重要性和特殊性

重要性

层叠采用以下重要次序

1. 标有！important的
2. 用户样式
3. 标有！important的作者样式
4. 作者样式
5. 用户样式
6. 浏览器/用户代理应用的样式

特殊性

特殊性分为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属性。（但是会影响表现性）