今天完成的事

1.添加如何学习标题

2.构思学习流程部分

栅格系统分成4等分，然后小箭头采用伪元素添加。伪元素采用绝对定位固定。

3.简单架构学习流程部分

4.初步添加样式

今天完成预览

明天计划的事

1.尝试使用伪元素添加雪碧图完成箭头图标

2.完成优秀学员部分的简单架构

3.完成任务2的深度思考

遇到的问题

1.学习流程那里圆圈里的数字无法居中，不知道是不是有bootstrap的影响

今天的收获

完成深度思考的时候学习到了 一些知识以及调试工具的应用

深度思考

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

inline元素

表示行内元素。一个内联元素不会开始新的一行，并且只占有必要的宽度。

特点:

• 和其他元素都在一行上；
• 元素的高度、宽度、行高及顶部和底部边距不可设置；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变。

常见的inline内联元素：

span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

block元素

表示块级元素。一个块级元素总是开始新的一行，并且占据可获得的全部宽度(左右都会尽可能的延伸到它能延伸的最远。

特点:

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（一个块级元素独占一行）;
• 元素的高度、宽度、行高以及顶和底边距都可设置;
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

常见的block块级元素：

div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

inline-block元素

inline-block元素表示内联块状元素，像内联元素，但具有宽度和高度。

特点:

和其他元素都在一行上；

元素的高度、宽度、行高以及顶和底边距都可设置

常见的inline-block内联块元素：

img、input

inline元素、block元素、inline-block元素的区别

• 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。

• 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。

• 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

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

Elements标签页

Elements标签页的左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。

Network标签页

Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。注意是在你打开Chrome开发者工具后发起的请求，才会在这里显示

Sources标签页

Sources标签页可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。

Audits标签页

这个对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了

Console标签页

就是Javascript控制台了

在控制台中可以直接模拟手机、调整UA、修改网络连接状态。 

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

IDE就是集成开发环境（IDE，Integrated Development Environment ）是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。

集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套（组）都可以叫集成开发环境。

如微软的Visual Studio系列，Borland的C++ Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE（如HomeSite、DreamWeaver等），因为很多项任务会自动生成。

IDE相比文本编辑器的优点是

1）节省时间和精力。IDE的目的就是要让开发更加快捷方便，通过提供工具和各种性能来帮助开发者组织资源，减少失误，提供捷径。

2）建立统一标准。当一组程序员使用同一个开发环境时，就建立了统一的工作标准，当IDE提供预设的模板，或者不同团队分享代码库时，这一效果就更加明显了。

3）管理开发工作。首先，IDE提供文档工具，可以自动输入开发者评论，或者迫使开发者在不同区域编写评论。其次，IDE可以展示资源，更便于发现应用所处位置，无需在文件系统里面艰难的搜索。

4.IDE具有补充功能，能够帮助Web开发人员以更高的生产效率完成任务。

5）在进行大量开发项目时，IDE的内置功能可能会帮助你以更加简化的方式完成工作。

而相对于文本编辑器的缺点是

1）有时候IDE需要付费使用

2.）有时对操作系统和配置有一定要求

3）IDE需要下载安装，而文本编辑器通常是操作系统自带的

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

viewport是浏览器的可视区域。通常viewport使用在移动端，因为移动端的往往比电脑端小，所以在移动端的时候，浏览器会出现横向的滚动条。假如我们需要时viewport达到理想状态，需要加meta的viewport来控制它的大小

而不加meta，viewoprt就会自动设定到900px这样的理想状态，假如页面内容宽度小于viewoprt的默认值 那么就会出现需要缩放才能看清楚页面的情况。