本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。
差异比较
CSS3
差异
transition
在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。
常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发
需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。
只能定义开始状态和结束状态，不能定义中间状态。
animation
可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数。
网页加载时会直接执行，可以自行控制各阶段动画的变化
animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。
CSS3
简写顺序
transition
[property名称][duration ...
基本选择器 Basics
*选择所有元素
.class选择class，如：$('.mybox')
element选择element，如：$('p')
#id选择id，如：$('#box')
selector1,selectorN可以同时选择多个元素，如：$('div, p.box, #phone')
层级选择器 Hierarchy
parent > child选择指定元素下的指定子元素，如：$('ul.tonav > li')
ancestor descendant选择一个元素里所有的后代元素，如：$('form input')
prev + next选择所有指定元素后紧跟着的元素，如：$('label + input')
prev ~ siblings选择与指定元素之后有相同父级的同级选择器，如：$('#prev ~ div')
基本过滤器 Basic Filters
:animated选择动画进行中的所有元素。如：$('div: ...
前端优化浏览器发送HTTP请求，服务器收到请求全文后，返回HTTP响应，在浏览器接收之后结束这个过程。浏览器和服务器只有一次互动的机会，浏览器主动发起，而服务器被动地根据收到的请求内容返回结果。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据的过程。
前端优化的途径
页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；
代码级别的优化，例如JavaScript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等。
页面级优化1. 减少HTTP请求数减少HTTP请求数的主要途径1、从设计实现层面简化页面
保持页面简洁、减少资源的使用是最直接的。能使用CSS替代效果就尽量少使用图片。
2、合理设置HTTP缓存
恰当地缓存设置可以大大减少HTTP请求。被缓存资源的请求服务器是304响应，只有Header没有body，没有节省带宽。对于多个页面都可能使用到的代码，尽量拆分到同一个文件中。如果是嵌入页面换来的是增大了页面的体积，而且无法利用浏览器缓存。
3、资源合并和压缩
如果可以，尽可能将外部的脚本、样式进行 ...
命名禁止缩写
精简扼要地对class命名，请勿使用自定义缩写。
class name的命名必须是行为、有语意的。
禁止在非特殊情况下写!important
CSS本身有权重设计，任意地使用!important会造成权重混乱而无法维护。
不可轻易限定宽高
用户可以自行设定自己的浏览器，例如Android手机可以设定显示字体大小，写死的高度会让字体相互重叠。
RWD失效
移动设备的高度是无限的，宽度是有限的。
请不要把宽写死。
img请让它自动缩放
请不要替img的容器设定宽或高，让它根据设备自行缩放。
请使用bootstrap的img-responsive。
如果确实要用： 12width: 100%;height: auto;
如果要给img border-radius设定样式，请使用父元素控制行为，保持img只载入图片，没有样式。
优先使用grid排版
请不要花很多时间在写media query，设定一堆breakpoint，自己写组件样式，自己控制每种设备上的容器宽度。
请使用grid system，这些都是已经成熟的框架，而且有些也已经帮你处理了浏览器相容问题。
...
reduxRedux就是给JavaScript应用程序一个可以预测state的容器。
使用Redux的时候一定要记得以下三大原则：
single source of truth：应用程序的state，皆存储在唯一一个树状结构的store中；
state is read-only：唯一改变state的方式，发送一个描述如何改变的action；
changes are made with pure functions：为了描述action如何改变state，reducer必须改成pure function。
具体运行
当我们要改state时，必须**通过dispatch发送一个action对象到store**，这个action对象是用来描述发生了什么事。
store基本上也不知道收到这个用来做什么，因为它是用来存储state tree的地方，所以store会把「自己目前的state」及「action」交给给Reducer处理。
reducer是一个pure function，它会**根据我们action的要求去做state的更改，并将新的state回传给store**。
我们可以 ...
本文重点记录使用React Native构建双平台App的过程，同时进一步掌握构建过程中运用的技术。
搭建开发环境**安装react-native-cli**：npm i -g react-native-cli
Android SDK安装Android SDK并启动进行配置：
配置环境变量
123export ANDROID_HOME=~/Library/Android/sdkexport PATH=${PATH}:${ANDROID_HOME}/toolsexport PATH=${PATH}:${ANDROID_HOME}/platform-tools
Android 虚拟机设定Genymotion的Android SDK 位置（Android SDK 的路径可以在 SDK Manager 上找到）。
模拟器有多款模拟器可供选择，Android Studio自带，Genymotion和夜神模拟器，推荐选择夜 ...
React项目指导使用webpack需要安装的依赖
webpack，webpack-cli，react，react-dom
babel-loader，@babel/core，@babel/preset-env，@babel/preset-react
设置.babelrc，{"presets": ["@babel/preset-env","@babel/preset-react"]}
设置scripts：
12"dev": "webpack --mode development","build": "webpack --mode production"
设置webpack-dev-server：
1234567devServer: { compress: true, port: 9000， hot: true},"start": "webpack ...
此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。
使用line-height做垂直居中
See the Pen
使用line-height做垂直居中 by whjin (@whjin)
on CodePen.
使用line-height + inline-block做多行文字的垂直居中
See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin)
on CodePen.
使用:before + inline-block做垂直居中
See the Pen
使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin)
on CodePen.
使用padding做垂直居中
See the Pen
使用padding做垂直居中 by whjin (@whjin)
on CodePen.
使用absolute + margin负值做垂直居中
See ...
自动分配宽高123justify-content: space-between;display: grid;grid-template-columns: repeat(auto-fill, 96px);
CSS-编程技巧
使用百分比而不是固定的宽度。或者使用相对的宽度：vw, vh, vmin, vmax
在大屏幕上要有一个固定宽度的元素时，使用 max-width，让其不用media query就能自适应小屏幕
在 img, object, video, iframe 加上 max-width: 100%
当需要填充元素的背景图片时，使用 background-size: cover 让图片能保持原始比例。在移动设备上使用高解析图片不是明智的做法
制作 grid 页面时让 viewport width 来决定每一列的数量。Flexbox 或者 display: inline-block 就可以做到
当制作多栏的的文字区块时，设定 column-width 而不是 column-count，让你在小屏幕上会得到一个栏位
减少重复代码原则：
半透明的边界
See the Pe ...
QuasarQuasar是一款基于Vue.js开发的UI框架，可以让你轻松构建网站简洁明快的界面，更重要的是它还能让你轻松做好RWD（响应式网站设计），除此之外还能帮助你加上PWA，使你的网页变成手机上的App。
以下内容来自官网Quasar Framework，概括了Quasar的主要特点。
Quasar是MIT许可的开源框架（基于Vue），可帮助Web开发人员创建：
响应式网站
PWA
通过Apache Cordova构建移动App
多平台桌面应用程序（使用Electron）
选择Quasar的5个理由
内建了Material及IOS两种主题
组件均内建RWD快速响应
多样的基础UI组件库
自带了Vuex、VueRouter、Vuei18n（多国语系）
强大的部署工具
安装指南首先安装Node.js和vue-cli，具体安装方法查看官网资料。
然后安装Quasar，npm install -g quasar-cli。
最后搭建项目：quasar init <folder name>
取代main.js的quasar.config.js设置文件：
引用Quas ...
