今天完成的事情：

因为之前在w3school上自学过html和css的内容，但是有几个月没有再学习和写代码了，所以在任务1巩固了基础的知识，也遇到了一些问题。

用webstrom编写实在是太方便，但是担心自己会不会养成不好的习惯，比如很多标签根本记不住完整的，全靠webstrom自动弹出来......

复习的基础知识有：html基本框架，标签。盒子模型。

编写九宫格

第一步：最开始我用了很复杂的想法去写代码，先创建三个div父级元素，也就是九宫格的三个横排，设置宽度为100%。然后再在每个div里加入三个div子元素，每个宽度为30%（为了不让margin的间隔将元素挤到下一排），用float浮动使三个子元素并排。九宫格完成，但是拉动浏览器会使小方格形状随着浏览器拉伸挤压。

第二步：为了不让小方格变形，我把小方格的宽高改为100px。但是缩小浏览窗口会出现横向滚动条。

第三步：尝试用flex-box使九宫格自适应。此时小方格大小是固定的，不会变形。但是当缩小浏览窗口，九宫格内的小方格会自动排列为一列竖排。

第四步：重新复习css自适应的内容，了解到宽度的自适应是根据viewport的width来调整的。于是可以利用padding来解决比例缩放的问题。首先将父元素div设置为width:100%，padding-bottom:100%，此时父元素就是一个可以根据浏览窗口比例固定缩放和拉伸的正方形。然后设置子元素小方格div的宽度为31%，padding-bottom同样为31%。这里遇到了一个问题，九个小方块之间的间隙margin是需要用百分比的，如果用具体px设置的话，就不能实现浏览窗口自适应，当缩小窗口时同样会被挤压成竖列。

第五步：修改了一下代码，删掉了画蛇添足的div父元素。之前为什么要用一个div父元素在九个div子元素上是因为，我以为任务1图示的九宫格不是布满全屏的，后来发现我想太多了。

明天的计划：

1.思考任务1还有没有更简洁有效或者不同的方法完成。

2.开始做任务2啦。

遇到的困难：

w3school上关于viewport实现自适应的例子是用固定尺寸的图片。当div元素需要自己设置高宽的时候，不能用固定数值。一定要用百分比才能使div自适应。

不会用github。

收获：

1.在https://blog.csdn.net/qq_38350907/article/details/78677611学到了如何解决自适应的问题。

2.尝试使用flexbox的过程中简单了解了如何用flexbox使元素垂直居中以及并列。

3.感叹一下，把自己最初写的又复杂又长的代码缩减为最后简单几行的感觉真好啊。