安踏前端工程师面试题（含真实口语化答案）.docxVIP

安踏前端工程师面试题（含真实口语化答案）

一、HTML/CSS基础（一面必考）

1、说说HTML语义化，实际开发中你怎么用？

参考答案：简单来说语义化就是让标签各司其职，标签含义和内容匹配，不全部用div写所有结构。常用的语义化标签有header、nav、main、section、footer、article这些。

我平时做安踏商城H5页面时，顶部导航用nav，页面头部banner用header，商品列表区域用section，底部版权栏用footer。这么做主要三个好处：第一代码可读性高，团队协作时新人能快速看懂页面结构；第二利于SEO，爬虫可以精准识别页面核心模块；第三适配无障碍设备，方便视障用户借助阅读器浏览页面。另外我会严格区分b和strong、i和em，前者只是单纯样式加粗倾斜，后者是具备语义强调作用。

2、CSS垂直居中的常用方案，分别说说优缺点和适用场景

参考答案：我开发中最常用三种方案，适配不同商城模块场景：

①Flex居中：父元素设置display:flex，搭配justify-content和align-items。优点是代码最少、兼容性好，移动端H5首选，我做商品弹窗、标签居中基本都用这个；缺点是会直接改变父元素整体布局结构。

②绝对定位+transform：子元素absolute，top/left设为50%，再用translate(-50%,-50%