发表于： 2019-08-26 19:11:30
2 973
今天完成的事：
1.下载IDE（vscode）及其一系列插件，创建了第一个HTML模板。
2.按照官网提示学习了一系列知识
2.1 HTML开头的<！DOCTYPE>是什么？
DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该
使用什么样的 文档类型定义来解析文档。
需要注意的是，该声明必须在HTML文档的第一行，位于<html>标签之前。
其中还有一些关于html版本的问题，我暂时没有去深究，始终要记住要向HTML文档添加这个声明，这样浏览器
才能获知文档类型。
关于这个标准通用标记语言到底是什么，我自己去百度了一下，上面blabla一大堆咱也看不懂，咱也不敢问啊，
粗略看了下，大概就是国际上通用的一种标准。
2.2 新建一个.html后缀的文件，补全了其中的文档类型和基本标签，使用谷歌浏览器打开（快捷键Alt+B）
2.3 学习了HTML的一系列基本标签，如p、a、img、button、div等
2.4 学习了基本的css样式，如高度height、宽度width、字体颜色color、背景控制background等，我对css的理解
就是如果把HTML看做一间房子，那么css就充当装修的角色，比如改变形状，颜色等等很多样式。
2.5 学习和了解了盒子模型是什么，我自己的理解就是可以把每一个元素看做一个盒子，盒子模型有四大要素分别是
外边距margin、内边距padding、边框border、最里面的是内容content。外边距是元素与元素之间的距离，内边距
是内容与边框之间的距离，边框位于外边距和内边距之间，用于分隔外边距与内边距。
2.6 学习了浮动float，我的理解是把每个元素看做一个框，在普通文档流中每个元素都是独占一行的，在使用了浮动之后
破坏了原来的普通文档流，让多个元素可以并排在同一行。
3.在学习了相关知识后开始着手实现九宫格
我的思路就是既然是九宫格，那么我就设置九个div盒子
然后利用css来实现九宫格的效果，首先我给.box设置了左浮动，这样原本每个盒子独占一行就变成了只要我的第一行有足够
空间，底下的盒子就会沿着我的第一个盒子的左边排列，然后设置了每个盒子的宽度为31%，保证每一行是三个盒子，设置
外边距margin1%，让每个盒子之间看起来有间隔，其实更精确的宽度应该是百分之94/3。
接着就是设置高度，但是这里遇到了一个问题，就是直接设置高度的百分比是没有效果的，只有给定一个确定的px才有效果。
后来百度了一下，原因是百分比单位是相对于父级的，.box的父级是body，body的宽度是确定的也就是浏览器的宽度，所以
可以设置百分比，然而body的高度是不确定的，所以没办法设置。
然后尝试着给父级也就是html一个高度100%，这下高度是出来了，就是不是个正方形，代码和效果如图
我猜想是浏览器的高度和宽度是不一样的，所以造成这种情况。
然后我尝试了另一种方法把九宫格做出来了，就是用padding-bottom或padding-top撑起一个区域来代替高度，效果代码如下
明天计划的事：1.学习github上传代码到仓库
2.实现效果的预览
3.着手任务三
遇到的问题：高度的设置
收获：html标签，css基本知识，盒子模型，自适应等
返回列表
评论