今天完成的事情：今天完成了任务七。完成了任务一的深度思考。

明天计划的事情：完成任务二深度思考。开始任务八。

遇到的问题：雪碧图的使用方法有些出处，和师兄们讨论了一下。

收获：今天完成了任务七。又总结了任务一，新知识和旧知识都不能丢。

任务一深度思考：

1. HTML文件里开头的Doctype有什么作用 

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。

2.如何理解盒模型及其content、padding、border、margin？

再将盒模型想象为一个鞋盒里边放了一双鞋，鞋子就是concent,鞋子与鞋盒之间的距离就是padding，鞋盒就是border，鞋盒与鞋盒间的距离就是margin。

在box-sizing concent-box属性下（默认值），width属性只是concent的宽度。如果设置width为100%，那么在加padding值，那么会超出界面。

在box-sizing borber-box属性下，width属性的宽度是concent+padding+border的宽度。

3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别。

行内元素：一个挨着一个，都在同一行按从左至右的顺序显示。行内元素用英语单词inline表示，它还有其它叫法，如：内联元素、内嵌元素、直进式元素等。基本上没有统一的翻译。

特点：1.和其他元素都在一行上； 2.高度、行高和顶以及底边距都不可改变； 3.宽度就是它的文字或图片的宽度，不可改变。 4.内联元素只能容纳文本或者其他内联元素。

块元素：又名块级元素，用英语单词block表示，和其对应的是内联元素 。大多数HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时会独占一行，多个block元素会各自新起一行。

特点：1.总是在新行上开始； 2.高度宽度都可设置； 3.若没有设置宽度，块元素的宽度是父容器的100%。 4.它可以容纳内联元素和其他块元素。

行内块元素：行内块元素既具有宽度高度特性，又具有同行特性，用inline-block表示。

4.如何使用浏览器的F12调试页面？

F12开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用F12工具，从而快速调试的JavaScript中，HTML和级联样式表（CSS），还可以跟踪并查明网页或网络的性能问题。

前端程序员在按照UI效果图编辑网页时，不可能一口将全部的代码全部写好，通常情况是编写边调，经过反反复复的调试后才能达到要求的效果，这时候用浏览器的F12开发者工具能形象直观的帮助程序员调试自己的代码，用好F12能显着提高开发者的工作效率，加快调试的速度。

5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？

flex布局:除了浏览器兼容性问题，简单粗暴，就是强，用就完事了。

2:浮动:浮动布局是有局限性的，浮动元素是脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷等。 
浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。

3:绝对定位：绝对定位布局优点，很快捷，设置很方便，而且也不容易出问题，缺点就是，绝对定位是脱离文档流的，意味着下面的所有子元素也会脱离文档流，导致有效性和可用性较差。

6.IDE是什么？它和文本编辑器相比有什么优缺点？

IDE的意思是集成开发环境，全称是Integrated Development Environment，集成开发环境是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。程序员通常同时处理许多工作。除了编写代码之外，他们还可能负责调试并测试系统。但是，如果你想要更擅长编写代码并且现在不担心其他责任，那么文本编辑器是理想的选择。

7.加和不加meta的viewport有什么区别？

如果不设置meta viewport标签，那么移动设备上浏览器默认的宽度值为800px，980px，1024px等这些，总之是大于屏幕宽度的。这里的宽度所用的单位px都是指css中的px，它跟代表实际屏幕物理像素的px不是一回事。

每个移动设备浏览器中都有一个理想的宽度，这个理想的宽度是指css中的宽度，跟设备的物理宽度没有关系，在css中，这个宽度就相当于100%的所代表的那个宽度。我们可以用meta标签把viewport的宽度设为那个理想的宽度，如果不知道这个设备的理想宽度是多少，那么用device-width这个特殊值就行了，同时initial-scale=1也有把viewport的宽度设为理想宽度的作用。我们可以使用

<meta name="viewport" content="width=device-width, initial-scale=1">