今天完成的事情

完成了任务十四动画效果的添加

今天经过师兄提醒，才知道任务十四还需要实现一个动画效果，在W3C上看到了很多炫酷的动画效果，鉴于时间有限，先做了一个简单的动画，如下图，此效果使用了animation动画效果，结合transform的角度属性结合完成

了解了BFC是什么？

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式

今天遇到的问题

今天开始了js的任务一，当然是一脸懵逼的，不知道咋下手，后来在慕课网上找了一个资料，边看边理解，边理解边按照要求对着敲代码。目前还停留在初始阶段，只知道javascript代码是写在script标签内的，script标签有结束标签，它可以放在html文件header里面，也可以放在body里面，但是注意代码会按照从上而下的顺序执行，位置也不是随便乱放的，有时候可能会有影响。

今天的收获

BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

BFC的特性

• 1.内部的Box会在垂直方向上一个接一个的放置。

• 2.垂直方向上的距离由margin决定

  3.bfc的区域不会与float的元素区域重叠。

• 4.计算bfc的高度时，浮动元素也参与计算

• 5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

• 哪些元素会生成BFC?

  根元素

  float属性不为none

  position为absolute或fixed

  display为inline-block, table-cell, table-caption, flex, inline-flex。

  overflow不为visible

  常见问题

  1，外边距折叠,2，阻止文字环绕,3，清除内部浮动

  解决方案

  1，给折叠的元素其中的一个加一个父元素设设置overflow：hidden

  2，给被环绕的元素设置overflow：hidden

  3，给父元素设置overflow：hidden

  
  

渐进增强和优雅降级

  渐进增强：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

  优雅降级：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

  区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

       优雅降级和渐进增强只是看待同种事物的两种观点。优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。

       优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

      渐进增强观点则认为应关注于内容本身。请注意其中的差别：此处强调的是内容，而不是浏览器。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。

在网页布局中选择渐进增强还是优雅降级？

如果软件开发的预算和时间充足，就不存在抉择的问题。然而现实很残酷，要么开发周期短，要么开发预算少，或者二者兼而有之，这个时候该如何抉择？

     根据你的用户所使用的客户端的版本来做决定。我们所谓的客户端，可以指浏览器，移动终端设备（如：手机，平板电脑，智能手表等）以及它们对应的应用程序（浏览器对应的是网站，移动终端设备对应的是相应的APP）。

     现在有很成熟的技术，能够让你分析使用你客户端程序的版本比例。如果低版本用户居多，当然优先采用渐进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。

     然而事实情况是怎么样的呢？绝大多数的大公司都是采用渐进增强的方式，因为业务优先，提升用户体验永远不会排在最前面。例如：新浪微博网站前端的更新，拥有这种亿级用户的网站，绝对不可能追求某个特效而不考虑低版本用户可不可用，一定是确保低版本到高版本的可访问性，再去渐进增强，采用新功能给高版本用户提供更好的用户体验。但也不是没有反例。如果你开发的是一款面向青少年的软件（或网站），你知道这个群体的人总是喜欢尝试新事物，总是喜欢酷炫的特效，总是喜欢把它们的软件更新到最新版本（比如我自己，虽然青春已不再）。面对这种情况，渐进增强的开发流程实为上选。

JavaScript

为何学习 JavaScript？

JavaScript 是 web 开发者必学的三种语言之一：

• HTML 定义网页的内容
• CSS 规定网页的布局
• JavaScript 对网页行为进行编程

明天的计划

1.把慕课网上的Javascript基础教程学完，代码敲完一边

2.尝试能否写出一个格子颜色随机变化