今天注册了账号后，发现自已被分配的昵称是“一枝花”，呵呵，没想到俺也成了传说中“人送外号一枝花”的传奇人物，这是个好兆头。

【今天完成的事】

      1.有关任务一的一些问题和思考：

      这个任务乍一看还是很难的，看完之后脑子里就单曲循坏一句话“这是啥？”后来看了一下任务分解才慢慢有了头绪。前面的样式设置和利用float组成九宫格倒不算很难，百度一下，你就知道。难点是方格的宽高同比变化以及如何使其跟随浏览器窗口的变化而变化。

      1) 利用div布局后，九个方格整体呈一列排列，若想使其排成九宫格，可以使用float和display：inline-block这两种方法。float方法很简单，直接float：left（经测试float：right也可以）即可。但是display：inline-block就有些问题了，会出现如下状况：

        这个问题我研究了很久，始终不知道为啥，理论上讲使用inline-block和float应该是一样的，但是结果就是有偏差，我只能感叹这真是个神奇的世界！为了搞清这个问题，我另写了一个小栗子：

结果发现最终效果又有点出乎意料，这些小方块中间的空隙是什么鬼？不是应该并成一行的吗？怎么还会有这种操作?

百度了一圈之后，发现罪魁祸首是HTML代码中的空白符问题，就是下图中的这个：

我是万万没想到啊！同理也可知为什么inline-block会导致第三个小方块下移了，因为他们中间多了个卧底（空隙）啊，具体的解决方法有很多，在此推荐张鑫旭的一篇文章：去除inline-block元素间间距的N种方法 《====点击它

问题终于解决了！

      2) 如何使方格的宽高同比变化，方法也有多种，在这里比较推荐的是css3中的vw和padding。vw是css3新增的单位，是相对于视口宽度的单位，1vw相当于视口宽度的1%，而视口就是浏览器的可视区域。vw可以应用在固定高宽比例的图形上面。但由于vw是新增的单位，多以在兼容性方面有些问题。

        可替换的方法是padding，当padding值为百分比时，这百分比是相对于父元素的宽度而言，因此设置方格的padding值来代替宽高。

 2.  关于盒模型，盒模型分为标准模型和IE模型，两者的不同之处在于content，标准模型下盒模型的宽高就等于内容（content）的宽高，但在IE模型下，盒模型的宽高=content+padding+border。

3. 十分粗略的将W3C上面的HTML和CSS部分浏览了一遍，需要找机会细看，补足基础。

4. 大致了解了任务2，将任务1上传到了github，

【明天计划的事情】

1. 看W3C上的CSS基础部分。

2. 继续完成任务。

3. 深入了解float和清除float的方法。

【遇到的问题】

1. inline-block的间隙问题，解决方法见上。

2. 上传作业到github时遇到的问题，git push 的时候出现error: failed to push some refs to......

这是本地仓库和远程仓库的文件不一致所致，即，github允许你本地仓库有的东西，远程仓库里没有，但不允许远程仓库有的东西，你本地仓库没有。问题找到了，解决办法就很简单了，那就是在push之前先同步一下本地仓库与远程仓库的文件。使用以下命令即可：

git pull --rebase origin master

【收获】

如上。