「CSS 面试」这一题可以难倒 80% 以上的面试者

取值

absolute

fixed

定位

105 条回复 • 2015-09-15 09:28:30 +08:00

1 2

❮

❯

1

leojoy710

2015-08-17 16:52:31 +08:00

1

我的经验是...css 大部分属性...稍微问深一点都能难倒一片...

2

FrankFang128

OP

2015-08-17 16:53:02 +08:00

@leojoy710 不问深，就问定义，就全瞎。

3

edisonator

2015-08-17 16:53:16 +08:00

我的经历是 absolute 答得出相对谁定位的反而最少

4

romoo

2015-08-17 17:02:59 +08:00

上面刚面试一位同学不知道 absolute 相对谁定位。。。

5

FrankFang128

OP

2015-08-17 17:07:07 +08:00

@romoo 能说上来我就要，哈哈

6

romoo

2015-08-17 17:11:14 +08:00

@FrankFang128 可惜很多人只知道相对 relative 定位

7

yushiro

2015-08-17 17:14:15 +08:00 via iPhone

问题是，这个 position 难道面试的人平时都不用？随便谁，只要是写前端有过一定时间的，肯定会遇到 absolute 相对于谁定位的问题啊。
或者现在写前端的都是用各种 framework ？规避了这些基础？

8

FrankFang128

OP

2015-08-17 17:17:59 +08:00

@yushiro 他 /她们一般只知道 absolute 可以相对于祖先中的 relative 定位

9

ChiangDi

2015-08-17 17:19:04 +08:00

这都不知道也敢去面前端？

10

FrankFang128

OP

2015-08-17 17:19:19 +08:00

@yushiro 然后在工作中也只用 relative > absolute 这一种模式。

11

a591826944

2015-08-17 17:19:45 +08:00

看了下定义。。果然跟我的认识有点差异。。。
我是后端 lol

12

FrankFang128

OP

2015-08-17 17:19:47 +08:00

@ChiangDi 这样的人很多，而且很多都是从不错的学校出来的……

13

ChiangDi

2015-08-17 17:21:07 +08:00

相对父级元素设了 position 并且不是 static 最近的那个

14

pepsin

2015-08-17 17:22:30 +08:00

2

撞墙式编程嘛，这个不对换一个，一直到能成就好了。

对于 CSS 这种东西，这样搞其实也不能说有太大问题。尤其是撞的多了，也就有经验了，说可能说不上来，写可能都是一次过了。

15

ChefIsAwesome

2015-08-17 17:23:00 +08:00

margin: auto;
auto 的值在哪些情况下等于哪些值，你试试这个，看几个人会。
padding 的值可以是 auto 吗？你再问问，看看几个人说是。

16

cxe2v

2015-08-17 17:27:23 +08:00

突然感觉前端好深奥

17

Bardon

2015-08-17 17:30:21 +08:00

然而，大部分工作他们中的 80%都能胜任。

18

zythum

2015-08-17 17:31:49 +08:00

absolute 相对谁定位确实挺考细节的... 下次放面试题当加分项。

19

sumhat

2015-08-17 17:35:11 +08:00

会“茴”字的四种写法就很牛？来，楼主来默写一个 Int32 的最大值。

20

qinglangee

2015-08-17 17:35:58 +08:00

因为计算机学校里偏后端, 前端都是学好后端基础稍微学一下, 只要效果对了根本不在乎其它.
或者设计,美工兼的,不是这个专业的.

不知道现在有没有开发一个前端专业

21

raincious

2015-08-17 17:41:05 +08:00

@sumhat

(2^32 / 2 ) - 1

很难么？啊哈哈哈……

22

vitas

2015-08-17 17:41:17 +08:00

- - 我是 UI ，偶尔帮前端做一些简单的页面.自学的.
有些取值怎么读都不知道~然而不影响我做出来的页面效果.
我觉得能做出东西来就行了吧
就像 UI 你用 ps 也好 sketch 也罢能画出好 UI 才是硬道理

23

sumhat

2015-08-17 17:45:55 +08:00

@raincious 我是指实际的值而不是公式

24

raincious

2015-08-17 17:47:30 +08:00

3

@sumhat

7F FF FF FF

很难么？啊哈哈哈

25

69

2015-08-17 17:47:51 +08:00

2

既然是 CSS 的工作，能「合理」的還原設計師的作品、以及交互效果才是最重要的；
其次才是對 CSS 原理的理解，雖然這些理解有助於更好的工作、在工作中碰更少的坑；

但是，如果一個人本身有著不錯的工作能力，卻因為這樣的題目就被否定，對企業也是一個損失，要知道，前端在大陸本身就沒有多少正式的授課，基本都是靠自己摸索和自學。

無論是題目、還是主貼內容、或是樓主的觀點，都太過絕對了。

26

tabris17

2015-08-17 17:49:26 +08:00

我做前端的时候还是 IE6 时代，我记得 position:fixed 的兼容性是有问题的，所以从来不用

27

qinglangee

2015-08-17 18:00:21 +08:00

@raincious 哎哟,不错哦, 明天来上班

28

yangff

2015-08-17 18:03:31 +08:00

其实这都不是问题……

但是这样就是为什么，前端总会出现要一个一个浏览器适配过去的情况……

29

FrankFang128

OP

2015-08-17 18:04:16 +08:00 via Android

@69 面试就像应试，必然有这个缺点

30

FrankFang128

OP

2015-08-17 18:13:39 +08:00

@tabris17 现在已经不是 IE 6 时代了，如果现在还在学习陈旧的知识，说明知识获取渠道太陈旧（只会用百度）

31

66beta

2015-08-17 18:15:08 +08:00

1

楼主提供一台电脑，用 google 查找出答案的就留下吧 :)

32

FrankFang128

OP

2015-08-17 18:16:54 +08:00 via Android

@66beta 自带 VPN/Shadowsocks 的加分。

33

simodorg

2015-08-17 18:18:43 +08:00 via iPhone

@66beta 能马上提出是否能用 Google 搜索，并看懂英文理解进去，能用自己语言说出个大概，这样的学习能力也是可以的。

34

raincious

2015-08-17 19:02:40 +08:00

@FrankFang128

说真的我原先也没想起来除了 fixed 、 absolute 、 relative 之外还有什么其他的值，于是我搜了下，发现还有一个 static ，然后，我突然想起来那不是默认值么……也难怪。（当然还有 inherit 和 initial 这两个公有的）

如果一个值不经常使用的话，的确会渐渐生疏。

> 这反映出大部分新人根本不看标准或者定义，直接用，我只能说你们很勇敢。

我倒是同意，因为我自己遇到的很多坑都是因为不熟悉标准和定义（里的坑）所以掉进去的。

但：

> @tabris17 现在已经不是 IE 6 时代了，如果现在还在学习陈旧的知识，说明知识获取渠道太陈旧（只会用百度）

这个我倒是不敢苟同了。因为这仅仅只是保守而已，不是说知识有什么问题。

一个合格的程序员应该保证他自己的程序能够在尽量多的兼容各种意外状况。

比如你在 Windows 下面写的代码，跑在 Linux 上就会遇到问题。在这种情况下，你就会想到用兼容性更好的函数 /库来替代操作系统提供的功能。比如微软自家的 MultiByteToWideChar 和开源的 strconv 就是这样的情况。

就 CSS 来说，想要最大限度的进行兼容，就需要避免使用在不同浏览器下会有差异的属性。 fixed 是其中之一。而且要注意， position 是控制布局的属性，如果出现了不兼容的情况，页面的布局就乱了，这样产品就不合格。所以开发人员倾向于避免使用 fixed 没啥问题，直到决策人员下决定说只需要兼容高于某个版本的浏览器，而那些浏览器完全是支持 CSS2 标准的。

35

yangg

2015-08-17 19:07:15 +08:00 via iPhone

你知道 sticky 么

36

lijingyu68

2015-08-17 19:13:51 +08:00

前端做了两年了，同样答不上的路过。。。

37

edisonator

2015-08-17 19:18:54 +08:00

哦，看错了你的第三条。

38

hbkdsm

2015-08-17 19:25:48 +08:00

@FrankFang128

我来回答一下， position 属性设置为 absolute 的元素相对于离其最近的已定位祖先元素进行定位。若其祖先元素均非定位元素，则相对于初始包含块进行定位。

对否？

39

FrankFang128

OP

2015-08-17 19:44:32 +08:00

@lijingyu68 还好，我见过不会 CSS 的前端

40

clippit

2015-08-17 20:02:02 +08:00

也许有人说，这些都是查文档查手册可以得到的，作为面试题太苛刻了。但是我觉得，这些真的都是前端的基本功啊，比如 position 的取值，比如画个盒模型，指一下 width 和 height 从哪儿到哪儿（这个也是我面试时经常能 fail 掉一大帮人的题目）。这样的基础知识，就相当于你在 C/Java/PHP 里面写一个 for 循环，括号里三段的含义是什么一样基础。你们会认为，在面试的时候，写不出 for 循环，然后通过查 Google 查到应该怎么写了，这样就可以过了？

41

banri

2015-08-17 20:02:22 +08:00

没看上面回复，没搜索资料，试试回答下

position

inherit 继承，这个很多属性都有

static 默认值，占据文档流空间

relative 相对于 static 的位置定位，占据文档流空间

absolute 相对于第一个非 static 父元素定位，不占据文档流空间。如果所有父元素均为 static 值，则相对于 html 这个根元素定位。 html 本身也可以被 absolute 定位，它的参考物则是 viewport

fixed 相对于 viewport 定位，不占据文档流空间

42

pepsin

2015-08-17 20:04:47 +08:00

另外如果楼主觉得这样的人不好，那可能碰上一种上来就跟你讲 box 模型底层实现， webkit 背后渲染架构再跳回来跟你讲 CSS 的人，你可能也会被发一贴噢。

43

gongpeione

2015-08-17 20:15:26 +08:00

@banri 看到这个问题就又去你博客看了遍

44

banri

2015-08-17 20:22:56 +08:00

@gongpeione 树大触又黑窝！

45

ileenhow

2015-08-17 20:24:50 +08:00

现在快有 sticky 了

46

banri

2015-08-17 20:25:09 +08:00

@banri 想起来还得补充一句， absolute 还得用 top/right/bottom/left 触发，不然还是会呆在原来的位置，不过表现形式和 static 不同 -w-

47

otakustay

2015-08-17 20:37:59 +08:00

看你面的啥人，我面过的人这个问题大概只有 20%的答不出

另外没说出 sticky 你算答错吗

48

FrankFang128

OP

2015-08-17 20:53:40 +08:00 via Android

@otakustay 你们那么关心 sticky 干啥，还在草案阶段。以后说不定会变。

49

aivier

2015-08-17 20:57:33 +08:00

不管懂不懂，反正我是做出来了→_→你看呢

需要用的时候自然会知道

50

jarlyyn

2015-08-17 21:01:35 +08:00 via Android

毫无价值的问题。

面初级切图仔出普通个结构的页面和 html 让写样式就行了。

51

YuJianrong

2015-08-17 21:07:44 +08:00 via iPhone

这个问题还好，我觉得 css 的 killer 问题应该是给两个 css selector 问谁的优先级高以及为什么。

没针对复习过能答出来估计是大牛……

52

orvice

2015-08-17 21:08:17 +08:00

跪了。。

53

windfarer

2015-08-17 21:31:32 +08:00

我觉得这个问题能这么难，完全是因为一开始这地方设计得就比较 2B

54

LancerComet

2015-08-17 21:32:16 +08:00

楼主应该问问 CSS3 属性与 Chrome 中的 GraphicsLayer 的联系啊渲染原理啊之类的啪啪啪，见到能答的就收。

55

ceoimon

2015-08-17 21:59:50 +08:00

又复习了一遍...

看了 banri 的回复才知道 fixed 相对于视口 viewport 定位, 所以如果我答相对于浏览器窗口（ browser window ）算“不准确”吗...

实际上问题 “除了 fixed absolute relative 还有哪些取值”确实没什么价值， static 定位即使不知道名字也至少知道有这么一个东西吧，还是你想得到 inherit 这种答复，那么你能说出不能使用 inherit 值的 CSS 属性吗？

initial 值真的有人用吗...

附： CSS 中的 initial 值有什么卵用？： http://stackoverflow.com/questions/18534561/what-is-use-of-initial-value-in-css

56

SoloCompany

2015-08-17 23:26:56 +08:00

人家好不容易背了半天的 box-sizing 你来问这个？

57

yhxx

2015-08-17 23:31:51 +08:00

前一段时间也被问了这个问题，答了 5 个，自以为答得不错，被批评不关注新姿势。
查了一下发现现在有 8 个了。。。。

58

msg7086

2015-08-17 23:33:21 +08:00

@sumhat
int32_max 真没什么好问的，周围不少人都能秒答。
这都是常年要记住的东西。

59

sumhat

2015-08-17 23:36:31 +08:00

@msg7086 我想表达的是，记住这些东西有用么......Stackoverflow 上一大堆答疑贴，有啥不会直接搜即可。

60

msg7086

2015-08-17 23:43:52 +08:00

@sumhat 有啊。

否则还要上这么多课做什么。写代码无非就是照着手册搬，出问题爆栈。学金融的无非一大堆概念和公式，有需要去翻翻书就好了还拿什么 MBA 。

如果只是天天查爆栈的话，大概就只能做个底层民工。高端码农的目标应该是能在爆栈上解决问题，而不是遇到问题去爆栈上找人求助 /找贴参考。（特别是，如果爆栈上一堆人在问的问题，多数是很浅的问题。）

如果是招后端的，面前端面到那么细是不应该。然而你一个前端来面，面得细点并不过分吧。
像这种 position 的知识如果你不知道的话，并不是说要用的时候搜一下就知道了，而是要用的时候你连他们的「存在」都不知道。这就会造成决定性的差异了。

这和回字的多少种写法没太大关系。回随便你怎么写都不影响使用。 CSS 你不能随便写啊。

61

iyaozhen

2015-08-17 23:49:00 +08:00

然而校招时这道题必背呀。不过 absolute 这个确实一开始不好理解。

62

shiny

2015-08-17 23:57:16 +08:00

面试的目的不是要考倒别人，而是看对方解决问题的能力。
靠这种题目来筛选新手也是难为 LZ 了

63

nigelvon

2015-08-18 00:21:26 +08:00

1

面试官的初级阶段。

64

MaiCong

2015-08-18 04:40:14 +08:00 via iPad

来吧，前端都看看吧！ https://github.com/hawx1993/Front-end-Interview-questions

65

sumhat

2015-08-18 06:36:55 +08:00

@msg7086

对于你说的情况，我更希望面试官的问法是：做出某一类的 UI 效果，需要怎么写 CSS/HTML ；而不是默写 position 有几种可能的值。前者可能有多种解法，而后者就是唯一解。

我不太了解 CSS ，但它应该和其它语言一样，解决一个问题，可能有多种做法。如果面试者解决不了某个问题，说他能力差无可厚非；而他若是通过另外的方法，在不依赖使用 position 而解决这个问题的情况下，非要被说成不知道 position 而被淘汰，那则是面试官的问题了。

66

msg7086

2015-08-18 07:11:14 +08:00

@sumhat 「前者可能有多种解法」
其实并不一定。

比如做排版的时候我不用 div 用表格可以不？其实是可以的。

只不过……

67

P233

2015-08-18 08:30:49 +08:00

对 CSS 基础理解不深刻，往往写出的 HTML 结构很差，甚至混乱。问问基础问题不算什么吧？

68

kaifazhe

2015-08-18 08:37:37 +08:00

做好前端要有钻牛角尖的精神 http://www.imooc.com/learn/192?src=sugc

69

qdwang

2015-08-18 08:48:00 +08:00 via Android

1

就是 lz 这样的人太多所以我转行不做前端了

70

leojoy710

2015-08-18 08:51:28 +08:00

昨天占了个沙发...对 LZ 表示深深的赞同...
今天上来一看...就一个感觉...
卧槽...原来真么多人对前端的要求这么低...

71

FrankFang128

OP

2015-08-18 08:51:47 +08:00

@qdwang 那你还挺脆弱的。

72

FrankFang128

OP

2015-08-18 08:52:22 +08:00

@leojoy710 恩，低得出乎我意料。

73

FrankFang128

OP

2015-08-18 08:53:34 +08:00

@kaifazhe 张鑫旭对 CSS 是挺能钻研的。

74

coolzjy

2015-08-18 09:06:24 +08:00

现实情况是：能出作品的不一定能答得出，能答得出的不一定能出作品

75

markyun

2015-08-18 09:06:48 +08:00

你问的对，资深的工程师能把 absolute 和 relative 弄混，这样的人不要也罢，

因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。

具体参见我整理过的一篇面试题：

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions

76

along

2015-08-18 09:10:26 +08:00

前端群管理几年下来，总结了下几类人：
刻苦钻研的，任何问题都会举一反三发问，并且找到相关内容系统了解的
“我不是做这个的，我就是偶尔用一下，你就告诉我怎么做就行，我不想知道为什么”
同一个问题，隔几天问一下，至于为什么，就是知其然不知其所以然，然后记忆模糊。
“这个效果怎么做啊”，“有没有人帮我做一下啊”，“这个效果谁有代码，‘分享’一下啊”

多说一句，很多人在群里见到好东西就要人分享，见到就要人分享，就只见他索取，不见有回报。常言道”前端没有秘密“，代码都在那了，有些人就是懒得自己去弄，一定要别人送到嘴边。对这种人，就呵呵了。（楼有点歪，对不住了。）

话说，面试的时候，问问基础的就可以筛选一大批了。这也是不好招人的一大原因。半瓶水太多。

77

FrankFang128

OP

2015-08-18 09:16:27 +08:00

@coolzjy 有作品就不用答这种题了，因为他在项目经验和动手能力已经加分了。没作品的话我问什么？只能问基础。

78

tabris17

2015-08-18 09:23:47 +08:00

@FrankFang128 我早就弃前端这个坑了。确实，前端知识更新快，但是都是些无用的知识，正如楼上有人所说，茴香豆的茴有几种写法，能写出四种的人并不比写出三种的人高明多少。这些知识对能力提升并没有什么帮助。

79

xohozu

2015-08-18 09:29:49 +08:00

话说阿里不是让前端、客户端这些岗位的无经验者路转 Java 嘛 XD

80

FrankFang128

OP

2015-08-18 09:35:45 +08:00

@xohozu 不可能啊，阿里 Java 这么多， Java 比前端能有 7:1 ，怎么可能让人转 Java 。

81

xohozu

2015-08-18 09:39:36 +08:00

@FrankFang128 做 Java 后备军，宁缺毋滥(Java 除外)。

82

learnshare

2015-08-18 09:44:37 +08:00

sticky 几乎可以忽略掉

83

zongwan

2015-08-18 09:54:02 +08:00

1

突然蹦出来一个可以鄙视 80%面试者的前端

楼主前端面试是不是只看之前经验如何? 招过来就直接要干活的?
招学生,有没有培养的打算? 需要计较那么多问题吗?
直接测试对互联网相关的兴趣爱好不就可以判断是否值得培养了吗?

建议学生们都学客户端吧 IOS/Android 放弃前端这种高大上接近全栈的工作
我周围的同事对招进来一年不到经验连 git 都不会的新手都手把手教
我也本以为新手技术很菜,但客户端就让这些"新手" 做出来了
难道"新手" 没有经验的顾虑动手能力更强吗