今天完成的事情：

8.（知识学习）查看学习资料——《自适应——PX，EM，REM的概念，自适应布局的写法》 

9.（知识学习）查看学习资料——《自适应——关于自适应，屏幕分辨率，图片尺寸》

10.（代码调试）让图片适应屏幕大小和清晰度

11.（代码调试）调试代码，使得页面在不同分辨率不同设备上都能正常显示

12.（环境搭建）配置nginx的http服务，使本地可以通过配置的域名访问---这个没做，似乎得有自己的域名？

13.（环境搭建）上传到学员服务器

14.（代码调试）使用不同设备访问网址查看页面

提交了一次任务，被否了，重新精简了一些CSS样式，应该合理了一点。几个坑：

1、背景色这种全局的东西丢在html,body的设置里头就好，不要分开写，其它全局的东西也一样。

2、CSS代码多了，就得从.html文件里面分离出去。这样更改样式之后只要刷新页面就可以看到效果，很方便。

3、CSS中，各类class的名字一定得规范使用，不清楚的查w3cschool.

4、文字左右对齐，在字体属性加入：  align-items:Center;

      详见：http://www.w3school.com.cn/cssref/pr_text_text-align.asp

5、flexbox的一些小心得：

5.1 如何在flexbox内放置多行元素：加入flex-wrap:wrap;并且把不同行的元素置于不同div中，图像不用放入。

     比如本处的文字“BJPTTeng”如果不放入容器，效果很可怕，同一个div内的图像会被拉伸。

5.2、容器内多个元素在垂直方向的居中：align-items 或 align-content ：center；

       align-items 和align-content的区别：https://blog.csdn.net/sinat_27088253/article/details/51532992

       本容器里有2行，所以得用align-content：center;   完成居中。align-items 仅限于单行。

5.3   水平方向居中，加入 justify-content:center;

6、注意父容器、子容器之间的尺寸关系：

7、有滚动条出现，不应该有。

   加入overflow：hidden，消灭了滚动条。但是不知道滚动条出现的原因，很困惑。

作品效果：

明天计划的事情：

1、有一个疑惑，字体大小不好确定，按照psd里面的尺寸，换算成rem，在浏览器中偏大。明天研究一下这个问题。

2、希望能开始任务4。

遇到的问题：

Q:ps没法切图，几乎什么操作都不能做。

A：字体得处理一下

Q：用rem固定图像宽度，随着分辨率变化，图像会自动缩放。

<div class="box1"><div class="box1-1"><img src="./task3-img/task3_reverse.png" width="54rem" alt=" "></div></div>

A：-------智障了，rem不能用于图片，右边明明自动变成px了。rem用于盒子模型、字体排版这方面。