2019蚂蚁金服前端面试题回顾：CSS基础与适配技巧

在阿里巴巴的一次前端工程师面试中，面试时间为2019年3月19日下午2点，历时52分钟，面试官表现友好且给予了有价值的反馈。面试内容涵盖了前端开发的基础和深入概念，以下是一些关键知识点： 1. CSS基础知识 - `float` 属性：用于定义元素在页面上的浮动方式，以前常用于图片四周排布文本，但现在适用于任何元素。理解浮动元素如何创建块级框以及它如何影响文档流至关重要。 - 移动端适配与 `rem` 和 `px`：相对单位 `rem` 是基于根元素的字体尺寸，这使得调整字体大小更加灵活，而 `px` 则是绝对单位，与屏幕分辨率相关。混合使用这两种单位可以帮助实现响应式设计。 2. 盒模型与 BFC (块级格式化上下文) - CSS盒模型有两种：标准模型（content-box），元素的宽度和高度仅包括内容区域；IE模型（border-box），宽度和高度还包括内边距和边框。理解这两种模型的差异对于计算元素的实际尺寸和布局非常重要。 - BFC 的概念及其用途：创建BFC的条件包括浮动、定位、特定的 display 值等。BFC的主要作用是防止外边距折叠，确保浮动元素被包含，并有助于解决高度计算问题和多列布局中的垂直对齐。 3. 垂直居中技术 面试者被要求熟悉纯CSS实现垂直居中的方法，这可能涉及到 flexbox、grid、定位、line-height 或伪元素等技术，根据实际需求选择合适的方法。 4. 宽高比自适应 考察了如何实现宽高比为4:3的元素自适应，可能涉及到使用百分比宽度、媒体查询、JavaScript配合CSS等策略，以保持元素在不同屏幕尺寸下的美观。 面试者在准备过程中应该注意这些基础知识的扎实掌握，同时要了解面试官可能关注的具体细节和当前行业的最新趋势。通过这次面试，面试者认识到自身的不足并得到了宝贵的建议，这对未来的求职和技能提升都具有重要意义。