HTML / CSS面试题

共 26 道题，按题目查阅参考答案、代码示例与官方资料。

• 标准盒模型和 border-box 有什么区别？

  明确 width、padding 和 border 如何参与最终尺寸计算。

• Flexbox 和 Grid 应该如何选择？

  根据一维排列与二维对齐的需求选择布局工具。

• 为什么可点击的元素应该优先使用 button？

  从键盘、语义和辅助技术理解原生 HTML 的价值。

• 为什么 z-index 设置很大，元素还是被遮挡？

  理解层叠上下文，以及子元素无法跨越父级层叠顺序的原因。

• HTML 语义化对阅读、搜索与无障碍有什么价值？

• 表单的 name、value、label 与提交行为如何协作？

• 原生表单校验能解决什么，不能解决什么？

• script 的 async、defer 和 module 有什么区别？

• srcset、sizes 和 picture 怎样减少图片浪费？

• head 中哪些信息会影响页面体验与收录？

• dialog 和 Popover API 应该怎样使用？

• 层叠、优先级、继承和 !important 谁先决定样式？

• BFC 解决哪些布局问题，什么时候用 flow-root？

• absolute、fixed 和 sticky 的定位参照是什么？

• flex-basis、flex-grow、flex-shrink 如何分配空间？

• Grid 的 fr、minmax、auto-fit 和 auto-fill 如何使用？

• px、rem、em、百分比和动态视口单位怎么选？

• 媒体查询和容器查询分别适合什么场景？

• transition、animation 和 requestAnimationFrame 怎么选？

• CSS Modules、层叠层和自定义属性怎样帮助维护样式？

• font-display 怎样影响字体加载期间的文字显示？

• 逻辑属性为什么比固定写 left、right 更适合国际化？

• subgrid 如何让嵌套组件对齐父网格？

• 网页打印样式应该怎样单独设计？

• content-visibility: auto 与移除 DOM 有什么区别？

• :has() 怎样根据后代或相邻元素设置样式？