flex 是 flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定 flex 布局。 采用 flex 布局的元素成为 flex 容器。其所有子元素会自动成为容器成员，成为 flex 项目。 通过给 flex 容器添加 flex 属性来控制 flex 项目的位置和排列方式。

在编写前端页面的动画效果时，或多或少会用到 filter 属性，由于其属性值过多，故本篇用于整理和记录其相关资料。 filter属性定义了元素(通常是)的可视效果。 属性值如下：

前段时间笔者搭建一个 博客系统 放在服务器上，为了提高访问速度和减轻服务器访问压力，决定将页面中的静态资源使用 CDN 进行加速访问。 常见的 CDN 方案有 BootCDN 和 jsDelivr ，笔者选择后者。 因为笔者编写的 jQuery 自定义插件，但无法上传到 BootCDN 上进行加速使用。而 jsDelivr 不同，它很强大，通过 GitHub 搭配 jsDelivr 可以搭建自己专属的 CDN 库。

笔者在开发这套博客系统时使用 Editormd 作为 Markdown 编辑器，由于不满足其代码高亮的样式，因此选用 highlight.js 插件来实现代码高亮功能。但是，highlight.js 插件不提供行号的设置功能，于是有了该文章。 html 的代码块都是通过 <code></code> 进行封装，我们可以将其内容取出封装到 <ol><li></li></ol> 从而实现设置行号的效果。 下边提供两种实现方式。

为了有效和安全管理插件，在 Sublime Text 的安装目录中创建 Data 目录（之后插件就放在该目录中）。 重启 Sublime Text 后 Preferences-> Browse Package 打开的目录就指向 Data。 主界面 Help-> Enter license，弹出窗口输入如下内容：

之前写过《CSS3 动画简单入门》，文章内容只是简单介绍 CSS3 动画属性的使用，并没有一个综合的案例演示，因此本章作为前者的内容补充。 下面简单介绍本章需要实现的 3D 效果：

近一个月没写 Javascript 代码，有点生疏。正好浏览网页时弹出五子棋的游戏广告，于是想通过编写这个小游戏练练手。 棋盘：通过图片（chessboard.png）和 div 标签渲染出棋盘。

点击劫持，顾名思义，用户点击某个按钮，却触发了不是用户真正意愿的事件。 用户在登陆 A 网站的系统后，被攻击者诱惑打开第三方网站，而第三方网站通过 iframe 引入了 A 网站的页面内容，用户在第三方网站中点击某个按钮（被装饰的按钮），实际上是点击了 A 网站的按钮。 演示图如下：

功能：让元素进行位移。水平向右为正，垂直向下为正，往前为正， 语法： 单位：px，em，rem，百分比。

跨站请求伪造（Cross-site Request Forgery） 在用户登陆目标网站后，后端会返回用户登陆的凭证到前端（浏览器的 cookie）。攻击者诱使用户点击某个超链接，该超链接会发送恶意请求（会携带用户的 cookie），从而冒充用户完成业务请求（发帖、盗取用户资金等）。 笔者以网站的发帖功能为案例对 CSRF 攻击进行简单的讲解。