昨天接到第一个任务的时候有些诧异，Task1居然是为数不多的难度为困难的任务，心想”一上来就来困难这不太友好吧”。但也可能是所谓的万事开头难，很多知识都要从零开始，所以才如此设定的吧。

看到九宫格的任务目标，第一反应想到的便是使用表格处理，一个3*3的表格便能完美的达成需求。接下来的问题还有：

1. 如何绘制一个正方形

2. 如何控制九宫格实现自适应

针对这两个目标，我分别百度了解决方案。

对于目标1，最初实现起来很简单。结果如下：

接下来查了一些资料，大致了解了使用viewport的方法。于是第二套代码出炉：

但是一个烦人的问题出现了，将width和height设置成百分比后，预览效果的时候div橙色正方形的高度实际值变成了0。思考很久没有想到原因。后来尝试在div中加上文字，橙色格子出现了，但是高度height只有文字那么高。

于是我想到了可能是<td>这个<div>的父级标签限制了div的高度，我们设定的height:100%是针对td而言的，而没有内容的td元素高度就是0。知道原因了，但是怎么解决呢？

我又尝试搜索"CSS 正方形"，在一个博主的博文中找到了解决方法，可以将width和padding-top/padding-bottom设置为一致大小（100%），并将height设置为0。padding-top可以强行撑起元素的高度，同时height为零保证了文字的高度不会影响div元素的实际高度，色块永远是正方形。

最后又添加了border-radium，让正方形变成圆角，需求基本满足了。

其实还有一个问题没有解决，就是我的九宫格间距是固定的，这应该和表格的border有一定的关系，我还没有仔细研究。有了解的兄弟可以点播一下，谢谢：）

===============================================

以上是昨天做的内容。在参看了修真院文档中问题解决思路后，我发现我没有用到float这个属性。所以说，用表格不是这个问题想引导大家思考的方向吗？

我又重新审视了一下这个需求，打算这次只用div标签来完成。需要搞清楚的问题有：

1. 怎样让div可以打破独占一行的特性？ （问题实质是怎样使用float，因为我已经知道这个家伙的存在了）

2. 怎样将固定大小改为自适应？ （和前面的设置应该大同小异）

大致了解了float的功能后，开始尝试搭出九宫格的样子，在body中添加了9个固定大小的div,并让他们中的前三个float:left一个一个贴左边, 第四个float:top贴住第一排, 第五个第六个继续float:left，之后类似。 结果预览时变成了鬼一样的效果。。（这里就不放图了，有兴趣自己试一下）。

之后还尝试了将9个float:left的div三个三个放在一个div container里，想借div的特性将他们分成三行。但结果证明我对float的理解还是有问题的。

于是我把代码改回了最初的样子， 9个div全部float:left。 于是他们整整齐齐的排列在了页面上。并且改动窗口大小还可以让他们自动换行，不知不觉发现新大陆的感觉，这个布局方法以后应该会很有用。

到这里又卡住了。。再后来参考了师兄们提出的问题，发现原来很简单，把格子的尺寸改为相对大小就好了，让一行只能放下三个格子，九宫格就实现了。(Height变为0的问题又出现了一次。这次老套路瞬间解决)

今天就先写到这了。代码审核完成后准备写一篇知识点整理。

==========================================

写点题外话，日报写到最后要添加Github地址的时候，复制完地址手贱关了整个浏览器。。1s后心说，完了，还没提交日报。。。白写了。。结果回来后发现，写的东西居然还在！人生的大落大起不要来的这么High!

其实不是很明白怎么实现的，有师兄知道的可以教教我吗  不胜感激 哈哈