成果链接：https://qumra.github.io/task-css/task13/task13-1.html

任务耗时： 9.18  1天

官方脑图

个人脑图

任务总结：通过这个任务了解到了css架构的知识，其实目的就在于精简和复用.这个任务中我将一些css样式重置，将一些常用的css拆为样式表，把公用的头部拆了一个组件出来。任务13整个做下来倒是没花多少多长时间，结构比较简单，内容也不多。

今天完成的事情：今天把任务14.15做完了，三个页面总共拆了header,footer,swiper,这几个可以复用的组件。把一些常用的样式放到base这个css中，每个单页面的精细结构都放在各自的模块中。
明天计划的事情：明天打算对css任务做个总结，把之前的落下的深度思考补上，复习js知识，开始js任务。 
遇到的问题：轮播图组件的拆分时，样式问题导致被下面的内容遮盖，后找师兄已经解决，并且轮播图正常滚动。
收获：

1.BFC简单了解：

BFC就是一种布局方式，在这种布局方式下，盒子们自所在的 containing block 顶部起一个接一个垂直排列，水平方向上撑满整个宽度。一个形象的比喻：

把一个页面想象成大的集装箱，这个集装箱里装的货物就是HTML元素。在现实生活中为了避免不同人的货物相互混淆，都是把 货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的货物。

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

float的值不为”none”

overflow的值为auto,scroll或hidden。

display的值为 “table-cell”, “table-caption”, or “inline-block”中的任何一个

position的值不为 “static” 或 “relative”中的任何一个

解决的问题：

1、BFC可以阻止垂直边距叠加问题

2、BFC可以包含内部元素的浮动

3、BFC可以阻止元素被浮动覆盖

4、BFC可以决定清除浮动的范围

详见：http://caibaojian.com/bfc.html

2.js:数组

1.声明数组

1）var Arr=[1,2,5,6];

2)var Arr=new Array(1,3,5);

2.遍历数组

for(i=0;i<Arr.length;i++){

console.log(Arr[i]);

}

3.添加数组

push()可向数组末尾添加一个/多个，并返回新的长度

unshift()可向数组前添加一个/多个，并返回新的长度

eg:var dom=[1,2,4]

console.log(dom.push(7));  //4

4.删除数组

pop()移除最后一个，返回最后一个是值

shift()删除第一个元素，返回最后一个值

eg:var dom=[1,2,5]

console.log(dom.pop());//5

5.连接数组

concat()

var dom=[1,2,4]

var arr=["a","b","c"]

console.log(dom.concat(arr));//(6) [1, 2, 4, "a", "b", "c"]

6.join()把数组转换为字符串

arrayObject.join(符号)

eg:

var dom=[1,2,4]

var a= dom.join(",");

console.log(a);

7.split()把字符串转化为数组

stringObject.split(separator,howmany)

8.排序

sort从小到大

reverse从大到小

9.splice(start,deletecount,val1,val2)

从start位置删除deletecount项，并从该位置插入val1,val2