学校宣讲会答题疑问笔记

今天去参加了一个公司的宣讲会，最后的笔试答题阶段遇到了许多自己曾经没有想过的问题，没了解过的知识技术。现在做个总结。

1.Quirks和standards模式

简言之，quirks模式就是IE6之前的浏览器模式，那个模式对于许多方面不支持，所以又称为怪癖模式，诡异模式，怪异模式。

IE6之后浏览器进入了standards模式它们的区别在于总体会有布局、样式解析和脚本执行三个方面的区别。

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

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

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

2.css的hack

对于不同的浏览器，CSS的解析程度不一样，因此会导致生成的页面效果不一样；这个时候我们就需要针对不同的浏览器（特别是IE）去写不同的CSS，这个过程就叫做css hack.

3.href和src的区别

简言之src用于替换当前元素；href用于在当前文档和引用资源之间建立联系。

对于src:当浏览器解析到该元素时，会暂停浏览器的渲染，知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

对于href:浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

4.normalize.css

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset， Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap以及许许多多其他框架、工具和网站上.

Normalize.css是一种CSS reset 的替代方案。经过@necolas和@jon_neal花了几百个小时来努力研究不同浏览器的默认样式的差异，这个项目终于变成了现在这样。

创造normalize.css有下面这几个目的：

• 保护有用的浏览器默认样式而不是完全去掉它们
• 一般化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：用注释和详细的文档来

Normalize.css支持包括手机浏览器在内的超多浏览器，同时对Html5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则，还是在合适的地方使用了更实用的默认值.

5.渐进增强和优雅降级

二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实也就是向上兼容和向下兼容的概念。渐进增强是向上兼容，优雅降级是向下兼容。

优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。。。

详见https://www.jianshu.com/p/d313f1108862说的很好很详细。特别是这句对于向上向下兼容的例子：

向下兼容指的是高版本支持低版本的或者说后期开发的版本支持和兼容早期开发的版本，向上兼容的很少。大多数软件都是向下兼容的，比如说Office2010能打开Office2007，Office2006，Office2005，Office2003等建的word文件，但是用Office2003就不能打开用Office2007，Office2010等建的word文件！

6.css的content属性

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

例如：

a:after
  {
  content: " (" attr(href) ")";
  }

7.rgba()和opacity透明效果的不同

这个是在于放背景下面和放背景上面的不同；

这个是opacity的透明效果，最后他活在背景下面。

这个是rgba（）的效果，把背景盖住了。

rgba()的用法是，里面输入4个值，前三个是rgb（）颜色值，最后一个是透明度，0到1之间，1不透明，0全透明。

opacity用法：

div
{
opacity:0.5;
}

8.图片的格式和区别

9.js一些小问题

var a;
alert(typeof a);
alert(b);
var a=null;
alert(a);
alert(typeof a);
console.log(NaN==NaN);
console.log([]==false);
console.log([]==![]);
console.log(1==true);
console.log(null==undefined);
console.log(0==false);
console.log(null==function);
console.log(null==object);
console.log(null==false);

依次结果是

undefined

undefined

没作用

没作用

null

boject

false

true

true

true

true

true

出错

false

false  是的我快哭了 ，都是什么鬼。。。。

10.JSON和Ajax

百度说：JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

两者关系详见：https://blog.youkuaiyun.com/lijuhu/article/details/79210526。

而对于json是个啥，可以看一下这个https://blog.youkuaiyun.com/fwj_ntu/article/details/78237350

这里面有一句话说的很透彻：json本质是一种文件组织方式，比如你熟悉的txt, csv, word等等。

 

11.在dom中直接写样式，优先级最高，可维护性差。

12.MVVM,MVP,MVC

MVC是一种设计模式，全称为:Model-View-Model.

MVVM是Model-View-ViewModel的简写，全称:Model-View-ViewModel 。它本质上就是MVC 的改进版。有两张特别好的解释图片：

详见https://blog.youkuaiyun.com/qq_36228442/article/details/79470408很详细。