CSS查缺补漏篇 - 小花大方
- WBOY原创
- 2016-05-21 08:35:341161浏览
前面的话：关于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 将图标放在根目录下(也可以是其他目录)，在页面源文件的
标签之间插入 
4.3 shortcut 捷径 快捷方式
4.4 使用网页图标的网站：http://www.bitbug.net/
5、引用样式文件
| 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/