今天完成的事情：今天1.css任务14，15的一些细节问题修改了一下

2.把js任务一做完了 

3.看之前css的深度思考
明天计划的事情：明天任务二 
遇到的问题：写任务一时，随机获取三个格子的函数，有时能获取到三个格子，有时能获取到两个，有时只能获取到一个

请教了师兄，发现是由于获取九个格子的是个类数组，因此很多数组的方法都没用。

解决方法：把类数组转化为数组。

收获：

一.谈谈以前端角度出发做好SEO需要考虑什么？

1、了解搜索引擎如何抓取网页和如何索引网页；

2、Meta标签优化；

3、如何选取关键词并在网页中放置关键词；

4、了解主要的搜索引擎；

5、主要的互联网目录

6、按点击付费的搜索引擎；

7、搜索引擎登录；

8、链接交换和链接广泛度（Link Popularity）；

9、标签的合理使用

二. Quirks模式是什么？它和Standards模式有什么区别？

如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给<span>等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效

三.知道css有个content属性吗？有什么作用？有什么应用？

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

四.知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

微格式是一种可以让机器可读的语义化xhtml词汇的集合，是结构化数据的开放标准，是为特殊格式定制的特殊标准。

优点：将智能数据添加的网页上，让网站内容在搜索引擎界面显示额外的提示。

五.HTML5的离线储存怎么使用？

创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，注意，这里的扩展名是任意的。然后给index.html的html标签添加如下属性即可：

manifest 标签应该包含到你需要缓存资源的页面，当第一次打开该页面时，浏览器会解析该页面中的mainfest，并缓存里面列举的资源，同时该页面也会自动会被浏览器缓存，即使该页面没有在Manifest中列出。一个典型的manifest文件代码结构像下面这样：

以#号开头的是注释，可以是版本号，时间戳等等。一般会在这写个版本号，用来在缓存的文件更新时，更改manifest的作用：浏览器已经缓存下来的缓存，只有当manifest文件发生了改变才会更新本地缓存，即使你的代码发生了更新，本地浏览器也是不知道的，所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间，告诉浏览器相应的更新本地缓存。

六.渐进增强和优雅降级之间有什么不同?

渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏 览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。

优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能 就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较 大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。

七.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？

1 浏览器默认边距不同

由于不同浏览器的很多标签的默认间距是有差别的，所以样式重置就显得尤为重要， 否则网页很容易在不同浏览器上出现较大差异甚至是不能使用

2 MARGIN加倍问题

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug

解决方案：

直接使用通配符来将自带的margin和padding初始值设为0 *{margin:0;padding:0;}

在这个div里面加上display:inline

IE系列浏览器的hack大略如下：

_nowamagic:1px;-----------ie6

*nowamagic:1px;-----------ie7

nowamagic:1px\0;----------ie89

nowamagic:1px\9\0;--------ie9

:root nowamagic:1px;    ----ie9

八.描述一个你在实际使用中有用过什么比较好的布局方式（不拘泥于页面整体布局，页面中某一小版块也行），深入讲解下其中的原理？

在写任务8的职位列表时候，发现每个职位块都是一样的，而且里面的个数应该是动态的，到时会从后台拿到数据来渲染。所以我的包含这些职位块的大盒子使用的是弹性布局，

display:flex;  justify-content: space-between;flex-wrap:wrap

这样的话无论里面有多少给职位块，都不会打乱布局。