今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

今天学习了：

1.HTML的标签

2.CSS是什么

3.添加了几个元素设定了css样式

4.盒子模型

5.float浮动

6.理解了任务

7.写出了一个无法自适应的九宫格

8.学习Chrome开发者工具

9.float布局组成了九宫格

明天计划的事情：

明天打算将viewport搞清楚，并测试移动端

遇到的问题：

float自适应布局无法在屏幕变小时还成3x3的布局，每行最后一个会在窗口缩小后跑到新的一行。

用padding撑开容器后，如果在元素内添加内容，那容器会变形，无法维持正方形。

flex布局时，如果margin的值给大了，也会导致3x3无法成立。

收获：

1.通过学习资料学习到了HTML的标签内容，具体学到的知识如下（原先就对HTML有过学习，下列的内容都是新学内容，以前学习过的就没列出了）：

HTML是一种描述的标记语言，非编程语言，负责描述文档的语义。

目前常用已经不是XHTML了，而是HTML5。

中文能使用的两种字符集是UTF-8和GBK两种，meta申明与文件编码类型必须一致。

GBK比UTF-8显示更快，但如果追求大而全的话还是选择UTF-8更合适。

颜色可以通过单词、十进制、十六进制来表示。

meta标签有一个跳转功能，可在指定间隔后跳转到指定页面。

meta能通过定义关键字来提高搜索命中率。

列表的type属性能定义原点效果，li标签也能通过type修改。

无需列表可使用的场景有导航条、购物网站的搜索列表

2.Chrome开发者工具：

elements工具可完整的查看整个HTML文件，并能通过右击节点进行各种操作，能通过下方状态栏查看节点路径。能通过右边侧栏查看元素样式。

通过侧栏可添加新的css样式，并直接反应在网页中，即做即得，适合微调样式。通过模型图能直接修改边距。

通过Network工具可以查看网络资源加载情况，来分析网页加载的速度，优化网站。

剩下的工具对目前学习暂时没有帮助，现在放置等用到了再学。

3.九宫格布局

查找资料过程中，学会了CSS3的子选择器 .a > .b 可选择a下面的第一级子元素b，而不会多选择别的元素。

学会了vw和vh的使用方法，学会了flex布局的使用方法，学会了padding来撑开容器

inline、block、inline-block的显示方法。

最终用flex来创建了九宫格布局。