【javascript常见面试题】常见前端面试题及答案 (3)

<nav>,<header>,<section>,<footer>等。

19.请描述一下cookies,sessionStorage和localStorage的区别?

sessionStorage和localStorage是HTML5 Web Storage API提供的,可以方便的在web请求之间保存数据。有了本地数据,就可以避免数据在浏览器和服务器间不必要地来回传递。sessionStorage、localStorage、cookie都是在浏览器端存储的数据,其中sessionStorage的概念很特别,引入了一个“浏览器窗口”的概念。sessionStorage是在同源的同窗口(或tab)中,始终存在的数据。也就是说只要这个浏览器窗口没有关闭,即使刷新页面或进入同源另一页面,数据仍然存在。关闭窗口后,sessionStorage即被销毁。同时“独立”打开的不同窗口,即使是同一页面,sessionStorage对象也是不同的cookies会发送到服务器端。其余两个不会。Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie。

Firefox每个域名cookie限制为50个。

Opera每个域名cookie限制为30个。

Firefox和Safari允许cookie多达4097个字节,包括名(name)、值(value)和等号。

Opera允许cookie多达4096个字节,包括:名(name)、值(value)和等号。

InternetExplorer允许cookie多达4095个字节,包括:名(name)、值(value)和等号。

20.描述下“reset”CSS文件的作用和使用它的好处。

因为浏览器的品种很多,每个浏览器的默认样式也是不同的,所以定义一个css reset可以使各浏览器的默认样式统一。

21.解释下浮动和它的工作原理。

关于浮动我们需要了解,浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。要想使元素浮动,必须为元素设置一个宽度(width)。虽然浮动元素不是文档流之中,但是它浮动后所处的位置依然是在浮动之前的水平方向上。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样,下面的元素填补原来的位置。有些元素会在浮动元素的下方,但是这些元素的内容并不一定会被浮动的元素所遮盖,对内联元素进行定位时,这些元素会考虑浮动元素的边界,会围绕着浮动元素放置。也可以把浮动元素想象成是被块元素忽略的元素,而内联元素会关注浮动元素的。

22.列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。

1.使用空标签清除浮动。这种方法是在所有浮动标签后面添加一个空标签定义css clear:both.弊端就是增加了无意义标签。

2.使用overflow。给包含浮动元素的父标签添加css属性overflow:auto;zoom:1;zoom:1用于兼容IE6。

3.使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置height:0,否则该元素会比实际高出若干像素;二、content属性是必须的,但其值可以为空,content属性的值设为”.”,空亦是可以的。

4.浮动外部元素 
此三种方法各有利弊,使用时应择优选择,比较之下第二种方法更为可取。

23.解释下CSS sprites,以及你要如何在页面或网站中使用它。

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

24.你最喜欢的图片替换方法是什么,你如何选择使用。

<h2><span图片丢这里></span>Hello World</h2>

把span背景设成文字内容,这样又可以保证seo,也有图片的效果在上面。一般都是:alt,title,onerror。

25.讨论CSS hacks,条件引用或者其他。

各个浏览器都认识,这里给firefox用;

\9所有的ie浏览器可识别;

background-color:yellow\0;\0是留给ie8的+background-color:pink;+ie7定了;

__专门留给神奇的ie6;:root#test{background-color:purple\9;}:root是给ie9的,

@media all and(min-width:0px){#test{background-color:black\0;}}这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。

@media screen and(-webkit-min-device-pixel-ratio:0){#test{}}最后这个是浏览器新贵chrome和safari的。

26.如何为有功能限制的浏览器提供网页?你会使用哪些技术和处理方法? 27.如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用?

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgddxp.html