从父元素入手

如果我们有这样一段代码：

代码的执行效果大家也很容易知道，现在我们就来让这个文字在垂直和水平方向实现居中：

在classcontainer中添加如下代码：

display: flex;

align-items:center;//让子元素垂直居中

justify-content:center;//让子元素水平居中

这时我们发现，文字已经在水平方向和垂直方向居中了。

在实际开发中，经常会遇到这样的需求，类似于图片和文字处于同一行，而图片的高度大于文字，需要使文字看起来在图片的中间部位，如下图：

然而使用flex方式实现这种布局，也很简单：

只需要在<span>元素前面添加相应的<img>元素就可以了。

注意想要垂直居中元素，其父元素一定是要有高度的。

从子元素入手

还是之前的代码，这次我们只需要在class等于container中添加一个属性display：flex即可，之后还是以该元素内的span为例，在span元素上添加如下代码：

width: 300px;//设置元素宽度
align-self:center;//让元素垂直居中
margin:0 auto;//让元素水平居中

也实现了相同的效果。
justify-content属性还有如下这么多的属性，可以尝试一下：

flex-start/flex-end/center/space-between/space-around。

同样，用在子元素上的align-self也有如下的值:

flex-start/flex-end/center/flex-auto(填满)/baseline/stretch(填满)。

当我们想创建一个前端项目的时候，首先我们需要配置开发的环境，初始化目录结构，下载一些库和框架文件（如JQuery，BootStrap），以及一些编译环境（就像Less），可能还要配置单元测试框架,YEOMAN就可以帮我们做这一系列的繁琐工作，你需要做的只是敲几个命令，你熟悉的项目框架就已经搭建好了。

YEOMAN包括三部分组成：YO、GRUNT(部署、预览、测试)、BOWER(包管理工具)。

这里只分享一些简单的用法，至于高大上的东西还是要大家一起研究学习。

首先你需要做的就是下载安装Node.js，安装好之后我们还需要安装一下bower:

-$ npm install -g bower

安装YEOMAN

-$ npm install -g yo

安装完之后，输入yo，如果出现了下面这个图片，证明你已经成功了！

这是我们就可以使用YEOMAN来创建我们的项目了，如果你喜欢使用Angular(其他的也是一样的)，首先你需要选择Install a generator来安装你的框架，之后输入你的框架名称，YEOMAN会替我们寻找我们想要的东西。

安装好之后在Run a generator下面选择你的框架（别忘了先创建一个项目文件夹，cd到里面）：

YEOMAN就会为我们创建好我们的项目了。YEOMAN在初始化项目之后会自动执行npm install和bower install下载依赖文件，并不需要我们手动执行。

我们的项目文件会出现在app这个目录之下，你会发现，这个文件夹下面的东西就是我们熟悉的了。

接下来我们就可以在这个基础上开发我们的项目了。

变量的声明提前

变量的声明会提前，这个相信大家都知道了，直接上代码：

function testFn(){
    console.log(name);
    var name = 'Bill';
}

这段代码会在控制台打印出undefined，很显然，js中使用一个不存在的变量会报错，然而我们的name是在执行console.log()之后定义的，上面的代码等价于：

function testFn(){
    var name;
    console.log(name);
    name = 'Bill';
}

所以并不会出现错误，这就是变量的生命提前。

函数的声明提前

函数的声明提前和变量的生命提前类似，但是我们在声明函数的时候有两种方式经常使用，一种是JS中的函数声明：

function testFn(){
}

就像这样，而另一种形式是使用表达式的方式声明：

var test = function test () {
}

这两种方式在使用的时候需要注意一下，第一种方式可以在声明函数之前调用函数（因为函数的声明会提前，使得你在调用函数的时候，函数已经存在了），而第二种方式则类似于变量的提前声明，只是声明了test这个变量，但并没有对其赋值，所以当你在声明函数之前调用这个函数时，test虽然存在，但他的值还是undefined，所以会出现错误。

单行文本溢出处理

首先，容器需要设置固定的宽度，以span标签为例：

span{
     width:100px;
}

接下来设置元素的如下属性：

span{
    width:100px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

这样单行文本的溢出处理就完成了。

多行文本溢出处理

同单行文本一样，也要规定容器的宽度，于单行文本不同的是将white-space属性替换为如下属性：

display: -webkit-box;
overflow: hidden;

word-break:break-all;
text-overflow:ellipsis;

-webkit-box-orient:vertical;
-webkit-line-clamp:2; //设置显示的文本行数

可以自己测试一下效果。

之前面试遇到这样一个问题，如何将一个div中的子元素颠倒顺序，之后总结了一下方法：

方法一：创建文档碎片，倒序遍历原div中的子元素，并插入文档碎片；

var oFrag = document.createDocumentFragment(); //创建文档碎片
var divlist = document。getElementById('container'); //获取外层的父div
var nodeList = divlist.childNodes; //获取子元素节点
for (var i = nodeList.length - 1; i >= 0; i--) {
    oFrag.appendChild(nodeList[i]);//向文档碎片中添加子元素
};、
while (divlist.hasChildNodes()) {
    divlist.removeChild(divlist.firstChild);//移除原子元素
}
divlist.appendChild(oFrag); //添加新的子元素

方法二：

function reverse(ele){
    //创建一个DocumentFragment作为临时容器
    var f = document.creatDocumentFragment();
    //从后至前循环子节点，将一个将每一个节点移动到文档片段中
    //值得注意的是，给f添加一个节点，，该节点会自动从n中删除
    while(ele.lastChild) f.appendChild(ele.lastChild);
    ele.appendChild(f);
}

移动设备的像素

我们都知道iPhone5屏幕的像素是6401136，然而，当你想把640px1136px的图片完全显示在iPhone的屏幕上时，会发现图片并不能全部显示。

因此，这个640*1136的单位和我们设置的px并不是一样的，iPhone指的是dp，也就是我们常说的物理像素，而我们使用的px是逻辑像素，逻辑像素于物理像素与PPI(屏幕每英寸的像素数量)和dpr(设备像素缩放比)有关。

PPI的计算

PPI指的是屏幕每英寸的像素数量，这里的像素指的是物理像素，也就是设备的像素，PPI越高，图片越清晰。

PPI的计算还是以iPhone5为例：iPhone5的屏幕是4英寸，所以我们求得4英寸长度上的像素总数，除以4，就可以得到iPhone5的PPI了，计算方式如下：

PPI=√（1136²+640²）/4 = 326，所以iPhone5的PPI就是326。

dpr的获取

dpr，也就是设备像素缩放比的获取如下图：

从图上我们可以知道iPhone5的dpr等于2，现在我们可以看下一个公式了。
8
1px = (dpr)² * dp ，所以，1px在iPhone5上就相当于4dp，这是在平面上看，那如果在某一个纬度上，1px = dpr * dp，所以在iPhone5上，1px = 2dp，那么iPhone5的屏幕应该是320px*568px。

因此我们的图片在iPhone5的屏幕上时显示不全的。

计算流程图

transform

transform属性可以对元素的位置、形状进行改变，包括平移、旋转、缩放、翻转等等。

transform:translate(10px,10px) rotate(90deg) scale(1.5,1.5) skew(20deg,20deg) rotateX(120deg);
//分别表示了将元素平移，旋转、缩放和翻转，以及3D转换中的翻转（绕X轴）
transform-origin:50% 50%;
//规定旋转或缩放时，变形的基点位置。第一个值代表水平向，第二个值代表垂直向，（left|center|right|length|%）（top|center|bottom|length|%）

transition(css过渡)

transition: width 1s linear 2s;
//简写的transition属性，规定了要变换的属性，变化的时间，变化的速度曲线，以及变化的延迟。
//需要变换的属性可以是width，也可以是transform，也可以是all

我们可以在某元素的样式里面添加transition属性，规定要变化的属性以及其他参数，在该元素hover时规定变化后的样式。这样就可以实现鼠标经过元素的时候实现元素的过渡效果。

也可以通过js来实现更复杂的过渡控制。或者使用CSS3的animation和@keyframes来实现更复杂的动画效果

之前一直想写重新改版一下自己的bolg，发现了Hexo这个框架， 挺好用的，先分享一下应用hexo搭建个人博客的过程把！

Quick Start

1. 安装 Node.JS 下载连接

2. 安装 Git 下载连接

3. 安装 Hexo（快速、简单且功能强大的 Node.js 博客框架）

- $ npm install -g hexo

4. 创建个人Blog项目（快速、简单且功能强大的 Node.js 博客框架）

-在创建好的项目文件夹内初始化Hexo项目（右键鼠标，选择Git bash)

- $ hexo init  //初始化

-这是hexo会生成一系列我们网站所需文件，其中还有一些依赖的包需要们去下载，执行

$ npm install //安装依赖包

$ hexo generate //生成静态文件

$ hexo server //启动服务（默认是4000端口，可以通过-p进行修改，如hexo server -p 8080）

-接着我们在浏览器中输入localhost:8080/就可以查看我们的项目了，此时的项目是在我们本地的，我们也可以将他部署到github上。参考教程。

4. 主题更换

-在创建好的项目文件夹内有一个themes文件夹，用来存放主题，更换主题很简单，只需要去主题库中把喜欢的主题clone到themes目录，并修改项目文件夹下的_config.yml文件。

theme: 你的主题的名字 //主题文件夹的名字

reduce怎么玩的？

reduce是处理数组元素的一种方法，说点个人的理解：

reduce方法接受两个参数，第一个参数是一个处理函数，第二个参数是一个初始值。先说第一个：

var arr = ["apple","orange","apple","orange","pear","orange"];
arr.reduce(function(previous, current, index, array){
    console.log(previous, current, index, array);
})
//上面的代码会输出：
// apple orange 1 ["", "orange", "apple", "orange", "pear", "orange"]
// undefined "apple" 2 ["apple", "orange", "apple", "orange", "pear", "orange"]
// undefined orange 3 ["apple", "orange", "apple", "orange", "pear", "orange"]
// undefined pear 4 ["apple", "orange", "apple", "orange", "pear", "orange"]
// undefined orange 5 ["apple", "orange", "apple", "orange", "pear", "orange"]
// undefined

处理函数有四个参数，分别代表：

previous：通过上一次调用回调函数获得的值。
current：当前数组元素的值。
index：当前数组元素的数字索引。
array：包含该元素的数组对象。

由于上面的例子我们没有在调用reduce方法时传入一个初始值，所以在第一次执行回调时，previous 是数组的第一个元素，current则是数组的第二个元素，index为 1，array则是整个数组。

当第二次执行回调的时候，由于previous是指通过上一次调用回调函数获得的值，然而我们并没有在回调函数中返回任何值，所以第二次previous的值为undefined，当我们在毁掉函数的末尾添加一句话return previous;。这时，你会发现所有的undefined都会变成apple。

下面简单修改一下代码，添加一个新的方法：

function getWordCnt(){
    return arr.reduce(function(previous, current){
        previous[current] = (previous[current] + 1) || 1;
        return previous;
    },{});
}
console.log(getWordCnt());   //Object {apple: 2, orange: 3, pear: 1}

上边的例子，我们给reduce方法传入了一个空对象作为初始值，那在第一次执行回调的时候，previous就是这个{},current是数组的第一个元素apple，index为 0,array还是整个数组。

如上代码实现了一个统计数组中相同元素出现的次数的功能，在回调函数中我们每次都会判断previous中是否已经存在了当前元素，并作相应的处理，之后将previous返回。最后我们会将处理结果对象返回。

reduce的用法

reduce可以用在求数组的合，统计数组中元素的个数，将二维数组转化成一维数组(concat方法)等等，主要还是看自己的想法。