今天完成的事情： 

做完任务14、15三个页面

弄小课堂后事

明天计划的事情：

学习JS 

结尾CSS

 
遇到的问题： 

简化代码，并且把CSS样式放在一个文件夹里。

三个页面都有用到媒体查询。不知道怎样把媒体查询优化。

@media screen and (max-width: 992px) and (min-width: 768px) {
  .grid-box {
    width: 50%;
  }
}
@media screen and (max-width: 768px) {
  .grid-box {
    width: 100%;
  }
}

用的媒体查询有三种

@media screen and (max-width: 992px) and (min-width: 768px)

@media screen and (max-width: 768px) 

@media screen and (min-width: 992px)

这三种媒体查询分别在布局在三个页面的样式中，并且这三种媒体查询里还有各种样式。不知道用怎样的方法优化才是最好的。

收获：

代码的组件化，模块化

为什么要做组件库？

从开发者角度来看：

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

从公司角度来看：

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

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

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

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

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

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

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

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

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

6. 框架： 以前的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模式下却会失效。

渐进增强和优雅降级之间有什么不同?

1.什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。

2.什么是优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。

区别

1.）如果你采用渐进增强的开发流程，先做一个基本功能版，然后针对各个浏览器进行渐进增加，增加各种功能。相对于优雅降级来说，开发周期长，初期投入资金大。 你想一下不可能拿个基本功能版给客户看呀，多寒酸，搞不好一气之下就不找你做了，然后就炸了。但是呢，也有好处，就是提供了较好的平台稳定性，维护起来资金小， 长期来说降低开发成本。

2.）那采用优雅降级呢，这样可以在较短时间内开发出一个只用于一个浏览器的完整功能版，然后就可以拿给PM找客户谈呀，可以拿去测试，市场试水呀，对于功能尚未确定的 产品，优雅降级不失为一种节约成本的方法。

进度：task14、15

任务开始时间：2018.6.18

预计结束时间：2018.6.21

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-687.html