今天完成的事情：任务的深度思考，看了点js基础。
明天计划的事情：接着撸基础。
遇到的问题：学习方法有问题。
收获：

为什么要做组件库？

从开发者角度来看：

在CSS上，保证代码上的模块化，具有独立作用域；       

从公司角度来看：

业务划分更佳清晰，新人接手更佳容易，可以按组件分配开发任务；

项目可维护性更强，提高开发效率；

更好排查问题，某个组件出现问题，直接对组件进行处理；

目前流行的组件库有哪些？css，js各有哪些流行的库？

最流行的当属jQuery， 这货是用来做HTML元素选择操作、css和动画、事件绑定、ajax封装等所有网页基本业务的，其中很多设计特点，和方法名称，都被业内完全认可的，跟jQuery类似的库有很多：prototype，mootools，国内也有很多公司做了自己的类似的库。

由于IE8以下浏览器不能兼容ES5的一些数组对象操作的方法，underscore.js 做了这些常用方法的兼容，并且扩展了大量的常用数据操作方法。 数据过滤、分组、选择、循环等等。

模块化的库： 实在是多的数不胜数，最流行的当属requireJs和seaJs，比较纯粹的模块化库，此外，BAT以及其他顶级的(不顶级的)互联网公司几乎只有有一个技术能力不错的前端架构，都会有自己的库，百度的最出名的是esl，腾讯的JX，阿里系的seaJS和KISSY，等。

还有一些专做图表制作的，比如业内最出名的矢量图库highcharts，百度的canvas图库echarts等。

js进行复杂的HTML拼装的时候。可能需要使用js模板引擎，这样的库也是数不胜数，handlebars，Mustache，jade等

框架： 以前的backbone、canjs，现在的angular等

经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

1. IE6不支持png-24透明图片

在IE6浏览器上，使用png24为的图片不透明，出现背景。

解决方法：图片使用gif格式，或者png-8格式图片。

2. 3像素问题

解决方法：对另一个div也使用float;

3. 浏览器默认的margin和padding不同

解决办法：引入normalize.css  通配符就不要用了，影响浏览器渲染速度。

4. IE5-IE8不支持opacity

IE5-IE8不支持css属性opacity

解决方法：这时可以另外添加ie滤镜alpha

5. IE6不能定义1px左右宽度的容器

IE6及其更低的版本

创建一个高度为1px的容器，在IE6中没效果。

解决方法：因为行高line-height在IE6下有默认值，设置 line-height:1px|overflow:hidden|zoom:0.08.

6. IE6不支持min-*:

IE6不支持min-height属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度。

解决方法：利用IE6不识别！Important，给元素设置固定高度，并且设置元素高度自动。

7. 双外边距浮动问题：IE6及其更低的版本。

问题描述：块属性标签float后，又有横行的margin情况下，在IE 6显示margin 比设置的大。

解决办法：将元素的display属性设置为inline，因为元素是浮动的，所以这么设置

Quirks模式是什么？它和Standards模式有什么区别？

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

HTML5的离线储存原理及实现？

离线储存的优点：

1.离线浏览——用户可以在应用离线时使用它1

2.速度——已缓存资源更快

3.减少服务器荷载——浏览器将只从服务器下载更新资源或更改过的资源

离线储存基于新建的 .appcache文件。通过文件上的“解析清单”离线存储资源。

知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗?

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。

知道css有个content属性吗？有什么作用？有什么应用？

content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被所有主流浏览器支持。在CSS 3 Generated Content工作草案中，content属性添加了更多的特征

content属性与:before及:after伪元素配合使用生成文本内容

谈谈以前端角度出发做好SEO需要考虑什么?

精减代码

CSS Sprites

为图片指定宽度与高度

启用Keep-Alive属性

使用浏览器缓存

启用GZIP压缩

链接：https://blog.csdn.net/ayangjing/article/details/12996825

请描述 BFC(Block Formatting Context) 及其如何工作？

定义：一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

2.怎样才能形成BFC

float的值不为none。

overflow的值不为visible

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

position的值不为relative和static

css3中flex boxes

fieldset元素

3.BFC的作用

包含浮动元素(清除浮动)BFC会根据子元素的情况自适高度，这个特性是对父元素使用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的

不被浮动元素覆盖 浮动元素会无视兄弟元素的存在， 覆盖在兄弟元素的上面， 为该兄弟元素创建BFC 后可以阻止这种情况的出现

4.BFC规则

内部的Box会在垂直方向，从顶部开始一个接一个地放置

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此

BFC的区域不会与float box叠加

描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？

flex布局

flex他的所有子元素自动成为容器成员

容器默认存在两根轴，一个水平方向的轴，一个垂直方向的轴

flex的布局就是根据这两根轴来实现的。并且这两根轴还可以变换位置。水平方向的轴可以把它的方向变换为垂直方向。

任务总结：

任务名称：CSS=TASK14/15

成果链接：https://tinklegcy.github.io/css1/task15/jnshu.html

任务耗时：2018/8/9-2018/8/18 延期，延期两天

技能脑图：

个人脑图：

官方脑图：

任务总结：

1. 1. 任务进度不符合预期，延期，如果延期，原因是请假耽误一段时间，不能因为请假而在耽误
   2. 脑图对比分析

   3. 首先是学习了组件化的概念

      传统开发方式效率低以及维护成本高的主要原因在于很多时候是将一个系统做成了整块应用，而且往往随着业务的增长或者变更，系统的复杂度会呈现指数级的增长，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。

      所以就有了组件化。

      组件化是从“预整体”(抽象)中分解拆分出各个部分，然后组合成整体(实体)，每个部分有特定的功能，某个地方需要什么功能，直接一个可实现该功能的组件插进去即可。

      这样就减少了代码的整体耦合性，一旦发生更改只需改变相应的组件就可以了。

      组件一般选择公共样式，或者是以后也会使用频率较高的，更改频率较高的样式...方便日后维护。

   4. 还有重点是轮播图，不使用bootstrap的carousel插件的话，纯CSS写，我们只能在自动轮播和手动轮播之间选取一种；

      如果是自动轮播，就涉及到annimation的动画，记得写关键帧；

      如果是手动轮播的话，难度就大一些，会用到到伪类checked，超级兄弟选择器“~”，input的radio属性来模拟点击事件。