今天的计划

a.任务13的完善和代码规范

b.任务13里面任务侧滑栏的学习

c.拓展知识

明天的计划

a.任务14的环境配置和学习

b.拓展知识

遇到的问题

a.侧滑栏看了很多资料，头有点混混，  不过还是知道了做法：

1.总体的框架主要是做一个Input的checkbox的列表，然后lable关联起来，在通过css的小细节修改和一些视觉效果

来做成一个侧滑栏的效果。哦，对了！还有一个css动画transition做动画效果。

2.另一个粗糙一点的，就是主要用于transfrom的平移和:hover来做。

css制作侧滑栏的缺点：1，太粗糙； 2，编写很麻烦，很多细节和东西都要编写，造成n多工作码量 3.制作的侧滑栏没办法

重复使用，基本换一个风格就要重新制作一遍

鉴于：某不记名师兄跟我建议， 后面学习js用js制作更方便而且更容易理解，现在用CSS做这个也增加不了太多css知识，所以建议

我先看一下制作原理，等后面学完js的侧滑栏后在回头看一下，进行对比。于是就我也没有直接做了，就弄懂了下大概原理。

收获

一个健壮且可扩展的 CSS 架构所需的8个简单规则

总是类名优先

组件代码放在一起

使用一致的类命名空间

维护命名空间和文件名之间的严格映射

避免组件外的样式泄露

避免组件内的样式泄露

遵守组件边界

松散地整合外部样式

理解：主要思想是把代码分类沙盒化；然后样式的通用类名要求；再分离出可以反复使用的css；最后整合。通俗一点就是先把css分成3个部分header;main;footer。3个部分，并划分成3个子文件夹管理，附带这3个部分需要使用的素材，bootstarp,js ，jq等。注意css里面的类名，个人有个人习惯，但是一定要有看到类名就知道详细情况的作用）

如何做默认样式重置？resetting 和 normalizing 之间有什么区别？

先说明一下为什么要做默认样式：

为什么要做样式重置：到目前为止，市面上的五大主流浏览器为IE、Chrome、Firefox、Safari和Opera。当这些浏览器在载入html文件的时候，如果我们没有给html元素设置样式，浏览器会基于自己的默认样式对其中的一些标签进行页面布局，但是由于浏览器的默认样式不同，所以会导致实现页面布局的方式不同。比如有一些浏览器通过margin实现内容的间距，而另一些浏览器通过padding实现。而且例如如滚动条，按钮，选择框等元素的默认CSS样式，也不近相同。这样就导致同一个页面在不同浏览器载入后显示的效果不同。

制作样式重置：

为了尽可能避免这种情况，我们可以通过使用CSS样式重置这一方式，也就是Css重设即CSS reset。

还有一种样式重置的方式就是使用Normalize.css。Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。

两者的区别：

相较CSS reset，Normalize有一些自己的优势。

1. Normalize.css没有重置所有的属性，所以一些默认公用的属性无需自己再手动添加。

2. Normalize.css修复了浏览器的bug，修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

3. Normalize.css避免了浏览器调试工具中的大段继承链，

4. Normalize.css 是模块化的并且拥有详细的文档，方便进行自己的测试。

如果需要进行浏览器的默认样式重置，则可以根据自己的需要进行设置，或者写一段适合自己的修改默认样式的代码。要避免无意义的重置，尽可能让自己的代码简洁有效优化好。

移动端有哪些常见布局方式？

1、通过设置viewport缩放来实现；

     通过viewport进行移动端适配：

(1) 按照宽度320px实现基本网页布局及样式

(2) 动态设置viewport属性，做适当缩放

eg:通过window.screen.width获取屏幕宽度，如果当前设备屏幕宽度为320px,则缩放比例为320/320=1，

动态设置viewport content initial-scale=1.0,如果屏幕宽度为375，则缩放比例为375/320=1.2

2、通过rem相对单位来实现

通过rem相对单位实现移动端适配：

大概的思路就是在html根节点定义font-size的值，及设置1rem的宽度，这个宽度也是基于320px基础进行缩放的，如果设备宽度是320px时,设置1rem=10px,对于body 32rem=32 10=320px;那么当屏幕宽度为375px是，则1rem=12px,body宽度就相应为32rem=32 12=375px。根节点单位可以通过js来进行初始化

拓展 

a.自适应和响应式的区别