作者： caoyan

Highcharts数据可视化图表库

1.简介

   Highcharts是一款纯javascript编写的图表库，能够很简单便捷的在Web网站或Web应用中添加交互性的图表，Highcharts目前支持多达18种不同类型的图表。
在线演示:http://www.hcharts.cn/demo/index.php
Api文档:http://www.hcharts.cn/api/index.php
中文教程:http://www.hcharts.cn/docs/index.php

2.highcharts优势

  • 兼容性
    Highcharts支持目前所有的现代浏览器，包括IE6 +、ios、Android。Highcharts在标准浏览器中使用SVG技术渲染图形，在遗留的IE浏览器中使用VML技术来绘图。
  • 开源免费
    针对个人用户及非商业用途免费，并提供源代码下载，可任意修改。商业用途需要购买许可。
  • 纯Javascript
    Highcharts完全基于本地浏览器技术，不需要任何插件（例如Flash、java），不需要安装任何服务器环境或动态语言库支持，只需要两个js文件即可运行。
  • 图表类型丰富
    Highcharts目前支持直线图、曲线图、面积图、曲线面积图、面积范围图、曲线面积范围图、柱状图、柱状范围图、条形图、饼图、散点图、箱线图、气泡图、误差线图、漏斗图、仪表图、瀑布图、雷达图，共18种类型图表，其中很多图表可以集成在同一个图形中形成综合图。
  • 动态性
    提供丰富的API接口，方便在创建图表后对图表的任意点、线和文字等进行增加、删除和修改操作。
  • 图表导出和打印功能
    可以将Highcharts图表导出为PNG、JPG、PDF和SVG格式文件或直接在网页上打印出来。
  • 图表缩放
    可以设置图表的缩放，让你更方便查看图表数据。
  • 支持外部数据加载
    Highcharts支持多种数据形式，可以是Javascript数组、json文件、json对象和表格数据等。

3.安装使用方法

（1）页面引入jquery文件和highcharts.js文件
<script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
（2）创建放置图表的元素
<div id="container" style="min-width:800px;height:400px"></div>
（3）调用插件方法
$(function(){
   $('#container').highcharts({
       //配置参数
   });
});

4.基本组成

   通常情况下，Highcharts包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权信息（Credits）等，高级的还包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）等。
Highcharts基本组成部分如下图所示:
图片1
Title
图表标题，包含标题和副标题（subTitle），其中副标题是非必须的。
Axis
坐标轴，包含x轴（xAxis）和y轴（yAxis）。通常情况下，x轴显示在图表的底部，y轴显示在图表的左侧。多个数据列可以共同使用同一个坐标轴，为了对比或区分数据，Highcharts提供了多轴的支持。
Series
数据列。图表上一个或多个数据系列，比如曲线图中的一条曲线，柱状图中的一个柱形。
Tooltip
数据提示框。当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值，数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定。
Legend
图例。用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列。
Credits
图表版权信息。显示在图表右下方的包含链接的文字，默认是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。
Exporting
导出功能按钮。通过引入exporting.js即可增加图表导出为常见文件功能。
PlotLines
标示线。可以在图表上增加一条标示线，比如平均值线等。
PlotBands
标示区域。可以在图表添加不同颜色的区域带，标示出明显的范围区域。

5.折线图实现代码

89

6.图表效果展示

（1）折线图
1
（2）柱状图
4
（3）饼图
5
（4）3D柱状图
3

【前端技术文档】http相关知识

整    理：曹燕

时    间：2016-03-04

说    明：http的定义、请求响应模型、TCP三次握手、使用wireshark工具抓包

1.定义

http: hypertext transfer protocol（超文本传输协议），是用于从WWW服务器传输超文本到本地浏览器的传送协议。http是互联网上应用最为广泛的网络协议。所有的WWW文件都必须遵守这个标准。它由请求和响应构成，是一个标准的客户端服务器模型。

2.http请求响应模型

http协议永远是客户端发起请求，服务器端回送响应。

http协议是一个无状态的协议，同一个客户端的这次请求和上次请求没有对应关系。图片1

①http客户端发起请求，创建端口；

②http服务器在端口监听客户端的请求；

③http服务器向客户端返回状态和内容。

 

3.访问某个网址的整个流程

（1）建立连接

①chrome搜索自身的DNS缓存（如有没有baidu.com及ip地址，一般缓存1分钟，如果有缓存看是否过期）【方法：chrome://net-internals/#dns】；

②当浏览器没有找到缓存或缓存已经过期，则搜索操作系统自身的DNS缓存；

③如果没找到，则读取本地的host文件；

④如果host文件中没有，则浏览器发起一个DNS的系统调用；

⑤宽带运营商服务器查看自身缓存；

⑥运营商服务器发起一个迭代的DNS解析请求；

⑦运营商服务器把结果返回操作系统内核并缓存起来；

⑧操作系统内核把结果返回给浏览器；

⑨最终浏览器拿到了www.baidu.com的ip地址

⑩浏览器获得对应的ip地址之后，发起三次握手。（详见下文）

（2）浏览器发送请求

TCP/IP连接建立起来之后，浏览器就可以向服务器发送请求了。例如用http中的get方法请求一个根域里的一个域名，采用了http1.0的某个协议；【应用于资源的方法、资源的标识符和协议的版本号】

（3）服务器返回响应

服务器接受这个请求，根据路径参数，经过后端的一些处理，把处理之后的结果数据返回给浏览器（例如百度的html页面）【信息的协议版本号、状态码，MIME信息包括服务器信息、实体信息和可能的内容】

（4）浏览器渲染

浏览器拿到了百度的完整html页面代码，在解析和渲染这个页面的时候，里面的css/js/静态图片等静态资源，同样是一个个http请求，需经过前面的7步。

浏览器根据拿到的资源对页面进行渲染，最终把一个完整的页面呈现给用户，然后与服务器断开连接。

 

3.TCP连接中的三次握手

3.1概念

确认比特ACK——只有当ACK＝1时确认号字段才有效。当ACK＝0时，确认号无效；

同步比特SYN——同步比特SYN置为1，就表示这是一个连接请求或连接接受报文；

3.2三次握手

①浏览器：客户端发送syn包到服务器，并进入SYN_SENT状态，等待服务器确认【你能听到我说话吗，我们聊聊？】

②服务器：服务器收到syn包，必须确认客户的SYN，同时自己也发送一个SYN包，即SYN+ACK包，此时服务器进入SYN_RECV状态【我能听到你说话，我们可以聊聊】

③浏览器：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手【好的，那我们开始聊吧】

3.3利用工具Wireshark抓http、tcp包结果：图片2

4.http请求头

  • Accept：浏览器可接受的MIME类型；
  • Accept-Charset：浏览器可接受的字符集；
  • Accept-Encoding：浏览器能够进行解码的数据编码方式，比如gzip；
  • Accept-Language：浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到；
  • Authorization：授权信息；
  • Connection：表示是否需要持久连接。如果这里的值为“Keep-Alive”，或者请求使用的是HTTP 1.1（HTTP 1.1默认进行持久连接），它就可以利用持久连接的优点，当页面包含多个元素时（例如Applet，图片），显著地减少下载所需要的时间；
  • Content-Length：表示请求消息正文的长度；
  • Cookie：这是最重要的请求头信息之一；
  • Host：初始URL中的主机和端口；
  • If-Modified-Since：只有当所请求的内容在指定的日期之后又经过修改才返回它，否则返回304“Not Modified”应答；
  • Pragma：指定“no-cache”值表示服务器必须返回一个刷新后的文档，即使它是代理服务器而且已经有了页面的本地拷贝；
  • Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面；
  • User-Agent：浏览器类型。

5.http响应头

  • Allow：服务器支持哪些请求方法（如GET、POST等）；
  • Content-Encoding：文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型；
  • Content-Length：表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据；
  • Content-Type： 表示后面的文档属于什么MIME类型，如text/plain，text/html；
  • Date：当前的GMT时间；
  • Expires：指明应该在什么时候认为文档已经过期，从而不再缓存它；
  • Last-Modified：文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件GET，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态；
  • Location：表示客户应当到哪里去提取文档；
  • Refresh：表示浏览器应该在多少时间之后刷新文档，以秒计。

 

相关文档：http 1.1 和 http1.0 主要区别

【前端技术文档】chrome调试功能

整  理：曹燕
时  间：2015-12-18
说  明：chrome调试功能的介绍

1.Elements面板——DOMchrome调试功能30

左侧展示了dom树，在某个dom节点上点击右键会出现操作菜单，常用功能：增加属性、编辑属性、以html形式编辑代码、复制css路径、复制Xpath路径、剪切/复制/粘贴/删除代码、设置断点。

左侧底部显示当前节点的所有祖先节点。

右侧面板主要包括5个功能块。①Styles：按权重从大到小顺序显示所选元素的css样式，可以进行修改，页面会实时响应变化；下方是盒模型图；②Computed：所选元素的最终样式，只可读不可修改；③Event Listeners：显示绑定到当前元素的事件监听函数；④Dom Breakpoints：显示dom中设置的断点，便于调试；⑤Properties：显示元素作为dom对象的各个属性。

2.Network面板——请求加载chrome调试功能359

上图分为7列，从左到右分别是Name、Status、Type、Initiator、Size、Time和Timeline。①Name表示加载的文件名；②Status表示状态码（200为请求成功，304表示从缓存读取）；③Type表示文件的MIME Type的类型；④Initiator表示发出这个文件请求的发出者；⑤Size表示文件大小；⑥Time表示每个请求的总时长；⑦Timeline显示了请求和加载情况（Timeline中鼠标移到每个时间条上的时候，会显示整个请求的详细信息）。通过它可以看到哪些请求是同时发出的，哪些请求被阻塞了。Timeline中有一条蓝线和一条红线，蓝线表示DOM Content Loaded事件触发的时间，红线表示 Window onload事件触发的时间。

点击某个请求会显示该请求的具体信息：chrome调试功能725

顶部的选项卡将请求的文件进行了分类，便于查看，如：XHR、JS、CSS、Img、Media、Font、Doc、Websockets和Other。

底部显示了网页请求的整体加载信息，如：请求个数、传输大小、dom结构加载时长、页面加载完成总时长。

3.Sources面板——样式脚本chrome调试功能867

显示所有加载的html、css和js资源，可以实时编辑css或js文件。右侧显示监听、事件绑定以及断点信息。常用于设置断点来调试js。

设置断点调试js可参考：http://segmentfault.com/a/1190000004123527

4.Timeline面板——页面加载chrome调试功能1070

Timeline跟Network有类似的地方，他们都是按照页面的加载时间来统计数据的，不过Timeline统计的数据侧重点不一样。Timeline主要统计了三个数据：Loading，Scripting，Rendering。

点击时间线上的任意位置，可以查看在这个点的详细信息。

5.Profiles面板——CPU信息chrome调试功能1230

Profile记录的主要是CPU和内存占用的信息。点击start按钮，开始记录CPU使用信息，刷新页面，等页面加载完成之后点击stop按钮，完成录制。chrome调试功能1232

上图的左边两列是时间，第一列是self，第二列是total，self表示函数自己的运行时间，不包含调用其他函数的时间，而total表示这个函数运行的总时间。第三列是运行的函数。通过比较时间的百分比可以找出性能差的函数进行优化。

6.Resources面板——所有资源信息chrome调试功能1445

Resources显示所有加载的资源，除了Sources面板中的html/css/js文件外，还包括图片文件；并且还可以查看本地存储、会话存储、cookies信息、缓存等。

7.Audits面板——性能检测优化chrome调试功能1552chrome调试功能1554

Audits面板的作用于pagespeed、Yslow类似，用于检测页面的性能，提出优化建议。点击Run按钮，即可得到页面性能的检测结果和优化建议。

8.Console面板——控制台输出chrome调试功能1649

Cosole可以用于输出信息，常用于调试。支持的一些方法函数如下：

  • log(object[, object, ...])，使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。
  • info(object[, object, ...]) ，向控制台输出一条信息，该信息包含一个表示“信息”的图标，和指向该行代码位置的超链接。
  • error(object[, object, ...])在控制台中输出一条错误信息。
  • warn(object[, object, ...])在控制台中输出一条警告信息。
  • assert([, object, ...]) ，断言，测试一条表达式是否为真，不为真时将抛出异常（断言失败）。
  • dir(object) 输出一个对象的全部属性（输出结果类似于 DOM 面板中的样式）。
  • dirxml(node) 输出一个 HTML 或者 XML 元素的结构树，点击结构树上面的节点进入到 HTML 面板。
  • trace() 输出 Javascript 执行时的堆栈追踪。
  • group(object[, object, ...]) 输出消息的同时打开一个嵌套块，用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。
  • count([title]) 输出该行代码被执行的次数，参数 title 将在输出时作为输出结果的前缀使用。
  • clear() 清空控制台。

 

 

 

Apidoc的安装及使用

整    理：曹燕

时    间：2015-11-27

说    明：Apidoc的安装及使用（官方文档：http://apidocjs.com/）

 

1.安装

2.运行

3.apidoc.json配置文件

4.注释中必需的部分

5.继承

6.apidoc的注释规则

（1）@api——定义接口的请求方式、请求路径、标题

（2）@apiDefine——定义一个可重用的块

（3）@apiDescription——api方法的详细介绍

（4）@apiError——出错情况的描述

（5）@apiErrorExample——一个返回出错信息的示例

（6）@apiExample——使用一个接口的示例

（7）@apiGroup——对块进行分类，便于导航条分类

（8）@apiHeader

（9）@apiHeaderExample

（10）@apiIgnore——不被转换的块

（11）@apiName——接口的名称

（12）@apiParam——描述接口的参数

（13）@apiParamExample——接口参数的一个示例

（14）@apiPermission

（16）@apiSuccess——成功时的返回值

（17）@apiSuccessExample——一个成功的返回信息的示例

（18）@apiUse——调用一个已经定义好的块

（19）@apiVersion——一个块的版本信息

 

1.安装

npm install apidoc -g

2.运行

apidoc -i myapp/ -o apidoc/ -t mytemplate/

-i 输入文件的目录，即项目文件夹

-o 输出目录，即放置生成文档的位置

-t 使用的模板，会有默认的模板，当然也可以用自己定义的模板

示例： apidoc -i abc/ -o doc/   apidoc的使用1956

3.apidoc.json配置文件

放在你的工程项目的根目录下，是对项目的概要介绍，包括标题、简要介绍、版本等。

{

"name": "育儿网",

"version": "1.0.0",

"description": "育儿API文档",

"title": "API文档",

"template": {

"withCompare": true,

"withGenerator": true

}

}

其中name、version、description都会被显示出来。

4.注释中必需的部分

/**

* @api {get} /user/:id Request User information

* @apiName GetUser

* @apiGroup User

*/

  • 注释块必须用/** */包围
  • @api {get} /user/:id Request User information

注释块必须以@api开头，否则会忽视这个注释块

  • @apiName必须是一个独一无二的名字
  • @apiGroup的作用是给这个方法分组

5.继承apidoc的使用2448

@apiDefine定义了一个可重用的块，然后其他块调用这个块的时候就写：

@apiUse UserNotFoundError

在生成的文档中会自动填充成UserNotFoundError块的具体内容。

Apidoc中的继承只能继承一层，层数多了会影响可读性。

6.apidoc的注释规则

（1）@api——定义接口的请求方式、请求路径、标题

【开头必需，除非是@apiDefine开头】apidoc的使用2644

Method：必须，方法的请求方式，如get、post、put、delete...

Path：必须，请求路径

Title：可选，可选，用于导航和文章的子标题apidoc的使用2725

（2）@apiDefine——定义一个可重用的块apidoc的使用2753

Name：必须，独一无二的名字，之后引用这个块就是用这个名字

Title：可选，标题

Description：可选，详细介绍，另起一行写apidoc的使用2824

（3）@apiDescription——api方法的详细介绍apidoc的使用2858

Text：必须，api方法的文字介绍

（4）@apiError——出错情况的描述apidoc的使用2902

(Group)：可选，有了group值之后该错误会被分组；默认归类为Error 4xx。

{Type}：可选，返回类型，如{Boolean}，{Number}，{String}等。

Field：必须，返回标识符，例如错误码。

Description：可选，对错误码的描述。apidoc的使用3041

（5）@apiErrorExample——一个返回出错信息的示例

会以预格式化代码输出到页面apidoc的使用3091

{type}：可选，返回信息的格式

Title：可选，这个出错信息的标题

Example：必须，具体的返回信息apidoc的使用3149

（6）@apiExample——使用一个接口的示例

会以预格式化代码输出到页面apidoc的使用3192

{type}：可选，代码的语言

Title：必须，这个例子的标题

Example：必须，使用接口的代码apidoc的使用3246

（7）@apiGroup——对块进行分类，便于导航条分类apidoc的使用3278

Name：必须，分类的名称apidoc的使用3294

（8）@apiHeader

暂略

（9）@apiHeaderExample

暂略

（10）@apiIgnore——不被转换的块apidoc的使用3361

将这句放在块的起始位置，这样进行转换的时候这个块就会被跳过，常常用于一个块还没有开发完毕的时候。

Hint：可选，描述为什么不转换这个块apidoc的使用3432

（11）@apiName——接口的名称apidoc的使用3455

Name：必须，接口的名称，必须是独一无二的名称（允许版本不同的同一名称）apidoc的使用3495

（12）@apiParam——描述接口的参数apidoc的使用3521

（group）：可选，所有的参数会被分到这个类里，如果不设置，就分到Parameter。

{type}：可选，参数的类型，如{String}等。

{type{size}}：可选，参数取值的详细信息，如

{number{100-999}}——参数必须是个100-999的数字

{string{2..5}}——参数必须是2-5个字符的字符串

{type=allowedValues}：可选，关于变量允许取值的信息，如

{string="small","huge"}——参数必须是包含”small”或”huge”的字符串

Field：必须，变量名，表示该参数对于接口是必须的

[field]：必须，变量名，表示该参数对于接口不是必须的

=defaultValue：可选，参数的默认取值

Description：可选，参数的描述apidoc的使用3884

（13）@apiParamExample——接口参数的一个示例apidoc的使用3919

{type}：可选，请求信息的格式

Title：可选，示例的标题

Example：必须，请求的具体信息apidoc的使用3973

（14）@apiPermission

暂略

（15）@apiSampleRequest——模拟请求时的urlapidoc的使用4031

（16）@apiSuccess——成功时的返回值apidoc的使用4602

（group）：可选，所有的参数会被分到这个类里，如果不设置，就分到Success 200。

{type}：可选，参数的类型，如{String}等。

Field：必须，返回标识符。

Description：可选，成功码的描述。apidoc的使用4723

（17）@apiSuccessExample——一个成功的返回信息的示例apidoc的使用4763

{type}：可选，返回信息的格式

Title：可选，示例的标题

Example：必须，返回的具体信息apidoc的使用4817

（18）@apiUse——调用一个已经定义好的块

已经定义的块是指用@apiDefine定义的块apidoc的使用4869

Name：必须，@apiDefine定义的块的名称apidoc的使用4897

（19）@apiVersion——一个块的版本信息

Group和name值都相同的块，可以进行不同版本的对比。可用于在生成的文档中和之前的版本进行比较，增加和修改的会用绿色标出、删除的会用红色标出。apidoc的使用5000

Version：必须，版本号apidoc的使用5017

【前端技术文档】CSS display属性

整    理：曹燕、肖雅君

时    间：2015-11-20

说    明：CSS display属性常用的取值

 

1.定义及取值

1.1定义

display 属性规定元素应该生成的框的类型。

1.2可能取值CSS display属性59

常用取值为：

block——使元素表现为块级元素（又叫块元素）

inline——使元素表现为内联元素（又叫行内元素）

inline-block——使元素表现为内联块状元素

2.块级元素、内联元素及内联块状元素

2.1区别

（1）块级元素会独占一行，其宽度若不设置则自动填满其父元素宽度；

内联元素不会独占一行，相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化，处于行尾的内联元素会拆分在两行显示；

内联块状元素也不会独占一行，相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度若不设置则随元素的内容而变化，处于行尾的内联块状元素会整体移到第二行显示。

（2）块级元素可以设置 width, height属性；

内联元素设置width,  height无效；

内联块状元素可以设置 width, height属性。

（3）块级元素可以设置margin 和 padding；

内联元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果；

内联块状元素可以设置margin 和 padding。 

2.2常用html元素分类

块级元素：div，p，h1 -h6，hr，ol，ul，dl，form，table，pre，menu

内联元素：a，br，img，input，label，select，span，strong，b，em，i,small，cite，code，sub，sup，textarea

3.示例

3.1示例1——是否独占一行

说明：块级元素会独占一行；内联元素和内联块状元素不会独占一行，而是会排在一行中，直到排不下才会换行显示，但二者在处理行尾时略有不同。CSS display属性875 CSS display属性876

效果：CSS display属性882

3.2示例2——是否可以设置宽高

说明：块级元素和内联块状元素都可以设置宽高；内联元素不可以设置宽高。CSS display属性937 CSS display属性939

效果：CSS display属性946

3.3示例3——设置margin值

说明：块级元素和内联块状元素可以设置margin的4个方向值；内联元素只可以设置margin-left和margin-right值，上下的margin设置之后是无效的。CSS display属性1052 CSS display属性1054

效果：CSS display属性1060

3.4示例4——设置padding值

说明：块级元素和内联块状元素可以设置padding的4个方向值；内联元素只可以设置padding-left和padding-right值，上下的padding设置之后是无效的。CSS display属性1171 CSS display属性1173

效果：CSS display属性1179

3.5示例5——应用display转换元素类型

说明：通过设置display的值可以改变任意元素的类型CSS display属性1234 CSS display属性1236

效果：CSS display属性1242

【前端技术文档】水平垂直居中方式

整    理：曹燕、肖雅君

时    间：2015-11-13

说    明：html中元素实现垂直水平居中的方式

 

1. 块级元素和内联元素

1.1区别

1.2常用块级及内联元素

1.3内联块状元素

2. 水平居中

2.1 text-align:center

2.2 margin:0 auto

2.3 绝对定位水平居中方法一

2.4绝对定位水平居中方法二

2.5浮动配合相对定位

3. 垂直居中

3.1 line-height

3.2 vertical-align:middle配合line-height

3.3绝对定位垂直居中方法一

3.4绝对定位垂直居中方法二

4. 表格的居中问题

4.1表格居中

4.2扩展

5. 常用的绝对居中（水平垂直居中）方法

5.1一行文字的水平垂直居中

5.2内联元素的水平垂直居中

5.3任何元素的水平垂直居中

5.4translate方法

 

1.块级元素和内联元素

1.1区别

（1）块级元素会独占一行，其宽度自动填满其父元素宽度。

内联元素不会独占一行，相邻的内联元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

（2）块级元素可以设置 width, height属性。

内联元素设置width,  height无效。

（3）块级元素可以设置margin 和 padding.

内联元素水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。

1.2常用块级及内联元素

块级元素：div，p，h1 -h6，hr，ol，ul，dl dt dd，form

内联元素：a，br，img，input，label，select，span，strong，b，em，font，i,small

1.3内联块状元素

同时具备内联元素、块状元素的特点，设置方法是display:inline-block

①和其他元素都在一行上；

②元素可以设置width, height，margin 和 padding。

 

2.水平居中

2.1 text-align:center

设置位置：块级元素

实现效果：使得块级元素内部的文本及内联元素、内联块状元素在水平方向上居中。并且它里面所有的文字、内联元素、内联块状元素都只会相对于最近一层块级元素来实现水平居中。

注：在IE6、7中，它能使任何元素进行水平居中。

示例：水平垂直居中方式2277 水平垂直居中方式2279

效果：水平垂直居中方式2285

 

2.2 margin:0 auto

设置位置：块级元素

实现效果：使块级元素自身水平居中。使用这个方法的前提是块级元素必须设置宽度，这样才能根据宽度自动调节左右两边的margin值，使之居中。

示例：水平垂直居中方式2389 水平垂直居中方式2391

 

效果：水平垂直居中方式2397

2.3 绝对定位水平居中方法一

方法：position:absolute;left:50%;再设置magin-left的值为负的元素宽度的一半。

设置位置：任何元素（任何元素设置了绝对定位之后display属性值会变为inline-block）。前提是元素必须设置宽度。

实现效果：使任何元素在水平方向上居中

示例：水平垂直居中方式2559 水平垂直居中方式2561

 

效果：水平垂直居中方式2567

2.4绝对定位水平居中方法二

方法：position:absolute; left:0; right:0; margin:auto;

设置位置：任何元素。前提是元素必须设置宽度。

实现效果：使任何元素在水平方向上居中

示例：水平垂直居中方式2683 水平垂直居中方式2685

 

效果：水平垂直居中方式2691

 

2.5浮动配合相对定位

方法：给要居中的元素加一层wrapper，wrapper设置：position:relative; float:left; left:50%;居中元素自身设置：position:relative; left:-50%;

设置位置：任何元素。优点是无需知道元素的宽度。

示例：水平垂直居中方式2844 水平垂直居中方式2846

效果：水平垂直居中方式2852

3.垂直居中

3.1 line-height

方法：将一个元素height和line-hieght的值设为一样

设置元素：块级元素

实现效果：使得块元素内部的文本垂直居中显示

示例：水平垂直居中方式2945 水平垂直居中方式2947

效果：水平垂直居中方式2953

3.2 vertical-align:middle配合line-height

设置元素：块级元素设置line-height与自身的height相同，它的内联子元素设置vertical-align:middle。

实现效果：使得内联元素相对于父元素垂直居中。因为vertical-align设置的是内联元素的基线相对于该元素所在行的基线的垂直对齐方式，必须先通过line-height设置行高，然后vertical-align：middle使得该元素的基线与所在行基线垂直居中对齐。

注：在IE6中无效。

示例：水平垂直居中方式3212 水平垂直居中方式3214

效果：水平垂直居中方式3220

3.3绝对定位垂直居中方法一

方法：position:absolute;top:50%;再设置magin-top的值为负的元素高度的一半。

设置位置：任何元素（任何元素设置了绝对定位之后display属性值会变为inline-block）。前提是元素必须设置高度。

实现效果：使任何元素在垂直方向上居中。

示例：水平垂直居中方式3380 水平垂直居中方式3382

效果：水平垂直居中方式3388

3.4绝对定位垂直居中方法二

方法：position:absolute;top:0;bottom:0;margin:auto;

设置位置：任何元素。前提是元素必须设置高度。

实现效果：使任何元素在垂直方向上居中。

示例：水平垂直居中方式3502 水平垂直居中方式3504

效果：水平垂直居中方式3510

4.表格的居中问题

4.1表格居中

（1）方法一：通过表格自身属性实现。水平居中通过align=”center”实现，垂直居中通过valign=”middle”实现，设置在th或td上，使得单元格的内容居中。

默认情况下，th完全居中，td在垂直方向上居中。

示例：水平垂直居中方式3645 水平垂直居中方式3647

效果：水平垂直居中方式3653

（2）方法二：通过css属性实现。水平居中通过text-align:center实现（前提是单元格内容是内联元素或内联块状元素），垂直居中通过vertical-align:middle实现。

4.2扩展

对于那些不是表格的元素，可以通过display:table-cell 来把它模拟成一个表格单元格，然后利用4.1中表格居中的方法二实现居中。

示例：水平垂直居中方式3833 水平垂直居中方式3835

效果：水平垂直居中方式3841

5.常用的绝对居中（水平垂直居中）方法

5.1一行文字的水平垂直居中

方法：text-align:center;外层块元素的line-height与height值相同

5.2内联元素的水平垂直居中

方法：外层块设置text-align:center;vertical-align:middle;line-height与height值相同

5.3任何元素的水平垂直居中

方法一：position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;

方法二：position:absolute;top:50%;left:50%;margin-top:负半元素高;margin-left:负半元素宽;

5.4translate方法

方法：元素设置position:absolute;top:50%;left:50%;然后设置transform: translate(-50%,-50%);

示例：水平垂直居中方式4264 水平垂直居中方式4266

效果：水平垂直居中方式4272

【前端技术文档】CSS Sprites

整    理：曹燕、肖雅君

时    间：2015-10-23

说    明：CSS Sprites

1. 原理简介

2. 优点

3. 使用场景

4. background-position属性

    4.1基本用法

    4.2使用示例

5. CSS Sprites使用方法

    5.1设置background-image

    5.2设置background-repeat

    5.3设置background-position

6. 综合示例

7. 使用注意点

8. 雪碧图在线生成工具

 

1.原理简介

CSS Sprites是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”等属性组合进行背景定位。

2.优点

①减少网页的http请求；

②减少图片的字节，n张图片合并成1张图片的字节总是小于这n张图片的字节总和；

③解决网页设计师在图片命名上的困扰，只需对一张集合的图片进行命名，不需对每一个小元素进行命名；

④更换风格方便，只需在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

3.使用场景

①静态图片，不随用户信息的变化而变化；

②小图片，图片容量比较小；

③加载量比较大。

4.background-position属性

4.1基本用法

要想灵活使用CSS Sprites，首先要完全理解background-position这个属性的含义和使用。background-position属性用于设置背景图像显示的起始位置，与CSS Sprites相关时的取值方式是：

background-position : x , y ;

其中x设置了水平位置 ，是指背景图片左边界距离容器左边界的距离。若背景图片左边界在容器左边界的左方，则x<0；若在容器左边界的右方，则x>0.

y设置了垂直位置，是指背景图片上边界距离容器上边界的距离。若背景图片上边界在容器上边界的上方，则y<0；若在容器上边界的下方，则y>0；

background-position的默认取值是0,0.

4.2使用示例

例如：有一个宽300px，高150px的容器，有一张背景图片bg.jpgCSS Sprites1650

 

①background-position:0,0; 时的效果是：CSS Sprites1685

②background-position:70px,40px; 时的效果是：CSS Sprites1727

③background-position:-70px,-40px; 时的效果是：CSS Sprites1771

5.CSS Sprites使用方法

首先将网页上用到的小图标合并到一张图片上。

5.1设置background-image

background-image: url(bg.jpg);

将容器的背景图片设置为最终合成的雪碧图；CSS Sprites2041

5.2设置background-repeat

background-repeat: no-repeat;

将背景图片设置为不重复；

5.3设置background-position

通过设置这个属性将背景图片显示的位置调整到需要显示的部分。

6.综合示例

该示例使用的雪碧图以及要实现的效果分别如下：CSS Sprites2041CSS Sprites2050备注：雪碧图中每个图标的宽度是40px，高度是24px。

①html部分的代码如下（整体上是一个ul，每个图标的位置都是一个i元素）：CSS Sprites2121

②加上基本的css样式CSS Sprites2135

此时的效果是：CSS Sprites2145

③给i元素添加背景图片并将background-repeat设置为no-repeatCSS Sprites2190

此时的效果是：CSS Sprites2200

解释：因为background-position的默认值是(0,0)，所以背景图片（雪碧图）都是紧贴容器左上角（i元素的左上角）显示的。

④以第二个图标为例，要显示的图标是绿色皮鞋，此时应该将背景图片向上移动24px，横向上不需移动，所以第二个i元素的background-position设为(0,-24px)CSS Sprites2360

此时效果为：CSS Sprites2369

⑤下面的几个图标用一样的方法进行定位显示，这样就能实现最终的效果了。

CSS Sprites2407

7.使用注意点

①在手机端切图的时候注意要为每张图片之间留出足够空隙。因为使用元素的地方可能包含各种不同的内容，这些内容会导致容器变宽变高，预留了足够的空白的话，在容器大小发生变化时，可以避免其他的图片显示出来。

②不要等完成所有工作后再开始使用CSS Sprites。在网站全部完成后再使用CSS Sprites，也就意味着你要返回重写CSS，并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片。如果在刚开始构建页面时就着手使用CSS精灵，那么一切都会变得简单。

③有些情况不要使用CSS Sprites。

（1）wap端：需要图片的高度撑起内容的，如设置img{width:100%;height:auto;}不能合成雪碧图。

（2）某些需要重复的图片不能合成。如：需要重复的背景图。

（3）轮播的banner图

8.雪碧图在线生成工具

如果用photoshop或其他工具测量计算每一个背景单元的精确位置，虽然没什么难度，但是很繁琐，可以利用一些雪碧图在线生成工具来帮助我们实现。

工具地址：http://www.cn.spritegen.website-performance.org/

①打开网页之后，页面上会有一些示例图片，点击“Clear”按钮将之清空CSS Sprites3012

②点击“Open”打开文件夹选择多张图片（直接选多张图片即可，不可用压缩包）

例如文件夹中有：CSS Sprites3063

全选放入之后生成：CSS Sprites3075

③点击“Settings”可以进行相关设置，包括图片的布局（紧缩型、垂直型、水平型）、生成css或less代码、代码前缀、图片之间的间距。保存设置，生成的雪碧图会自行进行调整。CSS Sprites3167

④得到想要的效果之后，点击“Downloads”进行下载。包括生成的雪碧图、css代码，以及使用的html代码。CSS Sprites3226 CSS Sprites3228 CSS Sprites3230

 

推荐一些其他实用的工具：

雪碧图在线生成工具： http://www.spritebox.net/

雪碧图在线生成工具：http://csssprites.com/

background定位工具：http://www.spritecow.com/

HTML5地理定位（使用实例）

整    理：曹燕

时    间：2015-10-22

说    明：html5地理定位的使用实例

 

1.功能描述

程序包括一个html文件和一个php文件。

实现的功能是：①在定位成功的情况下，显示用户所在位置的经纬度、用户所在地点；当用户点击“查看周围店铺”时，在地图上显示周围的店铺以及从用户所在点到达店铺的路线。②在定位失败（包括用户拒绝定位等）的情况下，显示用户所在的省市。

 

2.前端html文件说明

2.1 getLocation()方法

功能：该方法在文档加载时执行，功能是获取定位

说明：若浏览器支持地理定位，则利用html5中提供的定位api进行定位；否则调用ip定位的方法。HTML5地理定位（使用实例）255

2.2 onSuccess(position)方法

功能： 该方法是定位成功时执行的回调函数，功能是获取并显示用户所在位置的经纬度、显示用户所在地点。

说明：①利用h5地理定位获取当前所在地点的经度和纬度；②将经度和纬度传给后台，通过ajax向后台请求获得位置信息，包括转换之后的百度标准经纬度、用户所在地点的详细信息。HTML5地理定位（使用实例）419

2.3 onError(error)方法

功能：该方法是定位失败时执行的回调函数，功能是调用ip定位的方法。HTML5地理定位（使用实例）477

2.4 ipLocate()方法

功能：该方法是在浏览器不支持地理定位或者地理定位失败时调用的函数，功能是显示用户所在位置的省市信息。

说明：通过ajax向后台请求获得位置信息，传给后台的经纬度是（400,400）这组无效数据，以表示经纬度获取失败HTML5地理定位（使用实例）605

2.5 showStores()方法

功能：该方法在用户点击“显示周围店铺”按钮时执行，功能是在百度地图上显示从用户位置到周围店铺之间的路线。

说明：此方法的顺利执行需要在html文件头部引入百度地图api

<script src="http://api.map.baidu.com/api?v=2.0&ak=gS3IRPx5CG3SUixVgIUbUi2c"

type="text/javascript"></script>HTML5地理定位（使用实例）823

 

3.后台php文件说明（待补充）

 

代码下载：20151019locate

相关文档：HTML5地理定位（使用实例）

HTML5地理定位（原理知识）

整    理：曹燕

时    间：2015-10-22

说    明：html5地理定位的原理知识

1.地理定位的作用

2.地理定位的原理

3.地理定位的机制

4.浏览器支持情况

    4.1 PC浏览器支持情况

    4.2 手机支持情况

5.使用API前检测浏览器

6.API的使用

    6.1 getCurrentPosition()方法

    6.2 watchPosition()方法

    6.3 clearWatch()方法

7.代码示例

8.扩展

1.地理定位的作用

HTML5地理定位（HTML5 Geolocation）提供了一组API用于获取用户的地理位置。鉴于该特性可能侵犯用户的隐私，在访问位置信息前，浏览器都会询问用户是否共享其位置信息。

 

2.地理定位的原理

Geolocation的位置信息主要来源于以下四种方式：

①GPS全球定位。在露天环境下效果较好，获取位置信息非常精确。适合移动设备。

②IP地址定位。适用于接入互联网的设备，比如台式机。但是因为浏览器是将位置信息发送给 ISP 服务商来解析，其IP 地址与服务商所在位置有关，可能与用户所在位置不同，所以这种方式的解析容易出现偏差。

③WiFi定位。这种方式与GPS效果同样精确，它通过多个WiFi接入点三角距离获取位置信息数据。适用于室内环境的移动设备。

④GMS网络定位。与TCP/IP协议不同，它基于GMS数据交换协议。通常用于移动服务商的GPRS数据服务。解析方式精确。

 

3.地理定位的机制HTML5地理定位（原理知识）1339

4.浏览器支持情况

4.1 PC浏览器支持情况：

Firefox 3.5+
Chrome 5.0+
Safari 5.0+
Opera 10.60+
Internet Explorer 9.0+

4.2 手机支持情况：

Android 2.0+
iPhone 3.0+
Opera Mobile 10.1+
Symbian (S60 3rd & 5th generation)
Blackberry OS 6
Maemo

 

5.使用API前检测浏览器

在使用地理位置API之前首先要检测浏览器是否支持：HTML5地理定位（原理知识）1604

 

6.API的使用

navigator.geolocation对象有三个方法：HTML5地理定位（原理知识）1646

6.1 getCurrentPosition()方法

功能：获取用户当前位置

参数：

①successCallback是定位成功时执行的回调函数，是必须参数；

successCallback返回一个地理数据对象position作为参数，该对象的属性有：

属性名 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间

 

②errorCallback定位失败时执行的回调函数，是可选参数；

errorCallback返回一个错误数据对象error作为参数，该对象的属性有：

属性名 取值 描述
code PERMISSION_DENIED (数值为1)  表示没有权限使用地理定位API
POSITION_UNAVAILABLE (数值为2) 表示无法确定设备的位置
TIMEOUT (数值为3) 表示超时
UNKNOWN_ERROR(数值为4) 表示未知错误

 

③options参数为额外参数，用来实现更精细的执行定位，是可选参数。

options = {     
    enableHighAccuracy：true,
    timeout:1000,　     
    maximumAge:3000
}

enableHighAccuracy表示是否要求高精度的地理信息，默认为false。

timeout表示等待响应的最大时间，单位是ms，默认是0，表示无穷大。

maximumAge表示应用程序的缓存时间，当第二次请求定位与第一次定位的时间差超过maximumAge，则重新获取一个定位；否则返回缓存中的位置。

6.2 watchPosition()方法

功能：持续获取当前用户位置（定期轮询设备的位置）

参数：该方法的参数和getCurrentPosition()方法的参数是一样的，包括：successCallback（必须）、errorCallback（可选）、options（可选）

返回值：数值型的watchId

 

6.3 clearWatch()方法

功能：配合watchPosition()使用，用于停止watchPosition()的轮询

参数：watchPosition()方法的返回值watchId

 

7.代码示例HTML5地理定位（原理知识）2858

效果(显示当前所在位置的经度和纬度)：HTML5地理定位（原理知识）2880

 

8.扩展

在获取用户位置时除了以数值的形式显示出来，还可以结合百度或谷歌地图的API，这样可以在地图上显示位置。

首先引入百度地图API：HTML5地理定位（原理知识）2953

然后改写上面代码示例中的onSuccess方法（定位成功时执行的回调函数）HTML5地理定位（原理知识）2993

这样就能将当前位置显示在地图上：HTML5地理定位（原理知识）3012

附：百度地图开放平台：

http://developer.baidu.com/map/jsdemo.htm#a1_2

 

相关文章：HTML5地理定位（使用实例）

【前端技术文档】HTML表格布局

整    理：曹燕、肖雅君

时    间：2015-10-16

说    明：HTML表格布局

 

1. 表格标签

    1.1一个完整表格的示例

    1.2一个简化表格的示例

    1.3一个竖形表格的示例

2. 表格属性

    2.1设置宽、高、边框、文字对齐方式、背景颜色

    2.2设置单元格间距

    2.3设置单元格衬距

    2.4合并单元格——合并行

    2.5合并单元格——合并列

3. CSS表格属性

    3.1 border-collapse属性

    3.2 border-spacing属性

    3.3 caption-side属性

    3.4 empty-cells属性

    3.5 table-layout属性

4. 表格布局

 

  1. 表格标签
<table> 定义表格
<caption> 定义标题
<th> 定义表格的表头
<tr> 定义表格的行
<td> 定义表格单元格的内容
<thead> 定义表格的页眉
<tbody> 定义表格的主体
<tfoot> 定义表格的页脚
<col> 定义表格列的属性
<colgroup> 定义表格列的组

备注：

定义一个表格必须使用的标签：<table>、<tr>、<th>或<td>

不常使用的标签：<col>、<colgroup>

1.1一个完整表格的示例

代码：html表格布局1443

效果：html表格布局1449

1.2一个简化表格的示例

代码：html表格布局1469

效果：html表格布局1475

1.3一个竖形表格的示例

代码：html表格布局1495

效果：html表格布局1501

2.表格属性

width 规定表格的宽度
height 规定表格的高度
border 规定表格的边框
cellspacing 规定单元格间距（单元格与单元格之间的距离）
cellpadding 规定单元格衬距（单元边沿与其内容之间的空白。）
bgcolor 规定表格的背景色
background 规定表格的背景图片
align 规定表格的对齐方式
rowspan 合并单元格时规定跨域的行数
colspan 合并单元格时规定跨越的列数

备注：

width、height、bgcolor、background等属性不推荐使用，建议在css代码中进行样式的设置。

2.1设置宽、高、边框、文字对齐方式、背景颜色

代码：html表格布局1822

效果：html表格布局1828

2.2设置单元格间距

代码：html表格布局1846

效果：html表格布局1852

2.3设置单元格衬距

代码：html表格布局1870

效果：html表格布局1876

2.4合并单元格——合并行

代码：html表格布局1897

效果：html表格布局1903

2.5合并单元格——合并列

代码：html表格布局1924

效果：html表格布局1930

3.CSS表格属性

border-collapse 规定是否合并表格边框。
border-spacing 规定相邻单元格边框之间的距离。
caption-side 规定表格标题的位置。
empty-cells 规定是否显示表格中的空单元格上的边框和背景。
table-layout 设置用于表格的布局算法

3.1 border-collapse属性

该属性用于是否合并表格边框。border-collapse的取值有：（默认取值是separate）

①separate：边框会被分开。不会忽略border-spacing和empty-cells 属性。

②collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

③inherit：规定应该从父元素继承 border-collapse 属性的值。

不同取值的效果：html表格布局2326 html表格布局2332

3.2 border-spacing属性

该属性用于指定分隔边框模型中单元格边界之间的距离。使用px,cm等单位，不可为负值。它仅在border-collapse取值为separate时才起作用。border-spacing的取值有：

①length：设置水平和垂直间距。

②length,length：第一个设置水平间距，而第二个设置垂直间距。

③inherit：从父元素继承 border-spacing 属性的值。

不同取值的效果：html表格布局2550 html表格布局2554

3.3 caption-side属性

该属性用于指定表格标题相对于表格边框的放置位置。caption-side的取值有：（默认值是top）：

①top：把表格标题定位于表格之上。

②bottom：把表格标题定位于表格之上。

③inherit：从父元素继承 caption-side 属性的值。

不同取值的效果：html表格布局2708 html表格布局2715

3.4 empty-cells属性

该属性规定了是否显示表格中的空单元格，如果显示，就会绘制出单元格的边框和背景.它仅在border-collapse取值为separate时才起作用。empty-cells的取值有：

①hide：不在空单元格周围绘制边框。

②show：在空单元格周围绘制边框。

③inherit：从父元素继承 empty-cells 属性的值。

不同取值的效果：html表格布局2904 html表格布局2909

3.5 table-layout属性

该属性用于指定完成表布局时所用的布局算法，即表格的列宽度是由单元格内容设定【即自动布局】，还是由表格宽度和列宽度设定【即固定布局】。table-layout的取值有：（默认取值是automatic）

①automatic：列宽度由单元格内容设定。

②fixed：列宽度由表格宽度和列宽度设定。

③inherit：从父元素继承 table-layout 属性的值。

当已经设定表格三列的宽度为20%,40%,40%，同时设置table-layout时的效果：html表格布局3160 html表格布局3162

4.表格布局

表格的功能主要有两种：结构布局（即组织页面的排版）、内容容器（即组织和显示信息）。

网页结构是由一个个矩形组成的，所有的内容都是放在矩形内的。这些矩形就可以是一个个表格；网页中的文字、图片、多媒体等内容都可以放在表格的单元格内。

一般通过表格的嵌套实现页面的结构布局。

布局示例：html表格布局3311

代码：html表格布局3317

参考网站：

w3cshcool: http://www.w3school.com.cn/