CSS入门经典——《CSS设计指南》（第3版）重点总结

CSS设计指南.png

关于《CSS设计指南》，本书很薄，在闲暇时间我花了三天的时间就在Kinde for PC上把它给看完了。不得不说，《CSS设计指南》被誉为CSS的经典入门教材是很有道理的，读者只要掌握了HTML的就能够读懂这本书，因为里面作者举出了大量浅显易懂的案例，就连案例中的描述文本也是为了方便读者理解而专门设置的，看得出作者在案例的可读性上着实下了很大一番功夫。而且作为一本包含大量图片和案例的工具书，本书是我看过的在Kinde上排版最为精美的。给亚马逊点个赞！

本书由八个章节组成，我个人把本书划分为四个部分：

第一部分（第1章和第2章） ：CSS与HTML的关系

第1章为“HTML标记与文档结构”，从HTML讲起，是因为CSS的用途就是为HTML标记添加样式。第2章为“CSS工作原理”，由添加样式的三种方法（行内样式，嵌入样式，链接样式）和选择符组成。

重点提炼:

1. 理解DOM:
   • HTML结构所对应的文档对象类型
   • DOM是从浏览器的视角来观察页面中的元素的属性,由此得出这些元素的一个家族树
   • 通过DOM,可以确定元素之间的相互关系
   • 在CSS中引用DOM中的特定的位置,就可以选中相应的HTML元素,并修改其样式属性.
2. 层叠权重的要点总结:
   • 选择器:id>class>标签
   • 行内样式>嵌入样式>链接样式
   • 设定的样式胜过继承的样式

第二部分（第3章-第4章）：CSS基础知识

第3章-第4章分别为“定位元素”、“字体和文本”，这两个章节主要介绍的是CSS的基础知识，包括盒子模型、浮动、定位、背景属性和文本属性。

** 重点提炼:**

1. 理解盒子模型
   
   

   Paste_Image.png
2. 盒子模型的两个重要结论:
   1. 盒子模型结论一:没有宽度的元素始终会扩展到填满其父元素的宽度为止. 添加水平边框, 内边距和外边距, 会导致内容宽度减少,减少量等于水平边框,内边距和外边距的和
   2. 盒子模型结论二:为设定了宽度的盒子添加边框,内边距和外边距,会导致盒子扩展得更宽.实际上,盒子的width属性设定的只是盒子内容区的宽度,而非盒子要占据的水平宽度.(*解决办法,添加box-sizing:border-box)
3. 定位上下文的常用方法:
   把祖先元素的position设置为relative, 将需要定位的元素设置为position: absolute;
4. 使用clearfix规则清除浮动:
   .clearfix:after{
   content:".";
   display:block;
   height:0;
   visibity:hidden;
   clear:both;
   }
5. letter-spacing的合理使用:
   默认的字符间距在字体变大时会让文本显得松散,因此缩小大标题的字符间距可以让网页显得更专业.
   
   

   Paste_Image.png

第三部分（第5章-第7章）：CSS综合应用

第5章-第7章分别为“页面布局”、“界面组件”、“CSS实战”。这三章利用前面4个章节讲的CSS基础知识开始进行复杂案例，首先是页面的整体布局，随后过渡到一些较为复杂的网页组件，最后在实战阶段，分析了一个具体的网页案例。这3章的内容对CSS知识点进行综合应用，需要读者更多的去敲代码实践，查看样式效果。

重点提炼:
1.** box-sizing属性的使用:在为固定宽度的元素添加水平外边距,边框和内边距,会导致元素盒子变宽,使用box-sizing:border-box可以达到不使得盒子变宽,只导致内容变窄的效果。
2. table-cell实现布局的好处:**
* 单元格(table-cell)不需要浮动就可以并排显示,而且直接为他们应用内边距也不会破坏布局
* 默认情况下,一行中的所有单元格高度相同,因而也不需要人造的等高栏效果了
* 任何没有明确设定宽度的栏都是流动的
3.** 热区最大化:**为了保证用户体验,所有视觉样式--内边距,背景, 边框等等,都要应用给链接a,而不要应用给ul或者li, 把a链接display属性设定为block,以便实现热区最大化.

下面是我做的第7章作业，在写页面的过程中，能够感觉到作者试图把尽可能多的CSS属性融入到这个简单的页面中。比如左边的文本区域的第一行作者就尽量多的使用了text的各种属性。

Paste_Image.png

第四部分（第8章）：响应式设计

第8章为“响应式设计”，作者以第7章的桌面浏览器页面为基础，分别分析了在iPad和iPhone上如何进行优化。鉴于我的自身水平有限，这章并没有精读。

响应式设计的要素:

• 媒体查询:是一种CSS语法,可以根据浏览器的特性,一般是屏幕或浏览器容器宽度提供的CSS规则
• 流式布局:是使用em或百分比等相对单位设定的页面总体宽度,让布局能够随屏幕大小而缩放
• 弹性图片:是使用相对单位确保图片再大也不会超过其容器

---

图片来自:

1. [英]Charles Wyke-Smith. CSS设计指南（第3版） (图灵程序设计丛书 93) . 人民邮电出版社. Kindle Edition.