Web前端面试必备知识：HTML+CSS重点解析

"最新版面试宝典(1).pdf" 面试宝典涵盖了Web前端与移动开发领域的关键知识点，包括HTML+CSS部分。以下是这些知识点的详细解析： 1. **垂直水平居中**：通过CSS，可以使用`display: flex; justify-content: center; align-items: center;` 或者 `position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);` 来实现不定宽高元素的居中。 2. **position属性**：有static、relative、absolute、fixed和sticky五个值，分别用于定位元素的位置，如static为默认值，relative相对于自身位置，absolute相对于最近的非static祖先元素，fixed相对于浏览器窗口，sticky则结合了relative和fixed的特性。 3. **px、em、rem单位**：px是像素单位，不可变；em基于父元素的字体大小；rem基于根元素（html）的字体大小，更适合做响应式设计。 4. **BFC（Block Formatting Contexts）**：是块级格式化上下文，用于确定块元素如何对其内容和周围元素进行布局。 5. **CSS引入方式**：有内联样式、内部样式表（`<style>`标签）和外部样式表（`link`和`@import`）。`link`是异步加载，`@import`会阻塞页面渲染，且`@import`在某些旧版IE浏览器中支持度较低。 6. **CSS Reset**：重置浏览器的默认样式，消除各浏览器间的样式差异，确保元素样式的一致性。 7. **CSS Sprites**：将多个小图像合并到一张大图上，通过改变背景位置来显示所需图片，减少HTTP请求，提高页面加载速度。 8. **清除浮动**：可以通过`clear:both`，额外的空div（`<div style="clear:both;"></div>`），或者使用CSS的`clearfix`类来解决浮动元素引起的父元素高度塌陷问题。 9. **响应式设计**：通过使用百分比、媒体查询（Media Queries）和弹性布局（Flexbox）或网格布局（Grid）等技术，使设计能适应不同分辨率的设备。 10. **渐进增强与优雅降级**：渐进增强是从基本功能开始，逐步增加对更高级浏览器的支持，而优雅降级是先创建高级功能，然后为旧浏览器添加回退策略，确保基本功能可用。 11. **结构与表现分离**：结构是HTML负责的内容组织，表现是CSS负责的样式设计，两者分离可以提高代码可维护性和可访问性。 12. **Web语义化**：使用具有明确含义的HTML标签，提高页面的可读性和可访问性，有利于搜索引擎优化（SEO）。 13. **CSS选择器**：包括元素选择器、类选择器、ID选择器、伪类、伪元素等。优先级是ID > 类/属性/伪类 > 元素，行内样式优先级最高。 14. **display:none vs visibility:hidden**：`display:none`元素完全不占用空间，而`visibility:hidden`元素仍保留其空间，只是不可见。 15. **浏览器兼容性**：可以通过条件注释、特定前缀（如`_`、`*`）或使用工具（如Autoprefixer）来处理不同浏览器的CSS样式兼容问题。 16. **HTML与XHTML**：XHTML更严格，要求所有标签都正确关闭，语法遵循XML规范，而HTML相对宽松。 17. **DOCTYPE**：声明文档类型，影响浏览器的解析模式。严格模式遵循标准，混杂模式则兼容旧的非标准行为。触发模式改变通常由DOCTYPE声明决定。 18. **盒模型**：W3C标准盒模型（3C）中，元素宽度=content + padding + border，IE的Quirks模式下，宽度包含content、padding和border。 19. **CSS Hack**：针对不同IE版本的兼容性问题，使用特定的CSS写法，如`_width`针对IE6，`*width`针对IE7，`width`则适用于IE8及以上。 20. **固定+自适应布局**：可以使用浮动布局、绝对定位或Flexbox来实现左侧固定宽度，右侧自适应宽度的布局。 21. **display:inline-block间隙问题**：行内块元素之间存在默认的空白间距，可通过设置`font-size: 0;`或使用负margin来消除。 22. **overflow属性**：有visible、hidden、scroll和auto四个值，用于控制内容溢出容器的处理方式。 23. **去除默认按钮样式**：通过CSS重写按钮样式，如设置`-webkit-appearance: none;`来去掉iPhone/iPad的默认样式。 24. **CSS样式初始化**：清除浏览器默认样式，确保元素在没有指定样式时具有一致的表现。 25. **div+css布局优势**：提高代码可维护性，便于响应式设计，提高页面性能，以及更好的SEO。 26. **表格对SEO的影响**：过多使用表格布局可能降低页面可读性和可访问性，不利于搜索引擎抓取内容。 27. **CSS优化技巧**：包括减少HTTP请求，合理使用CSS Sprites，压缩CSS，避免使用表达式等，以提高网页加载速度和性能。 以上知识点是Web前端开发者面试中常见的问题，理解和掌握这些内容对于提升专业技能和成功面试至关重要。