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

今天写CSS任务一，九宫格，并且做适配，了解HTML的相关概念和CSS的标签相关概念。

HTML是网页的骨架，CSS是做美化，JS是动态相关的。

HTML要注意的就是<!DOCTYPE>这个是网页类型的说明，用来告诉浏览器这个页面使用的是哪个标准。

了解了文本级标签和容器级标签的不同。

<div>和<span><span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

然后是了解了一下什么是CSS

在web的编码规范中CSS中最好不要写id，写name。然后是了解盒子模型和相关概念。

如content，padding，margin，border，

web页面的制作，是个“流”，必须从上而下，像“织毛衣”。所以标准流是紧密挨着的。

这里要做九宫格就要使用float，浮动来使得修饰的盒子脱离标准流。

做html类型文件，下载sublime软件下载了相关的插件，然后下载了webstrom和vistual code，

不过目前使用的是sublime。

就是了解现在写的页面的各个参数的含义。

<meta charset="UTF-8">

<meta>：提供有关页面的基本信息，浏览器就是通过meta来看网页是什么字符集的。

<meta>定义关键词，<meta name="keywords">这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。

然后写.box{}，

.box{

display: block;

float: left;

width: 31%;

padding-top:31%;

margin: 1%;

border-radius:9%; 

background-color: orange;

}

开始自己写九宫格，直接使用px，具体像素，还在估计整个页面像素多大，写死了，后面发现不能适配，

看别人的发现可以使用%，写width 31%,这里display：block这里是转换类型，定义。.box为块元素，div和block的元素类型是差不多，我在html页面浏览没有是没有差别的。

然后是写九宫格遇见的坑，没有定义margin，然后页面的几个块就在一起。这里需要定义margin。然后是圆角，这里直接使用border-radius，圆角元素。能够得到自适应的九宫格。

之后是看viewpoint。

layout viewport（布局窗口）：

layout viewport 是网页的所有内容，他可以全部或者部分展示给用户。

visual viewport（视口窗口）：

visual viewport 就是当前显示给用户内容的窗口，你可以拖动或者放大缩小网页。

viewport具体用法为:

使用该meta标签时，在content中写属性，用逗号隔开

<meta name="viewport" content="width=device-width“/>

明天计划的事情：（一定要写非常细致的内容） 

完成CSS任务二，提交CSS任务一

遇到的问题：（遇到什么困难，怎么解决的）

九宫格不能三个并排，用float和%来定义，也可以使用vw 
收获：（通过今天的学习，学到了什么知识）

简单了解了盒子模型和CSS的一些作用。