《CSS3使用指南》读书笔记

一、CSS3的来龙去脉

1.CSS3的新特性：

　　1）不依赖图片的视觉效果

　　2）盒容器变形

　　3）独一无二的字体

　　4）强大的选择器

　　5）过渡与动画

　　6）媒体信息查询

　　7）多列布局

2.CSS标准发布分5个阶段，所有特性的目前所处阶段可以在这里查看：www.w3.org/Style/CSS/current-work，一般处于第3阶段时，我们就可以使用它了

3.CSS3对你的网站到底意义几何，是由你的项目和用户所决定的，而不是根据浏览器的份额来。应该支持IE6，但不应该花很多精力在上面

4.渐进增强：在你编写Web页面时，首先让它们在基础的浏览器和设备上正常工作，且展现得当，然后再辅以更高级但非必要的CSS和JS等增强功能，来为当前和未来的浏览器提供更好的支持（当用户浏览器升级的时候可以自动发挥功用）

5.本书推荐通过给html标签加class名的方式，来兼容老版本的浏览器（P85）

6.试试浏览器设计（http://www.jianshu.com/p/2b43083f2e2f）

PS.摘录一句话：一旦遇到冲突，最终用户优先，其次是作者，其次是实现者，其次标准制定者，最后才是理论上的完满

二、气泡对话框

1.利用边框做出三角形和气泡小尾巴

2.利用RGBA或HSLA做出半透明效果

三、纸质笔记

1.用background-size来调节背景图大小（测试地址：http://w3school.com.cn/tiy/c.asp?f=css_background-size&p=7）

2.单一容器上可以使用复合背景图片

3.使用边框图片（http://border-image.com/)

4.嵌入字体

四、属性选择器

1.属性选择区列表（P227）

2.可以根据a标签的href属性的后缀来分别设置属性选择器，来给链接前面添加不同的图标。还可以根据href的内容来筛选。

3.也可以直接使用类似jquery这种JS库来实现属性选择（避免兼容性问题）

4.拍立得照片效果（P301）

五、使用伪类来提高效率

1.结构伪类（基于DOM），用一个冒号表示（P310）

2.伪元素（非DOM），用两个冒号表示

3.动态高亮显示页面的区域:锚点(target)、更改聚焦区块的背景色

4.last-child选择指定元素

5.用CSS实现计数器、数字图标

6.css动画实现渐变效果（需要浏览器支持）

六、不同的屏幕尺寸，不同的设计

1.媒体查询，可以用来适配各种尺寸的设备

2.页面过宽的时候，横向导航栏，可以变成纵向的

3.文章过长的时候（不便于阅读），可以使用多列文本展示

4.设备宽度与显示宽度的区别：打个比方，iphone 5s的显示宽度是980PX，当它旋转时，显示宽度始终不变；而它的设备宽度是320X568，当它横屏时，device-width就是568。

5.可以通过<meta name="viewport" content="width=device-width,user-scalable=1" />这句，将显示宽度设成设备宽度，这样移动显示起来会更清楚

6.meta标签的viewport属性是apple公司发明且还未成为标准，但是非iphone之外的很多手机浏览器也支持它

七、布局秀

1.弹性布局模型：需要一个额外的包裹容器（div）

2.新元素—盒子模型：display: box;

3.控制子元素自动缩放：box-flex: 1;

4.控制排序：box-direction: reverse、box-ordinal-group：1

5.控制盒子的布局位置：box-align：stretch[center]

6.控制盒子的布局位置2（水平布局的元素水平居中）：box-pack：center

7.弹性布局由于目前还未成熟，不适合整个页面使用，但是一些特性，可以根据“渐进增强”的理念，在局部应用。比如导航条居中（参见第6条）、底部区域粘附效果，之类的比较好用。（但是如果是为特定环境创建应用的话，还是可以玩出很多简单又强大的效果的）

8.还有其它很多未实现的布局和属性（有些和bootstrap的框架理念相同？比如网络布局），请关注它们，向着更有效率的方向发展。