一、今天完成的事

1.更清楚的了解了盒子模型中的padding和margin的区别

margin是盒子和外界另一个物体之间的距离，而另一个物体可以是盒子、文字或者是页面的边界；padding是指盒子的内空间的大小比如水杯的容量这一类的。改变margin会使盒子与周围的距离发生改变，改变padding会使盒子自身的大小发生改变。

2.学会了屏蔽是正确用法

<!--  xxx  -->是html中的屏蔽格式xxx是需要屏蔽的内容

/* xxx */是用于css中的屏蔽格式

ctrl+/是通用的屏蔽格式，其用法为首先先将我们要屏蔽的部分选中，然后再使用ctrl+/然后就会生成对应的屏蔽格式

3.初步了解了chorme开发者工具

首先，打开谷歌浏览器，然后打开调试功能栏，按快捷键F12或者ctrl+shift+j，就可以打开谷歌浏览器的开发者工具。（对于qq浏览器也通用适用）

左上角第二个选项，是用来切换手机页面的。如果我们访问的网址是手机端wap页面，则点击此按钮，就可以模拟手机进行访问了。

Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果。

Network是网络工具，可以查看请求数据的状态，类型，大小，时间等，如下图。Network是在调试中常用的工具，可以查看发送的请求是否正确，返回的数据是否正常等。

Sources可以用来查看页面的源文件，包括JS文件和Html文件。找到想要调试的JS代码，在代码前单击，即可设置断点。当运行JS代码时，会自动进入到断点执行。同Java调试类似，JS调试也可以单步运行、进入函数体内调试、直接运行到下一断点等。

4.能进行九宫格的制作，并在chorme调试界面随屏幕分辨率变化大小

二、明天的计划

1.使用chorme开发者工具模仿手机访问网页。

2.学习viewpoint。

三、遇到的问题

网上百度了关于盒子的大小属性单位用px和%之间的区别之后又和师兄进行了交流，用px时需要怎么编写用%时又要怎么编写明白了两者的区别。

通过师兄的说明明白了html和css的编程语言不是一样的，比如两者的屏蔽方法。

四、收获

稍微有了点方向感，知道自己应该怎么做、做什么了，现在也掌握了一些简单的html和css的编写方法。初步了解了chorme开发者工具的一些用途。