您所在的位置:小祥子 » 编程 » CSS » 正文

前端开发面试题(一)

时间:2015-07-22 编辑:奈良鹿 来源:CnBlogs

前一段时间应聘了一家公司,由于面试前完全没有做准备,面试过程中被问到了一些基础的前端开发问题我没答出来,对方认为"和我们期望的水平还有一定差距"为由拒绝我。

刚好我在github看到一篇很全的前端开发面试题目,所以就尝试自己整理一份答案出来。这篇文章的初衷是希望能够和大家互相讨论交流一下,如果我有错误的地方十分欢迎指出来。

PS: 我不认为单纯通过做题能够成为一名优秀的开发者,但是如果因为没有准备充足错失去机会是一件更糟糕的事(有这种经验的人会认同我的)。

CSS">CSS相关问题

1. class和id的区别

如果元素具有唯一性,就考虑使用id;如果元素会多次出现,就是用class。值得注意的是,id的优先级比class高。

"CSS doesn't care,But Javascript care"

如果id和class用的不恰当,在JavaScript中就会遇到问题。例如getElementById返回一个对象,而getElementByClassName就会返回一个数组。

2. 描述下"reset"CSS文件的作用和使用它的好处

每个浏览器对于不同元素的css样式的默认值是不一样的,使用reset可以统一css样式。
常见的reset方法有:

* {
	margin: 0;
	padding: 0;
}
  • 期待能够指出它的负面影响,或者提到它的一个替代者normalize

    使用reset方法会有个很大弊端,因为它清除了所有元素的margin和padding。实际上,对于某些元素保留一定的padding和margin是有好处的。

    normalize是一个比较理想的解决方案。它统一了css的默认样式,同时对相应的元素初始化了默认值。一些比较流行的库例如bootstrap已经事先引入了normalize

3. 解释一下浮动和它的工作原理

  • 浮动的工作原理:

    如果对一个元素设置浮动,它就会脱离文本流直到碰到框的最左或者最右,普通流的其他元素会取代它原本的位置。
    值得注意的是,如果框太窄不足容纳多个浮动元素,多出来的浮动的元素会出现在下一行;如果先前的元素高出其他浮动元素,可能导致下一行的浮动元素被"卡住",接触不到下一行的边框。

4. 描述z-index和叠加上下文是如何形成的

z-index属性设置元素的堆叠顺序,数值越大的越靠前。注意,z-index的值可以是负数,并且只在元素设置定位(比如position:absolute)才可形成。

点击查看CodePen示例

顺便加一句,firefox为web开发者增添了3D视图的功能。pretty neat, huh?

5. 列举不同的清除浮动的技巧,并指出它们各自适应的场景

  • 元素溢出

    浮动会出现一个问题,由于浮动的元素脱离了文本流,如果框的高度不足以包含浮动元素,浮动的元素就会"溢出"。
  • 清除浮动元素溢出的方法

    • 设置空标签:

    在框内设置一个空标签<div class="clear"></div>, 空标签的CSS样式:

    .clear {
    	clear: both;
    }

    这个方法的弊端是增加了无意义的标签。

    点击查看CodePen示例

    • 框架同时设置为浮动

    把框架(包含浮动元素的元素)同时设置成浮动,子元素会被完全包含。这种方法的弊端是,下一个元素也会收到这个浮动框架的影响,没有从根本上解决问题。

    • 添加:after伪元素

    这个办法其实本质上和设置空标签是一样的,只不过这里是用css样式在框内设置一个伪元素,然后把这个元素设置clear:both之后隐藏起来(height:0;visibility:hidden;)。

    #parent:after {
    	content: '.';
    	height: 0;
    	visibility: hidden;
    	display: block;
    	clear:both;
    }

    需要注意的是,如果不把伪元素的高度设置为0,框内最底部就会多出几行空白像素。

    点击查看CodePen示例

    • 框架设置overflow

    父级元素设置样式:

    #parent {
     overflow: hidden;
     zoom: 1;
    }

    zoom: 1;用于兼容ie浏览器

    点击查看CodePen示例

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

css sprites就是把网站的一些图片整合到一张图片当中,利用css的background属性把对应的图片需要的部位显示出来,达到减少请求数的目的。

css sprites最大的优点是减少请求数,并且减少图片的字节数。弊端是开发比较繁琐,难以适应高分辨率的图片。

点击查看CodePen示例

如果只是单纯现在自己的页面添加一些icon,强烈推荐font-awesome。

7. 你最喜欢的图片替代方案是什么,你如何选择使用

图片替代就是在使用图片来替换文档中原来的文本内容,达到文本内容无法渲染的视觉效果。图片替代的弊端是增加请求,而且会障碍人士和seo都不是十分友好。一般常用的图片替代方案有:

  • FIR方法

    点击查看CodePen示例

这种方法是添加一层包裹需要替换的内容,这新添加的一层上面设置background。需要替换的内容设置为display:none;
这种做法是相对比较简便的,也对seo比较有利。弊端是添加了多余的div。

  • Phark方法

    点击查看CodePen示例

这种方法主要是这是text-indent属性。text-indent属性通常用于这只第一行文本的缩进,可以未负值。所以可以用text-indent: -999px;把文本内容缩进超出了视图范围以外。这种方法的好处的支持障碍人士的阅读器,是比较常用的替代方案。

8. 讨论css hacks,条件引用或者其他

不同的浏览器对于不同css样式解释不一样,因此导致生成不同的页面效果。css hacks是针对不同的浏览器的特性,编写在不同浏览器上显示相等的效果;反过来,也可以针对不同浏览器编写出不同的页面效果。

9. 如何为有功能限制的浏览器提供网页?

  • 你会使用哪些技术和处理方法?

10. 有那些隐藏内容的方法(如果还要要保证屏幕阅读器可用呢?)

  • display:none;

    display:none;不会为元素保留物理空间,所以某些搜索引擎过滤掉,所以这种做法对于seo不利。

  • visibility:hidden;

    这种做法会占据物理空间,破坏页面结构,不推荐使用。

  • overflow: hidden;

    <p class="hide">hello this will not be display</p>

    .hide {
    	display: block;
    	overflow: hidden;
    	width: 0;
    	height: 0;
    }

    这是一种比较合理的处理办法,把文本内容设置为块级元素,然后撤销它的高度和宽度,在把超出的部分隐藏起来。既不影响seo,又达到了隐藏的目的。

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

Bootstrap。Bootstrap是个比较Nice的框架,即使是初学者也很容易掌握。它预定义了大部分比较常用的css样式,除此之外还包含了一堆有很有的组件,你需要做的只不过是给标签添加上适当的class它就会为你完成工作。你还可以利用less/sass更改源码,自定义你需要的样式。

Bootstrap的栅格系统把一行最多分为12列,你可以组合成3x4列,4x3列,2x6列等;然而分成12列是不能完全适应到所有的应用场所。比如,我先把一行平均分为5列,它就无能为力了。

另外,使用Bootstrap还有个比较严重的弊端。如果你的页面很依赖Bootstrap,你在标签上面定义的class会飞涨!如果你再加上AngularJS,项目的html文档很快就会变得无法管理。

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

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

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

<link rel="stylesheet" type="text/css" media="print" href="print.css">
以上为打印样式表,定义打印样式表需要注意的是:

  • 不要使用背景图片
  • 使用pt或者cm作为单位
  • 不要设置浮动元素

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

  • 选择器效率

    > CSS选择器效率从高外低的排序为:
    1. id选择器(#header)
    1. class选择器(.container)
    2. tag选择器(div,p)
    3. siblings选择器(h2+p)
    4. 子选择器(li>ul)
    5. 后代选择器(ul a)
    6. 属性选择器(type="text")
    7. 伪类、伪选择器(a:hover)
  • 组合选择器

    通常我们编写组合选择器(如ul li)是从左往右编写的,但是浏览器解析是从右外左的;也就是说,浏览器会从右外左遍历所有选择了的元素,在倒过来从DOM树的最顶端往下解析一次。
  • 关键选择器

    正如上面所解析的原理,假设我有```#box a {}```这条规则;浏览器会选中DOM树中所有的a标签,然后再一条一条检查这些a标签是否有一个id为box的父元素,这种做法会耗费太多浏览器资源。

    解决办法是给需要选中的a标签添加一些关键词, 例如#box a.item {}

  • 过度限制选择器

    一部分新手会这样写规则:
    > html body div#nav ul li a { ... }

    不要笑,我是认真的。我以前也认为这种写法可能更加便于浏览器找到我想要的东西,
    但是实际上正好相反。我们来还原一下浏览器解析这段规则的过程: 浏览器从右解析,抓去DOM树所有的<a>标签,一个一个检查它们是不是有一个<li>的祖先元素;把它们提取出来后,再一个一个检查它们同时有一个拥有<ul>祖先元素的<li>元素...好的,你现在知道我不是在开玩笑了。

    现在你知道为什么#nav a { ... }#nav li a { ... }高效了吧?

16. 使用CSS预处理器的优缺点有哪些?(SASS、Compass、Stylus、LESS)描述一下你使用过的CSS预处理器的优缺点

CSS预处理器是一种语言来增加CSS的"可编程性",一般的预处理器都支持变量,嵌套,Mixin等高级功能。用于提高css样式的编写效率,提高可维护性等。

缺点是,学习成本提高了,无形中会增加了团队的沟通成本。

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

相比英文字体,中文字体的选择在网页设计中有很大的局限性。原因是中文字体比英文字体字符多太多,一套英文字符顶多是26个字母再加一些符号;一套汉字每个字都是不同的字符,一套完整的字符至少也有几个MB。

国外的网站开发通常会引用一些厂商提供的Web Fonts(比如Google Fonts),但是这套方案由于上文提到的原因对汉字不适用。

通常,开发者偏向于使用系统自带的字体,这样就可以减少请求了。但是使用操作系统自带的字体会遇到另外的问题。由于操作系统自带的字体本来就不多,相互之间几乎没有交集,针对Mac OS系统写的网站,可能在PC上面显示得很糟糕。

幸好CSS提供了一个比较合理的解决办法。我们可以使用CSS的font-family属性来引用多种字体。font-family属性的规则是:

  1. 优先使用最前的字体
  2. 如果找不到字体,则使用下一个指定的字体
  3. 如果都没法满足,则使用系统默认的字体

示例:

font-family: Georgia, "Times New Roman", 
             "Microsoft YaHei", "微软雅黑", 
             STXihei, "华文细黑", 
             serif;

不好意思,好像跑题了。题目问的是『设计中用到了非标准的字体』。如果是这种情况,最好的办法应该是:

如果是英文,可以考虑使用Web Fonts;如果是Logo/Icon等,使用图片替代;文本内容使用font-family尽量做到与设计相近。

(待续)

欢迎分享本文, 但请保留原文链接。

关键词: