今天完成的事情：

今天把之前做出来的盒子，用float浮动 做出了九宫格模型

了解了chrome开发者工具

明天计划：

再次仔细、详细的阅读chrome开发者工具，尝试使九宫格大小可以随屏幕宽度改变

遇到问题：

查看chrome开发者工具资料，看的懵懵懂懂，还不是很能理解，没有找到自己需要的重点。对那些工具使用及作用不清楚

收获：

了解了Chrome开发者工具里面的：

Google Chrome一共提供了8大组工具：

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

2.Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；

3.Sources: 主要用来调试js；

4.Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；

5.Profiles: 分析web应用或者页面的执行时间以及内存使用情况；

6.Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；

7.Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；

8.Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。

DOM（全拼：Document Object Model 翻译：文档对象模型）

选中DOM对象之后右键即可以看到一些辅助的功能，如图中标记为2的区块所示：

1.Add Attribute: 在标签中增加新的属性；

1.Force Element State: 有时候我们为页面元素添加一些动态的样式，比如当鼠标悬停在元素上时的样式，这种动态样式很难调试。我们可以使用Force Element State强制元素状态，便于调试，如下图：

![图4. 强制元素状态][4]

3.Edit as HTML: 以HTML形式更改页面元素；

4.Copy XPath: 复制XPath；

5.Delete Node: 删除DOM节点；

6.Break On: 设置DOM 断点。