今天完成的事情：完成了任务一，任务二，安装了ps软件

明天计划的事情：学习ps软件，练习单位的灵活运用，刷任务3. 

遇到的问题：Git和GitHub 的关联，后来自己在网上找教程慢慢解决的，安利链接   https://www.cnblogs.com/flora5/p/7152556.html

webstorm  关联git链接    https://jingyan.baidu.com/article/f0e83a25759e1d22e59101f1.html

收获：今天关联了Git和GitHub 还有webstorm和git     

   深入的了解了单位的应用

• px：相对长度单位，相对于屏幕的分辨率.

  • - 特点：

    • 优点：稳定 & 精确
    • 缺点：改变浏览器字体大小，布局会被打破

  • - 作用：

    • 给定具体大小，协助em和rem重写具体单位

•  em：相对长度单位，相对于当前元素的文本尺寸,如果当前元素文本尺寸未设置则相对于浏览器默认字体尺寸

  • - 计算公式：targetEM = 1 / parentPX * targetPX;

  • - 特点：

    • 1.em值不固定; 2.会继承父类字体大小
    • 缺点：如果不重新计算已被放大字体的em值的话，各层设置的字体大小复合会导致连锁反应,这个连锁反应是'继承'导致的，想要避免继承的连锁反应可以在目标元素上显式设置px单位的font-size来停止继承.
    • 总结：em对应px的值取决于其使用字体的大小，此字体大小受父类继承过来的大小影响，除非显示重写一个具体单位.

  • - 作用：

    • 允许保持在一个特定的设计元素范围内的可扩展性(应在标识清除的情况下使用em单位)

• rem(root em)：相对长度单位,只相对于HTML根元素

  • - 特点：

    • 优点：只需修改根元素大小就可以成比例地调整所有字体大小,且避免了字体大小逐层复合的连锁反应，且IE8+的浏览器都支持
    • Tip：为应对不支持的浏览器,可以多写一个绝对单位的声明，例如：

    p {font-size:14px; font-size:.875rem;}

    • 总结：rem对应px的值取决于html元素字体大小，此大小会被浏览器中字体大小的设置影响，除非显示重写一个具体单位.

  • - 作用：

    • 保证无论用户如何设置自己的浏览器，布局都能调到合适大小
    • 维护用户拥有自己体验偏好的权利

• %

  • - 特点：

    • 普通元素的百分比定位基于父类.
    • 设置了position: fixed的元素的百分比定位基于浏览器窗体.
    • 设置了position: absolute的元素的百分比定位相对于static定位以外第一个父元素进行定位.

•  vw(viewport width, viewport指的是浏览器内部可视区域大小)

  • - 特点：

    • 计算： 1vw = 1% * width_viewport

• vh(viewport height)

  • - 特点：

    • 计算： 1vh = 1% * height_viewport

•  vm(viewport min)

  • - 特点：

    • 计算： 1vm = 1% * (width<height?width: height)

• - 实际使用：

  • a. 元素严格不可缩放时，使用px
  • b. 一切可扩展都应该用rem, 包括媒体查询
  • c. 千万不要用em控制字体的大小
  • d. em用于缩放一些没有默认字体大小的元素，当字体变大整个组件也能随之变大
  • e. 多列布局用%较好
  • f. vw、vh、vm做页面排版很厉害，但是兼容做得比较晚，所以优先还是用rem和%解决问题