今天完成的事情：

1.继续优化任务五

明天计划的事情：

推进任务，再多看看今天的知识点。

遇到的问题：

1.本打算推进任务的，但发现了几个问题，整了挺久的。

这是网页上显示的界面，看上去似乎没有问题。但实际运用到手机之后会变成这样：

比例失调，当场愣住。后面检查下网页设置，发现预览图是以50%的尺寸来展示的，调成100%就会出现这种情况。我都是按照PS的图给的尺寸来的，为啥会这样呢？然后我了解到了一个知识。

像素单位有设备像素、逻辑像素和CSS像素3种。

·设备像素

设备像素也就是物理像素，设备像素指的是显示器上的真实像素，每个像素的大小是屏幕固有的属性，屏幕出厂以后就不会改变了。

·设备独立像素

设备独立像素也叫逻辑像素，可以理解为反映在css/js代码里的像素点数。

·CSS像素

在CSS中使用的px都是指css像素，比如width: 128px。css像素的大小是很容易变化的。当我们缩放页面的时候，元素的css像素数量不会改变，改变的只是每个css像素的大小。缩放比例就是css像素边长/设备独立像素边长。在缩放比例为100%的情况下，一个css像素大小等于一个设备独立像素。

·设备像素比

是一个设备的物理像素与逻辑像素之比。比如iPhone6的设备像素比是2，css里写375px就能占满整个屏幕750px的宽度。

这个知识点的概念看的我有点混，专有名词也有点像，不过我知道了，我所得到的PS图的原设备像素比是2，因此需要把此前使用的逻辑像素值都除以2，这样才会出现正常的比例。关于这个知识点需要多看看。

2.将界面缩小到一定的大小后，会出现一段空白：

右边本来不应该出现这种空白的，卡了很久，整个main框的百分比设置为了100%，但缩放后并没有这么进行，出现白边，初步判定是css中引用的背景图片问题，找了很多资料后知道了overflow指令，

overflow:hidden

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

于是在html和body里都加了overflow：hidden，瞬间解决了白边问题。不过又出现了一个问题，界面不能上下滚动了，再次查找后，了解到overflow:hidden属性，会隐藏掉超出屏幕的内容，所以不会滚动。

此处应该使用overflow-x：hidden，只有X轴方向出现了白边，应该这样写。

不过为何html和body里都要加入overflow命令，只加一个似乎没有用处？

收获：

1.关于像素单位的新知识，目前有点懵，得多看。

2.出现白边的解决方法，使用overflow：hindden指令可以隐藏超出格子的部分。

另overflow属性还有overflow：scroll等用法，可以了解下。