.NET实习生每日十题Web前端技术面试题（三）

---

提示：以下是本篇文章正文内容，下面案例可供参考

---

1、谈一下DIV+CSS常见的背景特效？

     鼠标悬停时使用background属性动态改变背景。滑动门特效 ，CSS Sprites等等，除了常见的特效外，H5和各种前端框架中也包含大量的背景特效并且实现也比较简单。

2、GBK,gb2312,UTF-8的区别

• utf-8是基于unicode的国际化的场合适合使用
• gb2312和gb2312都是国标码，出现的较早。主要用于编解码常用汉字。gb2312和gbk 的一个区别是 :gb2312出来得比较早，所以有一些汉字和繁体好象不支持。gbk是一个改进版。所以能用gbk的时候一般不用gb2312

3、谈谈你见过的浏览器不兼容问题？如何使用IETest?

1）以火狐代表的浏览器不支持如下用法：

• document.all
• unload事件
• innerText属性

2）很多版本的浏览器不支持clear:both来清除浮动
3）各浏览器默认的margin和padding不同。解决方法： *{margin:0;padding:0;}
4）对盒子的解析标准不同
IETest安装之后，即可以使用，可用来检查当前代码在不同浏览器版本中的兼容性

4、一个200*200的div在不同分辨率屏幕中上下左右居中，用css实现？

body{margin: 0;}
#div1{ 
   width:200px;
   height: 200px;
   position: absolute;
   background-color: aqua; 
   left: 50%;top:50%;
   margin-left: -100px;
   margin-top: -100px;
}

5、display:none和visibility:hidden的区别是

   1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；    2.使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

6、在HTML中，table标签的cellpadding属性和cellspacing属性的区别?

• cellpadding:表示单元格边框与单元格内容的距离
• cellspacing:表示单元格边框与另一个单元格边框的距离

7、html5有哪些新特性，如何处理html5对低版本的兼容问题

1）新特性：

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation

HTML5标签的兼容性解决方式：

1. 使用document.createElement(tag)来解决
2. 使用html5shiv库来兼容

8、对JSON的理解

JSON：JavaScript Object Notation(JavaScript对象表示法)
JSON是存储和交换文本信息的语法,类似XML。
JSON比XML更小、更快、更容易解析。

9、px和em和rem的区别

px特点

1. IE无法调整那些使用px作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。 px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em特点

1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
3. em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 （任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:
1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为
16px*62.5%=10px, 这样12px=1.2em, 10px=1em,
也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。）

rem特点

rem是CSS3新增的一个相对单位（root
em，根em）。与em的区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。rem集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是一个例子：p {font-size:14px; font-size:.875rem;}
选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。

10、页面有大量图片怎么优化

   图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
   如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
   如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。
   如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验
   如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。