面试官问了个基础题，我愣了三秒。

px和vh的区别？天天写代码，真让解释反而卡壳。回来翻笔记才发现，这题考的不是记忆，是对网页渲染本质的理解。

打开网易新闻 查看精彩图片

px是钉子，vh是橡皮筋

打开网易新闻 查看精彩图片

px（像素）是绝对单位。你写width: 200px，这块内容在iPhone SE上是200像素，在27寸4K屏上还是200像素。它不管屏幕多大，钉死这个数。

vh（viewport height）是相对单位。1vh等于视口高度的1%，100vh就是满屏。手机横过来、分屏、换显示器，这个值跟着变。

一个场景就能分出高下：做全屏首图。用height: 100vh，一屏刚好填满；用px硬编码，换个设备要么裁头去尾，要么露出尴尬白边。

div和footer：盒子与标签的战争

第二个坑是语义化。面试官问footer和div的区别，我差点脱口而出"都是块级元素"。

div是哑巴盒子。它只管把内容包起来，方便你写CSS。浏览器看到div，不知道里面装的是导航、正文还是版权信息。

footer会说话。它明确告诉浏览器：这是页脚区域。搜索引擎爬虫读到这儿，知道页面结构到哪结束；屏幕阅读器能直接跳转；团队协作时，接手的人一眼看懂架构。

打开网易新闻 查看精彩图片

用div模拟footer能跑，但像用透明胶带粘名牌——功能有了，专业度没了。

面试的隐藏考点

两道题连着问，其实是在测同一件事：你能不能区分"能工作"和"做得对"。

px和vh的选择，影响的是响应式体验；div和footer的取舍，影响的是代码可维护性。前者用户看得见，后者下一个开发者看得见。

基础题答不好，不是知识盲区，是日常写代码时没问过自己"为什么选这个"。

下次面试前，建议把常用属性按"绝对/相对""语义/通用"重新分类过一遍。表面看是八股，实际是在练技术决策的肌肉记忆。