今天完成的事情：（早上学习了盒子模型，知道了他有外边距（margin）、边框（border）、内边距（padding）、内容（content），在 CSS的标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。IE盒子模型中，width 和 height 指的是内容区+border+padding的宽度和高度。认识了width跟height，真实占有宽度 = 左border + 左padding + width + 右padding + 右border，如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width。在师兄帮助下认识了padding，他是有4个方向的，如果给4个值就是上右下左，3个值就是上 左右 下 2个值就是上下 左右 1个值就是上下左右。

认识了float，在html中添加浮动可以用float：left。

然后先做了几个方格，目标做出九宫格，我先用了给定大小（px）的方法设置方格的宽度高度，然后用浮动的方法想做出九宫格，但是失败了，9个方格依次排开，由于浏览器页面比较大，上面显示6个下面3个。失败。于是请教师兄，得知用百分比的方法设置宽度高度，但是又出了一个问题，因为没有给父元素设置宽度高度，于是打开html也是没有东西的，经百度发现有两种情况可以解决：1使用padding-bottom：30%，padding-left：30%；2给父元素定义一个height：100VW，师兄给我的做法是定义了padding-bottom：20%，并且下面给定height：100%，不是很理解。

然后学习了Chrome开发者工具，看不懂，不知道该如何调试。经百度，勉强可以把百度给的一个小程序调试成功。自己的html文件不知道该怎么调试。

学习了viewport，可分为layout viewport、visual viewport、ideal viewport。

要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1。

然后使用了Chrome工具模拟手机打开九宫格，感觉没有问题，是可以自适应的。最后配置了Nginx，在师兄的辛苦帮助下，终于配置成功！） 

明天计划的事情：（看到下一步是配置Nginx成功后，手机上直接访问网页，还没有到这一步，所以明天的目标是完成这一步，然后把任务一结束） 
遇到的问题：（刚开始不知道line-height行高的概念与计算方法，后与师兄交流明白了如果前面定义了font-size：400%那么如果line-height：80%，那么这个80%是基于前面字体尺寸放大4倍的基础上的80%。

然后是九宫格的浮动问题，因为刚开始是设置了固定的宽度高度，所以无法显示出九宫格，显示结果是上6下3，在师兄帮助下，使用

.box1{
    float: left;
    width: 30%;
    height: 30%;
    margin: 1%;
    background-color: yellow;
    border-radius: 10%;
}
.box{
    height: 100vw;

解决了问题。

最后在辅导师兄的帮助下，把Nginx配置完成了。虽然还不知道如何用手机登录，明天继续加油。）

收获：（收获就是上面的，了解了盒子模型的4个概念，知道了怎么设置自适应以及viewport的概念）