今天完成的事情：

1、task4任务完成。

2、进一步了解position：absolute relative。

3、task3和task4深度思考完成。
明天计划的事情：

1、开始task5.
遇到的问题：

1、task4其中的在布置输入框时，由于效果图中只保留左边的边框，

我直接对input设置border-left：2px；然后发现效果是 上面的边框显示，然而下左右都有很浅的轮廓线，然后我把border-left改为border-top时发现与效果图基本上相似，但是其他边还有浅色的轮廓线，最后我把border-top-width，border-bottom-width，border-right-width：0； 这时出现的效果与效果图一致。

然而我的问题是：1、为什么设置单独border-left，边框效果不出现在左边。2、为什么设置一个边后，其余的边会出现浅色的轮廓线？ 那位师兄帮忙看看，谢谢。

收获：

1、margin与padding具体应用，margin可以解释为自身边框到另一个容器（盒子）之间的距离，理解为容器（盒子）外距离。

                                                 padding可以解释为自身边框到自身内容之间的距离，理解为容器（盒子）内距离。

所以根据对margin和padding的理解就大概可以知道在何时何地使用它们更为合适：

何时应当使用margin

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。

何时应当时用padding

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

2、手机分辨率和网页中的px是一回事吗？ 它们不是一回事，手机分辨率指的是手机横纵方向上的像素点数，一般以纵向像素数*横向像素数表示且这里的像素指的是设备的物理像素，而网页上的px指的是将显示器分为非常细小的小方格，每一个小方格代表1px，在屏幕像素密度为160dpi（ppi），这一个层级，手机屏幕上的1像素与电脑显示器上的1px相同。

3、移动端不加meta为viewport会造成什么结果，为什么？ 会造成设计的网页在移动端不能正常显示，会出现横纵向的滚动条。一般手机默认viewport（980p'x）大于手机可视区域。meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

4、不同的尺寸单位(px,%,em,rem,vw,wh)的用处？

首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px;

这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了,

em的特点

em是个相对值 他会根据父级元素的大小而变化

但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情

这样的情况下,就出现了rem

rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到。

vh、vw和%

vh vw全称为Viewport Height和Viewport Width 意思就是视窗 

vw是可视区宽度单位。1vw等于可视区宽度的百分之一。

100vw=相对于视窗宽度，100vh=相对于视窗高度

vm:相对于视窗的宽度或高度，取决于哪个更小； vmin:vw和vh中较小的那个；vmax:vw和vh中较大的那个

vw单位跟百分比很相似，不同的是vw的值对所有的元素都一样，与他们父元素或父元素的宽度无关。有点像rem单位那样总是相对于根元素。

很多情况下它们都是重叠的 各有优缺点 概括一下 就是

当处理宽度的时候，%单位更合适。处理高度的时候，vh单位更好。

(ps:比如你需要定位一屏内的一段文字,如果你用% 它计算的是你整个dom的高度,而vh计算的当前一屏的高度)

5、使用fixed的时候，在手机上查看是否会有问题，怎么解决？

仔细百度了这个问题，感觉自己也总结不好，所以奉上自己搜到然后收藏的网址，

1、http://blog.csdn.net/ly2983068126/article/details/49306427

2、http://www.cnblogs.com/woshikay/p/4884611.html