今天完成的事情：

1.写了任务11的任务总结，进行了档案更新

2.了解了一下小课堂的流程

3.下午听了一会老大讲敏捷开发

4.开始了任务12并用sass重写了任务5

明天计划的事情：

1.继续任务12，并用sass重写任务6

2.进行小课堂选题，开始每天准备一点小课堂

3.开始每天了解一些js基础知识，看一点红宝书

遇到的问题：

1.之前做任务5的时候代码规范没有做好，代码阅读很困难，导致代码很难重构修改，最后只能用sass重新写了一遍代码

收获：

1.敏捷开发

敏捷开发以用户的需求进化为核心，采用迭代、循序渐进的方法进行软件开发。在敏捷开发中，软件项目在构建初期被切分成多个子项目，各个子项目的成果都经过测试，具备可视、可集成和可运行使用的特征。换言之，就是把一个大项目分为多个相互联系，但也可独立运行的小项目，并分别完成，在此过程中软件一直处于可使用状态。

敏捷开发方式能给企业和用户带来以下好处:

（1） 精确。瀑布模式通常会在产品起点与最终结果之间规划出一条直线,然后沿着直线不断往前走。然而当项目到达终点时,用户通常会发现那已经不是他们想去的地方。而敏捷方法则采用小步快跑,每走完一步再调整并为下一步确定方向,直到真正的终点。

（2） 质量。敏捷方法对每一次迭代周期的质量都有严格要求。一些敏捷方法如极限编程等,甚至使用测试驱动开发(test-driven development),即在正式开发功能代码之前先开发该功能的测试代码。这些都为敏捷项目的整个开发周期提供了可靠的质量保证。

（3） 速度。敏捷团队只专注于开发项目中当前最需要的、最具价值的部分。这样能很快地投入开发。另外,较短的迭代周期使团队成员能迅速进入开发状态。

（4）丰厚的投资回报率。在敏捷开发过程中,最具价值的功能总是被优先开发,这样能给客户带来最大的投资回报率。

（5）高效的自我管理团队。敏捷开发要求团队成员必须积极主动,自我管理。在这样的团队中工作,每个团队成员的技术能力、交流、社交、表达和领导能力也都能得以提高。

 主要的敏捷开发方法：

    敏捷开发方法是一组开发方法的统称,主要包括以下几种:

    极限编程其主要目的是降低需求变化的成本。它引入一系列优秀的软件开发方法,并将它们发挥到极致,结对编程(pair-programming)就是其中比较知名的方法之一。除此之外, 其核心做法还有小规模、频繁的版本发布、短迭代周期、测试驱动开发、持续集成、每日站立会议、共同拥有代码、系统隐喻等。

    Scrum Scrum是一个敏捷开发框架,它由一个开发过程、几种角色以及一套规范的实施方法组成。在Scrum中,产品需求被定义为产品需求积压(product backlogs)。所有的产品需求积压都是从一个简单的想法开始,并逐步被细化,直到可以被开发的程度。Scrum将开发过程分为多个Sprint周期,每个Sprint代表一个2~4周的开发周期,有固定的时间长度。

    精益开发精益开发的核心思想是查明和消除浪费。在软件开发过程中bug、没用的功能、等待以及其他任何对实现结果没有益处的东西都是浪费。浪费及其源头必须被分析查明,然后设法消除。精益开发的其他原则包括强调学习、在最后时刻做决定、用最快的速度交付用户等。

    其他敏捷方法还包括动态系统开发方法(DSDM)、特征驱动开发(FDD)、Crystal Clear等,各种敏捷方法的区别在于它们对敏捷的不同阐释和不同侧重。理解这些方法可以帮助我们从多个角度理解敏捷开发,并且了解更多的最佳应用。

如何选择一种敏捷方法:

    选择一种合适的软件开发方法取决于多种因素。在做出决定之前,我们需要充分考虑以下这些方面:

  （1） 方法的复杂度。确保你的团队或组织能够应付这种复杂度。

  （2）社区和业界支持。有较多的社区及行业支持可以使你受益匪浅。

  （3） 实用工具。一个良好的软件工具可以帮助团队有效地处理日常工作,促进团队协作,并减少管理成本。

  （4）对敏捷方法的认识程度。选择一些与你当前开发方式比较接近的敏捷方法将有助于推动该方法的实施。

  （5）你的团队规模。较小规模的团队最好从简单的方式入手。

  （6） 你不需要只遵从一种方法。你可以为团队选择一个主要的方法(如Scrum),然后借鉴其他方法。

2.px、em和rem

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

PX特点

（1）IE无法调整那些使用px作为单位的字体大小；

（2） 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；

（3） Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。

EM特点 

（1）em的值并不是固定的；

（2） em会继承父级元素的字体大小。

rem特点 

   rem是CSS3新增的一个相对单位（root em，根em），这个单位与em区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。如p {font-size:14px; font-size:.875rem;}

3.transform 属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。下面是一些transform 属性值代表的意义：

none 定义不进行转换。 

matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate(x,y) 定义 2D 转换。 

translate3d(x,y,z) 定义 3D 转换。

translateX(x) 定义转换，只是用 X 轴的值。 

translateY(y) 定义转换，只是用 Y 轴的值。 

translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

scale(x,y) 定义 2D 缩放转换。 

scale3d(x,y,z) 定义 3D 缩放转换。

scaleX(x) 通过设置 X 轴的值来定义缩放转换。 

scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 

scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。

rotate(angle) 定义 2D 旋转，在参数中规定角度。 

rotate3d(x,y,z,angle) 定义 3D 旋转。

rotateX(angle) 定义沿着 X 轴的 3D 旋转。 

rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 

rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 

skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 

skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 

perspective(n) 为 3D 转换元素定义透视视图。

进度：css任务12

任务开始时间：2018.6.13

预计demo时间：2018.6.14

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html

任务总结：

任务名称：CSS=TASK11

成果链接：https://huangbaihei.github.io/jnshu-css/task11/task11.html

任务耗时：2018.6.12-2018.6.12(1天)

技能脑图：

1.官方脑图：

2.个人脑图：

任务总结：

1.这个任务需要使用sass或less中的一种，我选择了sass，这种预编译语言其实目的就是为了减少编写css代码时的工作量，写同样的CSS代码实现同样的功能，而使用更简便美观的写法。在任务中主要是使用到了sass中定义属性变量重复调用，还有选择器嵌套，混合宏这三种用法；

2.sublime的插件不齐全，会导致很多意想不到的问题，有时候会浪费很多时间去配置插件，在配置sass的过程中会遇到很多坑，推荐使用有强大功能而插件齐全webstorm编辑器；

3.用宽度百分比实现宽度自适应；

4.又一次接触表单元素，注意修改表单里placeholder的文字样式时，应使用input[type="text"]::placeholder这个选择器；

5.这个任务在布局上还是采用了熟悉的flex布局和float浮动。