今天完成的事情：任务三布局完成，上传服务器完成，提交任务三，了解一些基础知识。

px、em、rem、%、vw、wh、vm等单位有什么区别？

PX  

是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的

em 

 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px）整个页面内1em不是一个固定的值。

rem  

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

%  

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

vw

viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

vh

viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。

举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

vm

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

举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px。

vh vw是不包含页面滚动条的视窗宽度(innerwidth)，%包含了滚动条的宽度在里面了(outerwidth)。

一般的情况下%就可以满足大部分自适应设计的需求，可以用height：100vh做一个高度占满屏幕的自适应，没有滚动条。用vw，vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

明天计划的事情：开始向任务4前进，并且多了解一些关于程序的语义，学习规范自己的代码

遇到的问题：布局期间，自适应高度的问题，不同于任务一使用padding bottom 100%挤开高度，要达到自适应高度的盒子填充颜色和内容。起初思路错误，想设置一个大盒子模型包裹，后面取消，直接设置整个背景颜色，html和body设置高度为100%。使用padding和margin布局时因为块级元素无法在同一行内排列，起初使用的浮动元素，但使文字环绕了，后面还是取消浮动，使用display转换行内块级元素，因文字在行内，也只能br换行，感觉还是布局不够好，手机比例看就可以，大屏幕比例看的话就歪了。上传服务器过程中，因服务器没法指向服务器本地的上级文件夹，导致无法显示网址，只能换个方法使用超链接指向文件。后续因布局不够细致，重新布置了一下，使用了position属性，来固定图片，但是网页一拉大就显得异样,最后使用浮动属性来使图片固定位置，但是浮动产生新的问题，就是浮动使text-align：center失效了，导致文字不居中。还有图片颜色不会提取，虽然后面都靠师兄帮忙解决了，期间多次以为完成了任务三找师兄汇报进度想提交任务时，都被指点出代码里的各种错误和不规范，属实让人汗颜，也感谢师兄 的耐心教导，改了不少基本错误，也学了不少新知识。

收获：了解关于块级元素和行内元素以及块级行内元素的特性，如何转换，文字居中text-align：center也可以使行内元素居中，设定文字颜色，设置服务器公网的时候使用超链接方便直接达到网页，对于margin和padding了解更深刻,class属性可以连续套用，学会了怎么测量图片大小，字体大小，测量图间距，浮动属性父级元素不影响子元素，添加并集选择器，以及稍微了解了一下关于选择器和权重权值的概念。css的权值决定了优先次序。