本篇文章是对这几天看完 Charles Wyke-Smit 的 《CSS 设计指南》 后的一些学习笔记与心得，笔者好像是大一的时候开始接触网页设计，由于并不是计算机专业的，所以所有都是自己自学的，记得当时自己对 CSS 基本上什么都不懂，甚至连怎么在 CSS 中选择某个 class 和 id 都不懂，然后就直接下载一些源码来看，后来看到这些 CSS 文件中有 . 和 # ，然后就连蒙带猜的学会了怎么使用它们，然后就在源码中看到什么不懂的就直接上 W3School 中查找 API，这样也慢慢的让我掌握了 CSS 中常用的部分，并且制作网页时大多数的问题都能够得到解决。由于期间自己的态度摇摆不定也想学 php、 java、 Android 等等，然而结果可想而知，并没有坚持下来，如今大三也快结束马上要进入准大四的阶段了，感觉不能在这样下去了，前段时间一直在思考一个问题，自己到底喜欢什么，然后回想自己大学以来花的最多时间的地方是什么，最终的出的结果就是——前端，尽管前端涉及的知识很多，但这并不能阻碍我对它的热情。决定下来后的第一件事情就是系统的巩固一下自己的知识体系，然后就有了这篇 《CSS 设计指南》 的学习笔记，这本书也是比较多人推荐并且好评比较多的一本 CSS 入门书。废话说了这么多然而并没有什么 * 用，赶紧进入正题才是，下面主要是笔者对某些章节的总结，并不是每一个章节的总结，同时也有笔者对书本内容的一些个人观点和一些拓展。
由于文章比较长，这里我将文章分为多个部分，这篇文章文第一部分
第一章 HTML 标记与文档结构由于 CSS 作用的对象是 HTML ,所以作者在这章主要先讲了一些基本的 HTML 标签的用法和结构。
1.2 HTML 文档剖析作者在这节主要讲了一个 HTML 页面所需的最基本的文档结构如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 这里是网页内容 --></body></html>首先 <!DOCTYPE html> 是 HTML5 中新的文档类型声明语法，相比 HTML4 的冗长文档类型声明语法来说 HTML5 是大大的简化了。
1.2.2 块级元素和行内元素
作者在这一节介绍了两个比较重要的概念————块级元素和行内元素，默认情况下块级元素会始终占居一行，而行内元素并不会。除了 table 元素的 display 属性比较特殊以外，基本上所有的 HTML 元素的 display 的属性值要么是 block，要么是 inline。作者的一个思想是，无论你想了解哪个 HTML 元素，第一个要问的问题就是：它是块级元素还是行内元素，然后在编写标记的时候预想到这个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用 CSS 重新定位它，因为块级元素和行内元素在定位上有很大的区别，后面的拓展会详细说明。
块级元素盒子（一个很重要的概念————盒模型，后面会详细说明）会扩展到与父元素同宽，这也是为什么块级元素会占居一行的原因了，因为所有块级元素的父元素都是 body，而它的默认宽度就是浏览器的视口（viewport）大小，所以默认情况下块级元素的宽度也和浏览器的视口一样宽，这样以来，一个块级元素旁边也就没有空间来容纳另一个块级元素了。
相比于块级元素会扩展到与父元素同宽，然而行内元素的行为却是恰恰相反，它会尽量的「收缩包裹」其内容（也是盒模型的概念），这也就是为什么几个行内元素会并排显示在一行直到它们排满一行才会另起一行，而每个块级元素会直接另起一行的原因了。
拓展：
作者在这一节中并没有对块级元素和行内元素的一些其他特性进行详细的解释，在这里笔者对它们的一些特性知识进行拓展。首先先列出一些常见的块级元素和行内元素：
<!-- 常见的块级元素 -->div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, PRe, blockqoute, canvas, ol, ul, dl
<!-- 常见的行内元素 -->span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code之前作者提到过无论你想了解哪个 HTML 元素，第一个要问的问题就是：它是块级元素还是行内元素，因为它们在盒模型上的表现有很大的不同，不过在了解它们的不同之前我们还得先知道另外一个概念————替换元素和非替换元素，其中替换元素就是指浏览器是根据元素的属性来判断具体要显示的内容的元素，比如 img 标签，浏览器是根据其 src 的属性值来读取这个元素所包含的内容的，常见的替换元素还有 input 、textarea、 select、 object、 iframe 和 video 等等，这些元素都有一个共同的特点，就是浏览器并不直接显示其内容，而是通过其某个属性的值来显示具体的内容，比如浏览器会根据 input 中的 type 的属性值来判断到底应该显示单选按钮还是多选按钮亦或是文本输入框。而对于非替换元素，比如 p、label 元素等等，浏览器这是直接显示元素所包含的内容。看到这里你应该大概的知道了什么是替换元素和非替换元素了。
对着两个概念有了大概的了解后就可以对 block 和 inline 在盒模型上的表现差异进行了解了，首先是 margin ，W3C 对其所支持了元素对象是这么定义的：
Applies to: all elements except elements with table display types other than table-caption, table and inline-table英语不是很好，没太明白这句话的意思，我的理解就是所有元素都支持 margin 除了 display 属性值为 table-caption 和 table-inline 以外的所有表格显示类型比如 table-row-group、 table-cell、 table-row 和 table-header-group等等,但是为了验证我的理解，我发先 display 属性值为 table 的元素也支持，可能是我对原文标准的理解有误。但还有一个要特别注意的是 margin-top 和 margin-bottom 两个属性比较特殊，它们对非替换行内元素没有效果，下面是 W3C 上对于 margin-top 和 margin-bottom 支持对象的介绍：
Applies to: all elements except elements with table display types other than table-caption, table and inline-tableThese properties have no effect on non-replaced inline elements.前面一句和之前对 margin 的描述是一样的，这毫无疑问，下面这句话的意思是这些（ margin-top 和 margin-bottom ）属性对非替换行内元素没有效果比如 a 和 span，注意这里是非替换行内元素而不单单是非替换元素或者是行内元素。比如 img 就是一个行内元素， margin-top 和 margin-bottom 对它是有效果的，因为它是一个替换元素而不是非替换元素，所以对于「 margin-top 和 margin-bottom 对行内元素没有效果」这种说法是不对的。
而对于 padding 的支持对象，W3C 是这么描述的：
all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column上面这句话的意思是除了表格显示类型为 table-row-group、 table-header-group、 table-footer-group、 table-row, table-column-group 和 table-column 的元素不支持，其他所有的元素都支持。
但这里有些特殊情况需要注意的是，对行内元素比如 span 和 img 设置左右内边距的效果是可见可，但是对行内元素设置上下内边距在有些情况下是不可见的，这些情况又要分为是否为替换元素和是否设置了背景色，为了能更直观的了解这些概念，我在这里做了个表格：
padding-top,bottom是否可见
所以对于「 padding-top 和 padding-bottom 对行内元素没有效果」这种说法也是不对的，因为它们只是对于没有设置背景色的行内非替换元素效果不可见而已，而对于行内替换元素来说，不管是否设置了背景色都是有效果了，并且会把父元素撑开。
说了这么多 block 和 inline-block 的区别，其实除了这两个常见的 display 属性以外还有一个属性也是非常常见的，那就是 inline-block ，没错，这就是前面两种情况的结合体，它既有 block 的特性又有 inline 的特性，比如把一个 display 属性值为 block 或者 inline 的元素属性值设置成 inline-block 后，既可以用只对行内元素有效的 text-align: center; 声明对其进行居中以外，还可以用 padding-top 和 padding-bottom 对元素设置上下内边距而无需对其设置背景色，并且能把父元素撑开。
对于块级元素和行内元素的拓展就暂时到这，如果有不明白或者不对的地方也欢迎指出。
1.3 文档对象模型作者在这一小节只要介绍了 HTML 结构所对应的文档对象模型（DOM,Document Object Model）,DOM 是从浏览器的视角来观察页面中的元素以及每个元素的属性，由此可以得出这些元素的一个家族树。通过 DOM 可以很清晰的看出文档中每个元素之间的关系。比如下面的 HTML 代码的 DOM 的家族树就如下图：
<body> <section> <h1>The Document Object Model</h1> <p>The page's HTML markup structure defines the DOM.</p> </section></body>DOM
上面是一个非常简单的 DOM 结构图，由此你可以和直观的看出 HTML 文档流中每个元素之间的关系，比如到底是父子元素还是兄弟元素。
1.4 小结作者在本章主要讲解了 HTML 标签是怎么为内容提供结构的，以及每个元素会在屏幕上生成什么样子的盒子，比如是行内盒子还是块级盒子，最后又简单的讲解了什么是 DOM ，它是浏览器中文档的模型，而 CSS 可以修改 DOM 中的元素样式属性，从而修改页面本身的布局和外观。
第二章 CSS 工作原理在本章中作者主要讲解了 CSS 如何对 HTML 添加样式的，并且解释了层叠的工作机制比如当元素的同一个属性被多次设置样式后到底应该选择何种样式，这就要靠 CSS 的层叠机制来决定最终应用哪种样式了。
每个 HTML 元素都有一组样式属性，这些属性涉及元素在文档流中显示时的不同方面，比如在文档流中的位置、边框、背景、颜色等等。CSS 就是一种先选择 HTML 元素，然后设定选中元素 CSS 属性的机制。CSS 选择符和要应用的样式构成一条 CSS 规则。
2.2 上下文选择器上下文选择器的格式如下：
标签1 标签2 ｛ 声明｝其中标签2就是我们要选择的目标，而且只有在标签1是标签2的祖先元素（不一定是父级元素）的情况下才会被选中。上下文选择器严格来讲应该叫「后代组合式选择器（Descendant Comninator Selector）」。
还有一点要注意的是，上下文选择器以空格作为分隔符，而分组选择器则以逗号作为分隔符，不要弄混。
2.3 特殊的上下文选择器前面一节作者介绍的上下文选择器是以某个祖先元素作为上下文的，只要目标元素在 DOM 结构「上游」存在这么一个祖先元素即可，无论这个祖先元素和目标元素隔了多少层级都没有关系，但有的时候我们需要比「某个祖先元素」更具体的上下文，这时候我们就可以使用一些特殊的选择器了，比如自选择器 >、 紧邻兄弟选择器 +、一般兄弟选择器 ~ 和通用选择器 *。
2.3.1 子选择器 >
标签1 > 标签2这里的标签2必须是标签1的子元素，也就是说标签1必须是标签2的父元素，而不能是标签2的任何其他祖先元素。
2.3.2 紧邻兄弟选择器 +
标签1 + 标签2在这里标签2必须紧跟在兄弟标签1的后面，否则无效。
2.3.3 一般兄弟选择器 ~
标签1 ~ 标签2在这里标签2必须跟（不一定要紧跟，只需在标签1的后面即可）在其兄弟标签1后面。
2.3.4 通用选择器 *
*通用选择器 * 是一个是一个通配符，代表文档流中的任意元素，不过通用选择器 * 通常会搭配一些其他选择器来使用，比如：
section > *代表 section 的所有子元素，不过一般情况下很少通过通配符来选择某个元素下的所有子元素，因为这涉及到浏览器性能问题，它会影响网页的渲染时间，我们写的时候是从左到右写的，但是浏览器渲染却是从右到左的，就上面这段代码来说，浏览器会先遍历所有的元素，然后在找出哪些元素的父元素是 section，另外举一个例子，有选择器：
div.container #main > .article {}浏览器在渲染时，先把所有类中包含 article 的元素取出来组成一个集合，然后对每一个集合中的元素进行遍历，如果元素的父元素的 id 不为 main 则把元素从集合中删去。 再然后从这个元素的父元素开始向上找，没有找到一个标签名为 div 并且类名中有 container 的元素，就把元素从集合中删去，直到匹配所有的条件，所以在能不使用通配符的情况就尽量不要使用它。
2.4 ID 和类选择器作者在这一节介绍了 id 和 class 选择器，为我们选择元素提供了另一种手段，利用它们可以不考虑元素在文档流中的层次结构，只要在元素中添加了 id 和 class 属性和值，我们就可以通过它们的值来找到目标元素。
可以给 id 和 class 属性设定任何值，但不能以数字或者特殊符号开头。2.4.3 什么时候用 id，什么时候用 class
id 的用途是在页面中唯一地标识元素，所以每个页面中每一个 id 属性值都是独一无二的。而 class 的目的是为了标识一组具有相同特征的元素，也就是说一个页面中可以出现多个相同的类。
对于什么时候用 id 这个问题作者的观点是：
每一个顶级区域都应该添加一个 id，从而得到非常明确的上下文关系，以便编写 CSS 时只选择嵌套在相应区域内的标签。对于什么时候使用 class，由于 class 的目的是为了标识一组具有相同特征的元素，所以如果当页面中有一组元素具有某种相同的特征，就应该毫不犹豫的时候 class 了。
但是这里也应该注意不要乱用类，避免造成类泛滥，例如：
<nav> <ul> <li class="boy"><a href="#">Alan</a></li> <li class="girl"><a href="#">Andrew</a></li> <li class="boy"><a href="#">Angela</a></li> <li class="boy"><a href="#">Angus</a></li> <li class="girl"><a href="#">Anne</a></li> <li class="girl"><a href="#">Annette</a></li> </ul></nav>上面这个例子就是一个典型的类泛滥。
2.4.4 id 和 class 的小结
对于什么时候用 id 和什么时候用 class，我想每个人都有不同的看法，这里写说一下笔者的观点，笔者认为能不实用 id 就尽量不使用 id，实际情况是笔者基本不在 CSS 中使用 id，因为在 CSS 的层叠机制中，id 的权重是 class 的10倍，其实很多情况下对某个元素设置某个不一样的样式来覆盖之前的样式并没有效果就是因为之前的样式权重太高，而为了达到效果就要编写权重更高的选择器，所以只有在某个元素需要被 JavaScript 找到的时候才会在某个元素中添加 id ，以便可以通过 document.getElementById() 方法来快速获取需要的元素。
2.5 属性选择器属性选择器包括属性名选择器和属性值选择器，它们是通过元素的属性和值来获取元素的：
标签名[属性名]标签名[属性名="属性值"]例如：
img[title] {border: 2px solid blue;}a[target="_blank"] {background-image: url(_blank.png);}上面第一段代码意思是，如果某个 img 标签带有 title 这个属性，那么就为它添加一个宽度为 2px 的蓝色实线边框。第二段代码的意思是，如果某个 a 标签带有 target 这个属性，并且这个属性的值为 _blank 那么就为这个元素添加一个背景图。
拓展：
其实除了
新闻热点
疑难解答
