前端面试必备知识点：HTML5, CSS, JavaScript

"前端面试宝典V4.0--2022.1.pdf" 这份文档是针对前端面试准备的指南，涵盖了H5移动Web开发和JavaScript基础等多个方面的重要知识点，旨在帮助面试者掌握核心技能并顺利通过面试。 在H5移动Web开发部分，文档强调了以下关键点： 1. H5的新特性包括离线存储、拖放功能、媒体元素强化、表单控件升级等，而CSS3的新特性如动画、过渡、多列布局、新的选择器等都是面试中的常见问题。 2. 水平垂直居中可以通过多种方法实现，如Flexbox布局、绝对定位配合transform，或者使用CSS Grid。 3. 双飞翼布局是一种常见的响应式布局方法，通过相对定位和负margin来实现两侧内容的自适应。 4. CSS盒模型分为内容(content)、内边距(padding)、边框(border)和外边距(margin)，理解其工作原理对布局设计至关重要。 5. 选择器的优先级由ID选择器、类选择器、标签选择器和通配符选择器的组合决定，计算权重是理解CSS优先级的关键。 6. H5 input元素的type属性有很多值，如text、email、password、date等，面试时需熟悉其应用场景。 7. 可继承的CSS属性包括颜色、字体、列表样式等，不可继承的如边框、背景等。 8. px是固定单位，em基于父元素的字体大小，rem则基于根元素html的字体大小，用于响应式设计。 9. rem适配方案通常涉及设置html的font-size，并根据设备宽度动态调整，以实现不同屏幕尺寸的适配。 10. display:none元素不占用空间，而visibility:hidden元素仍占用空间但不可见。 11. position属性有static、relative、absolute、fixed四种值，分别对应不同的定位模式。 12. 浮动用于创建流式布局，可能导致父元素高度塌陷，清除浮动常用clear属性或clearfix hack。 13. Flex布局允许容器内的子元素灵活布局，rem布局则适用于响应式设计。 14. 解决margin塌陷可通过设置父元素的border、padding、overflow或使用clearfix类。 15. ::before和::after伪元素用双冒号表示CSS3新语法，单冒号是老版本语法，用于在元素前后插入内容。 16. CSS3新增伪类如:hover、:active、:focus，伪元素如::first-letter、::first-line等。 17. Bootstrap栅格系统通过行(row)和列(column)实现响应式布局，根据屏幕尺寸自动调整元素排列。 18. BFC（Block Formatting Context）是块级格式化上下文，对理解盒模型和布局隔离有重要作用。 19. 渐进增强是先确保基本功能在所有浏览器可用，然后逐步添加高级功能。优雅降级则是先针对现代浏览器开发，再为旧浏览器做兼容处理。 20. iframe优点在于可嵌入外部页面，缺点包括性能消耗、SEO问题及加载控制复杂。 21. 使用CSS在Chrome中支持小于12px的文本，可以借助transform: scale()缩放字体大小。 JavaScript基础部分包含以下重点： 1. 基本类型包括字符串、数字、布尔、null、undefined，引用类型如对象、数组、函数。 2. 创建函数的方式包括函数声明、函数表达式、箭头函数等。 3. 创建对象的方式有字面量语法、构造函数、工厂函数、对象字面量与原型链等。 4. 宿主对象由JavaScript运行环境提供，如浏览器对象，原生对象是JavaScript引擎提供的标准对象。 5. JavaScript内置对象如Array、Date、Math等，每个对象都有相应的方法，如Array的push、pop等。 6. ===和==的区别在于前者严格比较值和类型，后者只比较值，忽略类型。 7. null是一个空值，undefined表示未定义或变量未初始化。 这些知识点全面覆盖了前端开发的基础和进阶内容，对于准备前端面试的人来说是宝贵的学习资料。