Day2。

今天完成的事情

       1. 测量设计图

       2.使用em写完代码总觉得哪里不对劲，遂改回px

       3.学习了position定位

       4.学习了flex布局

遇到的问题

       1. 本想做尺寸详图出来照着样板写代码，折腾了半天才终于接受了PS没有快速标注这一残酷的事实

          又折腾了半晌，终于让我折腾出来备选方案，只是不知道算是加快进度还是拖累进度了，具体细节如下

         在PS中使用标尺工具 ，测得各细部尺寸，依次在另外的标注软件上标注成图，只是要来回调用软件，麻烦唉

测得的尺寸如下

       2.改成px的代码跟em版本差不了多少，网页版看起来还算正常，开发者工具一打开就又懵逼了

尺寸还是不一样。贴上代码麻烦师兄帮我看一下是什么问题吧

收获

       1.找到了稍快速些标注尺寸的方法

       2.熟悉定位position

       ①. absolute

            生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

        ②. relative

            生成相对定位的元素，相对于其正常位置进行定位。

            因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

            相对定位元素经常被用来作为绝对定位元素的容器块。

            z-index: 表示堆叠顺序，可以为正或负，没有指定时，后面覆盖前面元素

        ③. fixed

            生成固定定位的元素，相对于浏览器窗口进行定位。

            元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

        ④. static

            默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

        3. flex布局（垂直居中）

        display: flex;

        align-items: center; /*定义垂直居中*/

        justify-content: center; /*定义水平居中 */

明天计划学习

      1. 继续完成任务.

      2.有小伙伴说，在设计图上取的值要减半，不然看着相对较大，明天去看看input表单

P.S. 贴上代码，麻烦师兄帮我看一眼是哪里出了问题