前端面试必备：HTML+CSS知识精要

"3_web前端面试宝典.md" 在前端开发领域，面试中常见的问题往往涉及到HTML、CSS以及响应式设计等基础知识。以下是一些关键的知识点： 1. **移动端适配**：移动设备屏幕尺寸多样，适配是前端开发的重要环节。一种常见的方法是使用相对单位如`rem`、`vh`、`vw`和百分比，配合`flexbox`布局，利用`viewport`单位确保页面在不同设备上正确显示。针对刘海屏等特殊设计的手机，可能需要额外的CSS处理。 2. **居中布局**：在CSS中，有多种方法可以实现元素的水平和垂直居中。例如，使用绝对定位，将`left`和`top`设为50%，再通过`margin-left`和`margin-top`调整；使用`display: flex`结合`justify-content: center`和`align-items: center`；或者使用绝对定位并结合`transform: translate(-50%, -50%)`。 3. **盒模型**：盒模型是理解CSS布局的基础，包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。W3C标准盒模型中，元素宽度或高度等于内容区域加上内边距和边框；而IE盒模型中，宽度或高度包含边框和内边距。 4. **Flexbox**（弹性盒布局）：是一种强大的布局模式，用于创建灵活、响应式的用户界面。父元素可以设置`display: flex`开启弹性盒模式，然后使用`justify-content`、`align-items`、`align-content`、`flex-wrap`和`flex-direction`来控制子元素的排列。子元素可以通过`order`改变顺序，`flex-grow`定义放大比例，`flex-shrink`定义缩小比例，以及`flex-basis`指定基础大小。 5. **响应式设计**：响应式设计是确保网站在不同设备上都能提供良好用户体验的关键。常见的技术包括媒体查询(`media queries`)，根据设备特性应用不同的CSS规则，以及流式布局和自适应图片等策略。 6. **CSS预处理器**：如Sass、Less等，它们允许开发者使用变量、嵌套规则、混合等特性，提高CSS的可维护性和复用性。 7. **CSS性能优化**：避免使用`!important`，减少CSS选择器的复杂性，使用`display: none`而非`visibility: hidden`来隐藏元素，以及合理使用CSS动画以避免重绘和回流。 8. **浏览器兼容性**：理解不同浏览器对CSS特性的支持程度，使用Autoprefixer自动添加浏览器前缀，或借助Babel等工具将ES6+语法转换为更广泛的浏览器兼容的JavaScript。 9. **CSS Grid**：另一种强大的布局系统，可以方便地创建二维网格布局，适用于复杂的网页设计。 10. **Web Accessibility**（无障碍性）：确保网页内容对于所有用户，包括视觉、听觉、运动能力受限的用户都能访问和理解，遵循WCAG指南。 以上这些知识点是前端面试中常见的，掌握它们能够帮助开发者在面试中表现出色，并在实际工作中创建高质量的网页应用。