今天完成的事情：

1.完成css任务13

2.用sass来优化css写法，优化代码

3.学习JavaScript

明天计划的事情：

1.开始css任务14

2.继续学习JavaScript

3.CSS基础知识查漏补缺

遇到的问题：

1.resetting 和 normalizing 之间有什么区别？

   目前为止，市面上的五大主流浏览器为IE、Chrome、Firefox、Safari和Opera。 当我们没有给html元素设置样式时，这5个浏览器会根据自己的默认样式对html元素进行布局，但是由于每个浏览器的默认布局样式不同， 会导致元素的展示方式出现差异，从而使同一页面在不同浏览器中的展示出现差异。使用CSS样式重置这一方式，就可以使网页展示效果保持 一致。

   1）什么是CSS RESET？

        我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。 CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师 在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定 义的样式赋值，所以我们要先定义好一些CSS样式，去“覆盖”浏览器的CSS默认属性， 来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

        CSS Reset的作用：

       CSS Reset让各个浏览器的CSS样式有一个统一的基准，而实现这一基准最主要的方式就是“清零”

       举例：

               * { outline: 0; padding: 0; margin: 0; border: 0; }其中 * 就是常说的通配符，意思是“所有的”。使用 * 代表所有的标签或元素，就叫做通配符选择器。

              由于 * 会匹配所有的元素，所以当浏览器解析到 * 时，会将页面内的所有标签都进行如上的样式重置， 这样会影响网页渲染的时间，所以使用 * 时一定要慎重，尽量不要在样式重置时应用 * 。

       CSS Reset的一些方法（推荐第2、4、5篇）

              目前比较全的CSS重设(reset)方法总结

              HTML5 css reset

              CSS工具：重置CSS

              几个CSS重置默认样式reset.css代码

             css重置样式表

   2）什么是NORMALIZE？

         Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上 提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css 是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被 用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

                源码见：normalize、GitHub源码

        normalize创造的目的：

               保护有用的浏览器默认样式而不是完全去掉它们

               一般化的样式：为大部分HTML元素提供

              修复浏览器自身的bug并保证各浏览器的一致性

              优化CSS可用性：用一些小技巧

             解释代码：用注释和详细的文档来

     3）RESET和NORMALIZE的区别

           1. Normalize.css 保护了有价值的默认值

               Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。 相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再 为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时， Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

           2. Normalize.css 修复了浏览器的bug

              它修复了常见的桌面端和移动端浏览器的bug。 这往往超出了Reset所能做到的范畴。关于这一点， Normalize.css修复的问题包含了HTML5元素的显示设置、 预格式化文字的font-size问题、在IE9中SVG的溢出、许多 出现在各浏览器和操作系统中的与表单相关的bug。

           3. Normalize.css 不会让你的调试工具变的杂乱

              使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链， 如下图所示。在Normalize.css中就不会有这样的问题，因为在我们的准则中 对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。

           4. Normalize.css 是模块化的

               这个项目已经被拆分为多个相关却又独立的部分， 这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。 因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。

           5. Normalize.css 拥有详细的文档

              Normalize.css的代码基于详细而全面的跨浏览器研究与测试。 这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。 这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、 浏览器之间的差异，并且你可以更容易地进行自己的测试。

             总得来说，CSS Reset 是革命党，CSS Reset 里最激进那一派提倡不管你有用没用， 通通给我脱了衣服，于是 *{margin:0;} 等等运动，把人家全拍了。看似是众生平等了， 实则是浪费了资源又占不到便宜，有求于人家的时候还得给加回去，实在需要人家的默认 样式了怎么办？自己看着办吧。

             Normalize.css 是改良派。他们提倡，各个元素都有其存在的道理， 简单粗暴地一视同仁是不好的。谁都有谁的作用，给他们制定个规范，确保他们 在任何浏览器里都干好自己的活儿就好了。

收获：

1.什么是BFC  

    在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：

  浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

    为了便于理解，我们换一种方式来重新定义BFC。一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

        1、float的值不是none。
        2、position的值不是static或者relative。
        3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
        4、overflow的值不是visible

        BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。