CSS查缺补漏篇

　　前面的话：关于CSS，之前我已经做过一些基础的知识点介绍。CSS主要是用来给页面设置样式的，一般说来，在一个网站中，CSS应该独立封装在一个单独的.css外部文件中。样式的设置总体来说是不难的，但是需要足够的细心和耐心，本人之前做简单的静态页面时，也常出现bug，比如说清除浮动、圣杯布局等问题。这些知识点不难，但是很琐碎，本人也尚未能够整理完全，之后我也会根据具体问题做出具体分析，今天主要是对上次做的总结查缺补漏，有兴趣的可以在下面互相交流哟。

1、fireworks工具

　　——该工具的使用是根据设计图来进行网页的编写，常用的还有picpick等，本人惯用这一款工具，下面是对该工具的简单介绍。

1.1 正常切换

K	V	H	Z	U	T	I	G
切片	小黑	小手	缩放	图形	文本	取色	填色

1.2临时切换

ctrl——小黑	ctrl+空格——放大
空格——小手	ctrl+Alt+空格——缩小
普通的放大缩小会自动移动到图片中间，临时的放大缩小仍然在原来的位置，使用起来很方便（Ctrl+N新建；Ctrl+O打开）

1.3其他技巧

不需要的辅助线，拖回到标尺上会自动删除；

Ctrl+加号或者滚轮放大图片 Ctrl+减号或者滚轮缩小图片（不方便）

1.4 在测量图片之前要锁定图片：

2、网站的两种构建策略

渐进增强——progressive enhancement，一开始只构建站点的最少特性，然后不断针对各浏览器追加功能

优雅降级——graceful degradation，一开始就构建站点的完整功能，然后针对浏览器测试和修复

3、常见布局简介

1）固定布局 Fixed Layout

2）响应式布局 Responsive Layout

3）流式布局 Fluid Layout

4）栅格布局 Grid Layout

5）瀑布流布局 Waterfall Layout

6）圣杯布局、双飞翼布局 Holy Grail Layout 两边固定中间流动

4、设置网站图标

4.1 打开http://www.jd.com/favicon.ico即可看到网站图标；右键单击图标，选择图片另存为并保存到本地；

4.2 将图标放在根目录下(也可以是其他目录)，在页面源文件的<head></head>标签之间插入

4.3 shortcut 捷径快捷方式

4.4 使用网页图标的网站：http://www.bitbug.net/

5、引用样式文件

注意引用顺序：base是公共样式，index是特定样式，特定网页的样式应该放在公共样式后面，以便对其进行覆盖

link标签		了解即可
charset	被链接文档的字符编码方式	几乎没有主流浏览器支持该属性
href	被链接文档的位置
hreflang	被链接文档中文本的语言
rel	被链接文档与当前文档之间的关系	常用的有stylesheet 和 shortcut icon （sizes——网站图标的尺寸，仅适用于 rel="icon"）
rev	与rel相反 reversed relationship	几乎没有主流浏览器支持该属性
target	被链接文档在哪个窗口或框架中加载	几乎没有主流浏览器支持该属性
type	被链接文档类型

6、层级

6.1 一定要记得加定位,否则z-index不生效

6.2 后面的盒子会压住前面的盒子，z-index高的盒子会压住z-index低的盒子；盒子不是自身z-index越高就一定会越靠上，除了看他自身还要看他们的父级，父级层级越高的，子级越靠上。

总结： 层级不但要比较子级，还要比较父级(拼爹)。z-index理论上没有最大值，但实际上是21474836472的32次方；最小值不是0，可以取负数。

7、CSS3圆角（border-radius 边框-半径）

7.1 CSS3属性，用于向元素添加圆角边框：

border-top-left-radius:2px;

border-top-right-radius:2px;

border-bottom-right-radius:2px;

border-bottom-left-radius:2px;

7.2 简写形式： border-radius:2px; 顺序从左上角开始顺时针设置（左上右上右下左下）

8、绝对定位可以改变元素的显示方式，但相对定位不可以

9、半透明效果：

background:rgba(0,0,0,.2);

red green blue alpha （红色值绿色值蓝色值透明度）

色值取值范围是0~255；透明度取值范围是0~1；如果是零点几，前面的零可以省略。

补充一：Emmet语法

http://docs.emmet.io/cheat-sheet/

补充二：网页性能优化

css压缩

http://tool.oschina.net/jscompress/

网页性能测试

http://www.webpagetest.org/