已完成：任务4

下一步计划：

      2、完成任务5

遇到的问题：无

任务中的收获：

     1、px、em、rem、%、vw、vm、vh 的区别

        px 表示像素，是绝对长度单位，不会根据屏幕的大小进行调整。

        em 是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。

       em单位有如下特点：

         1.1、em的值并不是固定的;

         1.2、em会继承父级元素的字体大小。

       em是继承父元素的字体大小，可是当父元素字体大小改变时，又得重新计算。

       rem 是css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

       任意浏览器的默认字体大小都是16px。为了简化font-size的换算，需要在css中的根元素html中声明font-size=62.5%，这就使rem值变为16px*62.5%=10px,这样 10px=1rem, 也就是说只需要将你的原来的px数值除以10，然后换上rem作为单位就行了。

        % css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

        vw css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

       vh css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

       vm css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

   2、input、button去掉边框线 和 焦点的边框

      border：0;

      outline:none;

   3、border：0；和 border：none的差别

     性能差异：

    【border:0;】把border设为“0”像素效果等于border-width:0，浏览器依然对border-width、border-color进行了渲染，即已经占用了内存值。

    【border:none;】把border设为“none”，实际效果等同于border-style:none，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

     兼容性差异：

     IE6、IE7中，border为“none”时，标签button、input边框依然存在。