今日完成：

前端虽然简单，东西还是很多的，需要大量的练习才能孰能生巧，好想做一万个静态页面再说。

1、第一个问题就是关于上次提到的viewport，当没有进行viewport设置的时候，在不同客户端上面打开页面，由于客户端的分辨率不同，而屏幕大小却没有变化的时候，由于我们是用像素来设置相应的尺寸，这个时候页面就发生相应的放大或者缩小现象，这个问题的解决方案就是在head里面设置好viewport：

     width:可视区域的宽度，值可为数字或关键词device-width

     device-width：设备的宽度（单位为缩放为 100% 时的 CSS 的像素）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2、在task5里面尝试放弃使用px，转而使用了rem，这里把相应单位解释贴一下：

      px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的；

      em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了；

      rem是CSS3新增的一个相对单位（root em，根em），rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这里rem的换算比例和em相同，解释同上；      

      vw  相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度；

      vh  相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh  = 可视区高度；

      vmin/vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm)；

3、关于images图片的缩放问题，开始没找到很好的办法，直接用高宽缩放，很不方便，后面找到了很不错的方法，就是css3里面的动画transform，这里同样贴一下（来源于w3cschool）：

4、在同一个盒子，摆放多个图标，图片，头像，文字时，开始用float浮动来做，发现很麻烦，后来采用了position的绝对定位，就很方便，这里由于absolute绝对定位是相遇于父元素，所以要先设置父元素位relative才行，贴一下说明：

5、关于display：flex布局，很方便的解决了很多问题，各种排列组合，水平居中，垂直居中问题，一下全解决了，贴一下flex的六中属性：

      flex-direction　　容器内项目的排列方向(默认横向排列)　　

      flex-wrap　　容器内项目换行方式

      flex-flow　　以上两个属性的简写方式

      justify-content　　项目在主轴上的对齐方式

      align-items　　项目在交叉轴上如何对齐

      align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

这是在task5里面用作垂直定位：

.g-mm-last {
       display: flex;
    align-items:center;
}

最后总结：task5问题还是比较多的尝试了很多种以前没有用过的方法，对布局有了更多的认识，在日常布局中，不同的布局方式有各自的优势，不能单纯因为自己熟悉哪种就用哪种，这个要有意识。

明天计划：

完成任务6，任务6的主要问题就是雪碧图的使用，然后就是下拉框，再利用多列表熟悉下昨天学习的各种布局方式，最后再把垂直居中的问题详细整理一下。