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

[FrankFang128]

position 有哪些取值？各取值的意义分别是什么？

我上个月面了 5 个人，全都答得不准确。

所谓准确就是把各取值相对谁定位说清楚。

• 有人不知道除了 fixed absolute relative 还有哪些取值。
• 有人不知道 fixed 相对什么定位。（知道但是说不出名字）
• 答错最多得还是 absolute 相对谁定位。

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

注：标题党了， 80% 是我的个人经验，实际应该更高 lol 。

但凡是有拿的出手的作品的，我一道基础题都不需要问。

但学生一般没有啊。

原来考 position 都是难为面试者啊？
下次遇到没做过项目的面试者，我直接问

你的梦想是什么？

就好了，就不初级，不 low 了吧。

[leojoy710]

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

[FrankFang128]

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

[edisonator]

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

[romoo]

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

[FrankFang128]

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

[romoo]

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

[yushiro]

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

[FrankFang128]

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

[ChiangDi]

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

[FrankFang128]

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

[a591826944]

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

[FrankFang128]

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

[ChiangDi]

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

[pepsin]

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

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

[ChefIsAwesome]

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

[cxe2v]

突然感觉前端好深奥

[Bardon]

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

[zythum]

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

[sumhat]

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

[qinglangee]

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

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

[raincious]

@sumhat

(2^32 / 2 ) - 1

很难么？啊哈哈哈……

[vitas]

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

[sumhat]

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

[raincious]

@sumhat

7F FF FF FF

很难么？啊哈哈哈

[69]

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

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

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

[tabris17]

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

[qinglangee]

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

[yangff]

其实这都不是问题……

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

[FrankFang128]

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

[FrankFang128]

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

[66beta]

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

[FrankFang128]

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

[simodorg]

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

[raincious]

@FrankFang128

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

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


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

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

但：

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

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

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

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

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

[yangg]

你知道 sticky 么

[lijingyu68]

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

[edisonator]

哦，看错了你的第三条。

[hbkdsm]

@FrankFang128

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

对否？

[FrankFang128]

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

[clippit]

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

[banri]

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

position

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

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

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

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

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

[pepsin]

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

[gongpeione]

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

[banri]

@gongpeione 树大触又黑窝！

[ileenhow]

现在快有 sticky 了

[banri]

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

[otakustay]

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

另外没说出 sticky 你算答错吗

[FrankFang128]

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

[aivier]

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

需要用的时候自然会知道

[jarlyyn]

毫无价值的问题。

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

[YuJianrong]

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

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

[orvice]

跪了。。

[windfarer]

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

[LancerComet]

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

[ceoimon]

又复习了一遍...

看了 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

[SoloCompany]

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

[yhxx]

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

[msg7086]

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

[sumhat]

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

[msg7086]

@sumhat 有啊。

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

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

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

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

[iyaozhen]

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

[shiny]

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

[nigelvon]

面试官的初级阶段。

[MaiCong]

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

[sumhat]

@msg7086

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

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

[msg7086]

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

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

只不过……

[P233]

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

[kaifazhe]

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

[qdwang]

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

[leojoy710]

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

[FrankFang128]

@qdwang 那你还挺脆弱的。

[FrankFang128]

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

[FrankFang128]

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

[coolzjy]

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

[markyun]

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

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

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

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

[along]

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

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

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

[FrankFang128]

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

[tabris17]

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

[xohozu]

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

[FrankFang128]

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

[xohozu]

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

[learnshare]

sticky 几乎可以忽略掉

[zongwan]

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

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

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

[vebuqi]

请问招 16 届的吗？坐标哪里

[Mcatt]

表示无压力

[FrankFang128]

@vebuqi 杭州， 16 届内推时间已过，现在只有统招了。你找工作的话这两个月紧盯各大网站的招聘公告。 https://campus.alibaba.com/index.htm 过了这两个月机会就少了。

[lijingyu68]

@ceoimon
@FrankFang128
其实取值除过通用的那两个，还有： static | relative | absolute | fixed | center | page | sticky

[latyas]

都是标准规定的，既然都是规定的都可以搜到，为什么还要作为基础来考？

[lausius]

确实问到我了。看标题还以为又是招聘广告。

[iwege]

不然楼主给一个答案？不给答案的提问都是找碴。

[andy12530]

知道 sticky 属性的同学， css 这一块应该不会差。

[FrankFang128]

@iwege http://www.w3.org/TR/CSS2/visuren.html#choose-position 定义，无法找茬。

[chimon]

马克一下，我不觉得吐槽这个有什么不好啊~ 之前也有盒模型都不知道的姑娘上来就开 3k ，我觉得太浮躁了，知道答案的人至少知道他切图一般不会有问题，连个大概的答案都说不上来的人，即使有作品也可能是比别人多花两倍时间慢慢调整才做出来的？

[RoshanWu]

这道问题我也是每次面试必问，问法少有不同：
1. position 定位有几种方式
2. 这几种方式中，哪些是可以让元素脱离文档流的

然后基本上就要把脱离文档流是什么意思解释一遍。。。

[crs0910]

哈哈 我也很喜欢问这个。确实很坑爹，很多人都以为前端就是宽高和颜色。。。

[dslwind]

@sumhat 2147483647
高中就能被出来我会乱说。

[KuroNekoFan]

确实很基础，不过感觉 initial 和 inherit 两个取值不知道也罢

[ericls]

还不如面试他们是否会 google

随便是谁 看到这种问题 都需要 google 的吧

[FrankFang128]

@ericls 电话☎面试，不方便

[FrankFang128]

来，翻页