今天完成的任务

a.任务14~15的完成

b.任务14~15的深度思考

b.拓展知识

明天的计划

a.js的学习

b.拓展

遇到的问题

大致问题没有，就是第三个页面有点繁琐，还有就嵌套的不熟练。从写的时候下意识各种想强行省代码，几次造成了因为没有嵌套该

有的div盒子做约束，使布局乱套，还是一个不熟练

再说一说需要注意的知识难点：

遮罩层的制作(好像并没听到他的专有名词，就随便取了我理解里能贴合的名字把）

核心css属性： 

1.hover，因为这个东西是要处于点击触发的，所以一般情况是出于display:none；状态下的，通过点击前面的div触发hover

导致状态更改为  :display:inline-block;显现出来

2.rgba: 颜色透明度，让背景色能透出后面的元素（为什么不用opacity是因为rgba()只作用于元素的颜色或其背景色而opacity

作用于元素，以及元素内的所有内容的透明度。使用opacity的话，就全部都透明化了，就没有这种效果了，你只想如果后面文字

图画跟这透明，多吃藕啊）

3.z-index的设置：设置遮罩层折叠在目标div上面。

收获

什么是组件？

组件

它的核心意义在于代码复用。功能相对单一或者独立，在整个系统的代码层次上位于最底层，被其他代码所依赖。

模块

它的核心意义在于分离职责。它的关注点在于功能划分。 例如： 视频通话、语音通话等功能就可以被分为不同的模块

意义

为前端提供了很好的分治策略，可以实现独立维护，可维护性强

组件具有独立性，组件之间可以自由组合

页面只不过是组件的容器，负责组合组件即可形成功能完整的界面

原则

标准性

任何一个组件都应该遵守一套标准，可以使得不同区域的开发人员据此标准开发出一套标准统一的组件。

组合性

组件之前应该是可以组合的。我们知道前端页面的展示都是一些HTML DOM的组合，而组件在最终形态上也可以理解为一个个的HTML片段。那么组成一个完整的界面展示，肯定是要依赖不同组件之间的组合，嵌套以及通信。

重用性

任何一个组件应该都是一个可以独立的个体，可以使其应用在不同的场景中。

可维护性

任何一个组件应该都具有一套自己的完整的稳定的功能，仅包含自身的，与其它组件无关的逻辑，使其更加的容易理解，使其更加的容易理解，同时大大减少发生bug的几率。

什么是CSS hack

Hack：修改的意思，由于不同的流览器或某浏览器的不同版本（IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

hack的原理

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。 

1.什么是渐进增强

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

.transition { /*渐进增强写法*/

-webkit-border-radius:30px 10px;

-moz-border-radius:30px 10px;

border-radius:30px 10px;

}

2.什么是优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。

.transition { /*优雅降级写法*/

border-radius:30px 10px;

-moz-border-radius:30px 10px;

-webkit-border-radius:30px 10px;

}

区别

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

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