首页>面试题库>web前端面试题

web前端面试题及答案总会(二)

2018-12-02 08:28:00 | 查看次数 270 | 分类: 面试题库>web前端面试题 文章来源:来源:http://www.ifx666.cn

摘要内容:web前端面试题及答案总会(二)

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.你最喜欢的图片替换方法是什么,你如何选择使用。

1 

Hello World

把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.如何视觉隐藏网页内容,只让它们在屏幕阅读器中可用?

  • display:none;的缺陷搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字。
  • visibility:hidden;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间3.overflow:hidden;一个比较合理的方法.texthidden{display:block;/*统一转化为块级元素*/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展示的方法,将宽度和高度设定为0,然后超过部分隐藏,就会弥补上述一、二方法中的缺陷,也达到了隐藏内容的目的。

28.你用过栅格系统吗?如果使用过,你最喜欢哪种?

比如:Bootstrap,流式栅格系统,http://960.gs/,栅格系统延续美学。

29.你用过媒体查询,或针对移动端的布局/CSS吗?

媒体查询,就是响应式布局。通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

语法结构及用法:@media 设备名 only (选取条件) not (选取条件) and(设备选取条件),设备二{sRules}。

示例如下:

 1 /* 当浏览器的可视区域小于980px */
 2 @media screen and (max-width: 980px) {
 3 #wrap {width: 90%; margin:0 auto;}
 4 #content {width: 60%;padding: 5%;}
 5 #sidebar {width: 30%;}
 6 #footer {padding: 8% 5%;margin-bottom: 10px;}
 7 }
 8 /* 当浏览器的可视区域小于650px */
 9 @media screen and (max-width: 650px) {
10 #header {height: auto;}
11 #searchform {position: absolute;top: 5px;right: 0;}
12 #content {width: auto; float: none; margin: 20px 0;}
13 #sidebar {width: 100%; float: none; margin: 0;}
14 }

30.你熟悉SVG样式的书写吗?

SVG 意为可缩放矢量图形(Scalable Vector Graphics)。

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用来定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
  • SVG 是万维网联盟的标准
  • SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

书写示例如下:

1 
2     
3     
4         
5     

31.如何优化网页的打印样式?

其中media指定的属性就是设备,显示器上就是screen,打印机则是print,电视是tv,投影仪是projection。打印样式示例如下:

但打印样式表也应注意以下事项:

  • 打印样式表中最好不要用背景图片,因为打印机不能打印CSS中的背景。如要显示图片,请使用html插入到页面中。
  • 最好不要使用像素作为单位,因为打印样式表要打印出来的会是实物,所以建议使用pt和cm。
  • 隐藏掉不必要的内容。(@print div{display:none;})
  • 打印样式表中最好少用浮动属性,因为它们会消失。如果想要知道打印样式表的效果如何,直接在浏览器上选择打印预览就可以了。

32.在书写高效CSS时会有哪些问题需要考虑?

  • 1.样式是:从右向左的解析一个选择器;
  • 2.ID最快,Universal最慢有四种类型的key or,解析速度由快到慢依次是:ID、class、tag和universal ;
  • 3.不要tag-qualify(永远不要这样做ul#main-navigation{}ID已经是唯一的,不需要Tag来标识,这样做会让选择器变慢。);
  • 4.后代选择器最糟糕(换句话说,下面这个选择器是很低效的:html body ul li a{});
  • 5.想清楚你为什么这样写;
  • 6.CSS3的效率问题(CSS3选择器(比如:nth-child)能够漂亮的定位我们想要的元素,又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。);
  • 7.我们知道#ID速度是最快的,那么我们都用ID,是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性。

33.使用CSS预处理器的优缺点有哪些?

     LESS&SassLESS是受Sass启发而开发的工具,它列出了如下开发的理由:

     “为什么要开发一个Sass的替代品呢?原因很简单:首先是语法。Sass的一个关键特性是缩进式的语法,这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。LESS给CSS带来了很多特性,使得LESS能够和CSS无缝地紧密结合在一起。因此,你可以平滑地由CSS迁移到LESS,如果你只是对使用变量或者操作感兴趣的话,你不需要学习一整门全新的语言。”

      StylusStylus相对前两者较新,可以看官方文档介绍的功能。

  • 1.来自NodeJS社区,所以和NodeJS走得很近,与JavaScript联系非常紧密。还有专门JavaScript API:http://learnboost.github.io/stylus/docs/js.html;
  • 2.支持Ruby之类等等框架;
  • 3.更多更强大的支持和功能总结:Sass看起来在提供的特性上占有优势,但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS,而不需要像Sass那样需要将CSS文件转换成Sass格式。Stylus功能上更为强壮,和js联系更加紧密。

34.如果设计中使用了非标准的字体,你该如何去实现?

所谓的标准字体是多数机器上都会有的,或者即使没有也可以由默认字体替代的字体。

方法:

  • 用图片代替
  • web fonts在线字库,如Google Webfonts,Typekit等等;http://www.chinaz.com/free/2012/0815/269267.shtml
  • @font-face,Webfonts(字体服务例如:Google Webfonts,Typekit等等。)

35.解释下浏览器是如何判断元素是否匹配某个CSS选择器?

从后往前判断。浏览器先产生一个元素集合,这个集合往往由最后一个部分的索引产生(如果没有索引就是所有元素的集合)。然后向上匹配,如果不符合上一个部分,就把元素从集合中删除,直到真个选择器都匹配完,还在集合中的元素就匹配这个选择器了。举个例子,有选择器:

1 body.ready#wrapper>.lol233

先把所有class中有lol233的元素拿出来组成一个集合,然后上一层,对每一个集合中的元素,如果元素的parent id不为#wrapper则把元素从集合中删去。再向上,从这个元素的父元素开始向上找,没有找到一个tagName为body且class中有ready的元素,就把原来的元素从集合中删去。至此这个选择器匹配结束,所有还在集合中的元素满足。大体就是这样,不过浏览器还会有一些奇怪的优化。为什么从后往前匹配因为效率和文档流的解析方向。效率不必说,找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向,是因为现在的CSS,一个元素只要确定了这个元素在文档流之前出现过的所有元素,就能确定他的匹配情况。应用在即使html没有载入完成,浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。为什么是用集合主要也还是效率。基于CSS Rule数量远远小于元素数量的假设和索引的运用,遍历每一条CSS Rule通过集合筛选,比遍历每一个元素再遍历每一条Rule匹配要快得多。

36.解释一下你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。

关于盒模型请看文章CSS之布局与定位

  • 请解释一下*{box-sizing:border-box;}的作用,并且说明使用它有什么好处?

说到IE的bug,在IE6以前的版本中,IE对盒模型的解析出现一些问题,跟其它浏览器不同,将border与padding都包含在width之内。而另外一些浏览器则与它相反,是不包括border和padding的。

在我们开发的过程中会发现,有时候,如果对页面中的大区域进行设置时,将border、padding计算到width和height之内,反而更灵活。但W3C的CSS2.1规范却规定了他们并不能被包含其中。考虑到这个问题,css3中引入了一个新的属性:box-sizing,它具有“content-box”和”border-box“两个值。

1 box-sizing:content-box

当我们设置box-sizing:content-box;时,浏览器对盒模型的解释遵从我们之前认识到的W3C标准,当它定义width和height时,它的宽度不包括border和padding。

1 box-sizing:border-box

当我们设置box-sizing:border-box;时,浏览器对盒模型的解释与IE6之前的版本相同,当它定义width和height时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和“height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

37.请罗列出你所知道的display属性的全部值。

display属性的值列表如下:

38.请解释一下relative、fixed、absolute和static元素的区别?请解释一下inline和inline-block的区别?

  • 关于第一个问题请看文章CSS之布局与定位 。

inline:此元素会被显示为内联元素,元素前后没有换行符。

inline-block:行内块元素。

39.你目前在使用哪一套CSS框架,或者在产品线上使用过哪一套?(Bootstrap,PureCSS,Foundation等等)

  • 如果有,请问是哪一套?如果可以,你如何改善CSS框架?
  • 请问你有使用过CSS Flexbox或者Grid specs吗?如果有,请问在性能和效率的方面你是怎么看的?

40.解释下事件代理。

JavaScript事件代理则是一种简单的技巧,通过它你可以把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事件的时候,可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。

1 function getEventTarget(e) {
2     e=e||window.event;
3     return e.target||e.srcElement;
4 }

上一篇: 没有了

下一篇: web前端面试题 本文是在GitHub上看到一个大牛总结的前端常见面试题

验证码:
评论列表
  • 文章推荐

    09-19 | 查看次数 787

    《深入理解Spring Cloud与微服务构建》PDF下载

    09-14 | 查看次数 198

    bootstrap tooltip 提示框的样式、提示字体颜...

    09-01 | 查看次数 200

    json字符串与java对象互转,json字符串转化为map...

    08-04 | 查看次数 383

    java面试题及答案---2018核心Java面试问题与解答...

    08-03 | 查看次数 900

    java面试题及答案---2018核心Java面试问题与解答...

    最新评论
    文章标题:管理和发布文章java cms

    评论内容:能下载吗

    评论时间:2018-12-12 01:30:02

  • 返回顶部
    欢迎投稿
    返回底部