终于啊

历时不知道多久，ppt终于上了11！

当前

不知不觉5个月就又过去了，这个Blog也渐渐的被我当作写随笔的地方话说当初设计时就是想要一个写随笔的Blog，最近感觉突然空出来了很多时间，可以想做什么就做什么，感觉真正体验到了大学的生活我大一大二在干嘛？，可无奈大学时光已经进入倒计时。。（

关于这个主题，以后应该是不太会再做一些调整了话说不是就我一个人用？，当初刚入门Web写的作品，各方面都很不足，目前也无心修改了，就这样吧。

书刊计划

五一假期，意料之外的悠闲，罗列一下近期要看的书目：

• 门
• 月亮和六便士（很有名，但是还没有看过）
• 沉默的大多数
• 算法（又看Java，又看算法orz）

CSS3 Animation

animation: name,duration,timing-function,delay,iterationn,direction,fill-mode

Animation-delay

animation-delay: time
定义于动画开始之前的时间，默认0s，如定义为负值，则即刻开始，但会从序列中对应的|<\time>|位置开始，即-1s，动画会从1s时的位置开始。

Animation-direction

animation-direction: normal||alternate||reverse||alternate-reverse
简单的理解为动画运行的方向，有4个value：

• normal,即正向运动（默认）

• alternate，交替运动，即正反正反。。。

• reverse，反向运动

• alternate-reverse，先反向，再正向

Animation-duration

animation-duration: time
动画周期，负值、无单位均无效。

Animation-iteration-count

animation-iteraion-count: Num||infinite
动画被播放的次数，默认1，

Animation-play-state

animation-play-state: running||paused
定义动画是否运行或者暂停。

Animation-timing-function

animation-timing-function: value
定义在每一个动画周期上的节奏，有6个属性值：

• linear，匀速

• ease，由低速到高速公路

• ease-in，低速开始

• ease-out，低速结束

• ease-in-out，低速开始结束

• cubic-bezier，三茨贝塞尔曲线

cubic-bezier


贝塞尔曲线，即依据多个位置的点，绘制出的一条光滑的曲线。

三次贝塞尔曲线：
$B(t)=P_0(1-t)^3+3p_1t(1-t)^2+3P_2t^2(1-t)+P_3t^3,t\in[0,1]$

二次贝塞尔曲线推导:


$由图可知，曲线方程即为P_F轨迹方程，根据定义$
$$\frac{AD}{AB}=\frac{BE}{BC}=\frac{DF}{DE}$$
$因为点F从D到E，D从A到B，E从B到C$
$所以,设P_i(x,y),t\in[0,1],即t_a=0,t_b=1$
$$P_B-P_A=v$$
$$P_D=vt+P_A=P_B+(1-t)P_A$$
$同理$
$$P_E=P_C+(1-t)P_B$$
$$P_F=P_E+(1-t)P_D$$
$联立上三式，即得$
$$P_F=(1-t)^2P_A+2t(1-t)P_B+t^2P_C$$
$PS:三次同理，无非多带几个P_D=P_B+(1-t)P_A方程$

timing_function中的贝塞尔曲线为三次，因此，需要四个控制点，但默认P_0为（0，0），而P_3为（1，1），cubic-bezier(x1,y1,x2,y2)

Animation-name && @keyframes

name置顶一系列的动画，而名称由@keyframes（关键帧）定义。

@keyframes

通过Persentage,from-to，控制动画中的中间步骤。

1
2
3
4
5

@keyframes IDENT {
    0% {Properties: Properties value;}
    Persentage {Properties: Properties value;}
    100% {Properties: Properties value;}
}

Transition

Transition（过渡），可使元素从一种样式变换为另一种样式。
transition: property,duration,timing-function,delay;

Transform

变形，包括了rotate（旋转），skew（扭曲），scale（缩放），translate（移动）以及matrix（矩阵变形）。

1.rotate

rotate(<angle>),对元素进行2d旋转，\为正即为顺时针。
rotate3d(x,y,z,<angle>)定义在x,y,z轴上的旋转，定义域在[0,1]，描述元素在围绕x/y/z周上的旋转矢量值。但在旋转时需注意transform-origin的设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*swing*/
.box {
  background: skyblue;
  width: 200px;
  height:100px;
}
.swing {
  transform-origin: top center;
  animation-name: swing;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}
@keyframes swing {
  20% {transform:rotate3d(0,0,1,15deg);}
  40% {transform:rotate3d(0,0,1,-10deg);}
  60% {transform:rotate3d(0,0,1,6deg);}
  80% {transform:rotate3d(0,0,1,-5deg);}
  100% {transform:rotate3d(0,0,1,0deg);}
}

2.translate

translate(x,y)移动

3.scale

scale(x,y)水平竖直方向上的缩放

4.skew

skew(ax,ay)挤压，但坐标系和我们熟知略有不同，其中，ax为与x轴所成角，ay同理。

1
2
3
4
5
6
7
8
9

/*speed in*/
@keyframes lightspeedin {
  0% {transform:translate3d(100%,0,0) skew(-2deg);
  opcity:0;}
  
  60% {transform:skew(20deg);}
  80% {transform:skew(-5deg);}
  100% {transform:skew(0deg);}
}

DOM Conclusion

较全的DOM文档
DOM文档

Ajax 初步

Ajax = 异步JS和XML，是一种用于创建快速动态网页的技术。

XMLHttpRequest 对象

用于在后台和服务器交换数据，可使网页的某部分更新的同时，不重新加载整个页面。

1

var request = new XMLHttpRequest();

XMLHttpRequest 对象有许多种方法，其中Send()、Open()方法用于向服务器发送请求。

‘ GET ‘ Or ‘ POST ‘？

GET相较于POST更快更简单，但在以下情况中，使用POST：

• 无法使用缓存文件（更新服务器上的文件或数据库）

• 向服务器发送大量数据（POST 没有数据量限制）

• 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

1
2
3
4
5
6

//GET请求
request.open("GET","example.txt", true);
request.send();
//POST请求
request.open("POST","example.txt", true);
request.send();

onreadystatechange 事件

onreadystatechange 是一个事件处理函数，它会在服务器给XMLHttpRequest 对象送回响应的时候被触发执行，可能有5个值：

• 0表示未初始化

• 1表示正在加载

• 2表示加载完毕

• 3表示正在交互

• 4表示完成

只要readyState的属性变成4，同时status为200（404时，页面不存在），就可以访问服务器发送回来的数据了。一般，会给它制定一个处理函数：

1
2
3
4
5
6

request.onreadystatechange = function(){
    if (request.readyState == 4 && request.status == 200 ){
        //保存数据
        var txt = request.responseText
    }
}

访问服务器发送回来的数据时，需要通过两个属性完成：

• responseText 用于保存文本字符串形式的数据

• responseXML 用于保存Content-Type(http中的属性)头部中指定为“text/xml”的数据

Reference :

• JavaScript DOM 编程艺术

JavaScritpt 对象小结

构造函数，原型对象，实例对象三者之间的关系

每创建一个函数都含有一个prototype的属性，该属性是一个指针，指向原型对象。

原型对象上含有一个constructor属性，该属性也是一个指针，指向相关联的构造函数。

通过构造函数产生的实例对象含有一个proto属性，指向原型对象，使其能过访问原型对象上的属性和方法。

• 总结：每个函数都有一个原型对象，原型对象上都有一个指向函数的指针，实例中也有指向原型对象的指针，而原型对象中有可以找到函数的制针。

1
2
3
4
5
6
7
8
9
10
11
12
13

//People构造函数
function People(){
    //Type属性
    this.type = 'human';
}
//原型对象上共享的方法showType()
People.prototype.showType = function(){
    alert(this.type);
}
//people实例对象
var person = new People();
//调用原型对象上的共享方法
person.showType();//output: human

原型链

上面说到，每个函数都有一个prototype属性，指向原型对象，可通过将该函数的prototype属性赋值为其他对象的实例，从而共享了其他对象的方法和属性，实现原型链继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function People(){
    this.name = 'The elder';
}
People.prototype.showType = function(){
    alert(this.name);
}
//Man构造函数
function Man(){
    this.age = '';
    this.saying = 'I\'m angry!';
}
//用People的实例对象覆盖Man的原型对象,从而使用People和Man的属性和方法
Man.prototype = new People();
//new一个Man的实例对象
var man = new Man();
//输出
console.log(man.name+': '+man.saying);//output: The elder: I'm angry!

• 总结：和链表有一点像，重写Man的prototype属性，从而使Man的实例proto属性也改变，实现原型链。

2048

因为最近刚学了JavaScript面向对象，就想这着能不能自己实现一些小东西(其实是不想总结原型对象原型继承)，最终决定写一个网页版的2048，但刚开始还是无从入手，也是刚从JavaScript高级程序设计那本书中的原型对象中解脱，于是便百度了一下，发现例子很多，就从中参考了一篇

• 用javascript实现2048的小游戏

大致的通读了一遍博主的源码，以及代码逻辑，就已经能够了悉了，但开始自己上手写还是蛮多问题，主要是JavaScript上的：

1. VScode并不自带完整的语法检查（或许是我没有下插件），很多时候一个 ； 没写，功能就不能实现。

2. 因为有用到jQuery，也只是大致看了一下，只是了解到其能操作HTML页面，也没有更多了

3. 关键算法上并不难写，但某些小错误蛮多的，以及一些设计的细节上没有考虑的那么多，例如added数组我原本设计时是没有考虑的…

4. 字体的样式、CSS3 Animate，更多还是照搬博客（比较懒)

收获还是蛮多的，初窥JavaScript的前端应用，稍微了解了一点jQuery(其实很久之前也看过 用起来不是完全陌生)和熟悉了一下JavaScript语法.

最后是毫无注释源码。

• 毫无注释的 源码

以上。

CSS经典布局

本文主要对一些常见的CSS布局问题进行总结，涉及三栏布局、负margin、清除浮动、居中布局、Flex布局，等等….

基础

一个界面友好的网站，能帮助了解一些大概的CSS布局知识。

• 学习CSS布局

定位

定位是最基本的一个布局问题，其定义一个元素相对于其他元素的位置，这个元素可以是父级元素，也可以是浏览器窗口。

先从position属性说起，static、relative、absolute、fixed和sticky。

• static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。

• relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。

• absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素。

• fixed：元素框不再占有文档流位置，并且相对于视窗进行定位.

• sticky: “fixed” OR “relative”,在屏幕范围内时，当作relative，当该元素移出屏幕范围（viewport）时，作为fixed。

三栏布局

三栏布局其实就是，两边的box宽度固定，中间的box宽度自适应。

1
2
3
4
5
6
7
8

<div class="container">
<div class="middle">中间栏
</div>
<div class="left">左边栏
</div>
<div class="right">右边栏
</div>
</div>

圣杯布局，包含三个box，左中右

• 中间宽度设为width：100%;,占一行。

• 左右box使用负marginmargin-left，将它们提至于中间box同一行。

• 左边盒子margin-left:-100%;。

• 右边盒子margin-right:-右边盒子的长度px;。

• Container再预设左右padding:0 200px 0 220px;，为左右盒子留出位置。

• 使用position: relative;占居Padding两边的空白。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.container {
padding: 0 220px 0 200px;
}
.left, .middle, .right {
float: left;
position: relative;
min-height: 300px;
}
.middle {
width: 100%;
background-color: #fe9898;
}
.left {
width: 200px;
margin-left: -100%;
left: -200px;
background-color: #555;
}
.right {
width: 220px;
right: -220px;
margin-left: -220px;
background-color: blue;
}

清除浮动

清除浮动主要是为了解决高度塌陷的问题

何谓高度塌陷呢？

要解决这个问题，需要先明晰两个概念普通流和浮动

1. 普通流（normal flow）：将窗体自上而下分成一行一行,并在每行中按从左至右的挨次排放元素,即为普通流/文档流。内联元素不会独占一行，而每个非浮动块级元素都独有一行。

2. 浮动(float)：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。需要注意的是，浮动框不属于普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，如果包含框内部不存在其他普通流元素，就会表现出高度为0（高度塌陷）。

方法

1）添加额外标签

通过在浮动元素末尾添加一个空的标签，例如

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#### 2）父元素也设置浮动

#### 3）使用:after伪元素

```css
.box:after {
display: block;
content: "";
clear: both;
height: 0;
visibility: hidden;
overflow: hidden;
}

其效果相当于直接在div.box上添加一个宽高为0的clear：both的div元素.

BFC??

负margin

1.作用于static元素上的负margin

Static元素是没有设定成浮动的元素，
当static元素的margin-top/margin-left被赋予负值时，元素将被拉进指定的方向，例如：

1
2
3
4

/* 元素向上移动10px */
#mydiv1 {
margin-top: -10px;
}

但如果你设置margin-bottom/right为负数，元素并不会如你所想的那样向下/右移动，而是将后续的元素拖拉进来，覆盖本来的元素。

1
2
3
4
5
6

/*
*mydiv1后续的元素向上移动10px，mydiv1本身并不会动
*/
#mydiv1 {
margin-bottom: -10px;
}

如果没有设定width属性，设定负margin-left/right会将元素拖向对应的方向，并增加宽度，此时的margin的作用就像padding一样。

2.作用于浮动元素上的负margin

定义三个box

1
2
3
4
5

<div class="container">
<div class="fl box1">box1</div>
<div class="fl box2">box2</div>
<div class="fl box3">box3</div>
</div>

1
2
3
4
5
6
7
8

.fl {
float: left;
width: 100px;
height: 100px;
}
.box1{background-color: rgba(33, 114, 214, 0.8);}
.box2{background-color: rgba(255, 82, 0, 0.8);}
.box3{background-color: rgba(90, 243, 151, 0.8);}

• 给所有的box都加上margin-left:-25px;

• 只给box3加上margin-left:-200px;

居中布局

• Centering in CSS:A Complete Guide:全面介绍各种情况下的居中布局，但是是全英的。

主体内容：

• 水平居中

• 行内元素(inline)：text-align:center;

• 块级元素(block)：设置宽度且margin-left和margin-right为auto

• 多个块级元素：父元素设为text-align:center;，子元素设为display:inline-block;或用flex布局

• 垂直居中

• 行内元素(inline)

• 单行，设置上下padding相等，或设置height和line-height相等

• 多行，设置上下padding相等，或设置display:tabel-cell和vertical-align:middle,或使用flex布局

• 块级元素(block)，父元素需设相对布局relative

• 已知高度：子元素使用绝对布局top:50%，再用负的margin-top向上拉

• 未知高度：子元素使用绝对布局，top:50%;transform:tranlateY(-50%);

• 水平垂直居中

• To be continued…

Flex布局

Flex布局，官称 CSS Flexible Box，是CSS3中的一种新的布局方式。Flexbox可以控制未知容器元素的对齐方式，排列方向，排列顺序等，甚至是在未知大小的容器。其主要特点是能够修改Flex容器内子元素(flex item)的宽度或高度。

FLex 模块

Flex布局主要由父容器和它的子元素直接构成，，其中父元素称为Flex Container，子元素称为Flex Item。

有关Flex模块更详细的信息 英语警告

使用方法

使用Flex布局只需在父容器元素上设置display属性：

1
2
3
4

.container {
display: -webkit-flex; /* Safari */
display: flex;
}

如果想设置为一个内联元素时：

1
2
3
4

.container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}

注意:属性只要设置在父容器上，其所有子元素将自动成为Flex项目(item)。

Flex容器属性

• flex-direction

这个属性主要设置flex容器的主轴方向，指定flex项目在flex容器中的排列方式。flex容器的主轴方向主要有水平和纵向两种.

1
2
3
4

flex-container {
flex-direction: row;
flex-direction: row-reverse;/*反向*/
}

flex-direction:column;纵向排列，同理。

但注意，其默认值为row.

• flex-wrap

flex项目在flex容器中默认是只显示一行。如果希望控制flex项目在flex容器中按一行或多行排列，可以使用flex-wrap。

1
2
3

.flex-container {
flex-wrap: nowrap;
}

Flex项目在flex容器中默认显示一行，项目宽度将自动缩减来适应容器.

1
2
3

.flex-container {
flex-wrap: wrap;
}

使用wrap属性，item将从左到右由上到下在container中显示。

• justify-content

该属性是flex-direction和flex-wrap的简写，默认是flex-flow: row nowrap;。

• flex-flow

flex-flow指定flex项目在flex容器中沿主轴在当前行的对齐方式

1
2
3
4

.flex-container {
justify-content: flex-start;/*向左靠齐*/
justify-content: flex-end;/*向右靠齐*/
}

1
2
3

.flex-container {
justify-content: center;/*居中*/
}

Flexitem之间间距相对，第一个item和最后一个item向container的边缘对齐。

1
2
3

.flex-container {
justify-content: space-between;
}

1
2
3

.flex-container {
justify-content: space-around;
}

Flexitem前后间距相等

默认：flex-start

• algin-items

Flex项目在容器侧轴对齐方式，类似于justify-content，只不过不是水平方向，而是纵向。这个属性可以设置所有flex项目对齐方式，并且包括匿名元素.

属性值：

• stretch(沿侧轴高度填满容器)

• flex-start

• flex-end

• center

• baseline（按文本基线在侧轴上排列）

Flex项目属性

• order

order属性是用来控制flex容器中flex项目的排列顺序。默认情况flex项目在flex容器的顺序是flex项目出现的顺序。

• flex-glow

这个属性用来指定 flex项目的放大比例，其决定了flex项目相对flex容器自由空间进行放大.

• flex-basis

用来指定flexitem的大小。

• align-self

这个属性用来指定flexitem自身的对齐方式：

1
2
3
4

.flex-item {
-webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Flex项目中的无效属性

float，clear和vertical-align属性应用在flex项目上将会无效和无法将其out-of-flow.

参考文献

• CSS布局说——可能是最全的

• CSS 布局经典问题初步整理

• margin为负值产生的影响和常见布局应用

• 负margin用法权威指南

• 图解CSS3 Flexbox属性

• ……太多 不列了

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1

$ hexo new "My New Post"

More info: Writing

Run server

1

$ hexo server

More info: Server

Generate static files

1

$ hexo generate

More info: Generating

Deploy to remote sites

1

$ hexo deploy

More info: Deployment