前端面试必备知识点：H5特性、CSS布局与JavaScript基础

"前端面试宝典V4.0.pdf" 前端面试是检验开发者技术实力的重要环节，本资源提供了丰富的前端面试题目，涵盖了HTML5移动Web开发、CSS样式、JavaScript基础知识等多个方面，旨在帮助求职者更好地准备面试。以下是部分重点知识点的详细解释： 1. **H5新特性**：HTML5引入了新的标签（如<header>, <footer>, <section>等）、离线存储（App Cache）、拖放功能、媒体元素（<audio>, <video>）、表单控件（<input type="date">等）、 canvas和svg图形、Web Workers和Web Storage等。 2. **CSS盒模型**：包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，理解盒模型对于布局至关重要。 3. **水平垂直居中**：可以通过多种方法实现，如使用Flexbox布局的`justify-content: center; align-items: center;`，或者绝对定位配合`left: 50%; top: 50%; transform: translate(-50%, -50%);`。 4. **双飞翼布局/圣杯布局**：用于创建三列布局，中间内容区域固定宽度，两侧自适应，通过负margin和相对定位实现。 5. **CSS选择器优先级**：计算方式是ID选择器(100) > 类选择器(10) > 属性选择器/伪类(10) > 标签选择器(1) > 通配符选择器/子选择器/相邻兄弟选择器(0)。内联样式优先级最高。 6. **input元素的type属性**：包括text、password、email、number、date、checkbox、radio等多种类型，用于不同类型的用户输入。 7. **CSS继承性**：如color、font-size、line-height等可以继承，而border、padding、margin等不能继承。 8. **px、em、rem的区别**：px是固定单位，em基于父元素字体大小，rem基于根元素（html）字体大小，可用于响应式设计。 9. **rem适配方案**：通过设置html元素的字体大小，结合媒体查询动态调整，实现不同屏幕尺寸下的适配。 10. **display:none与visibility:hidden**：前者是元素不占据空间，后者元素依然占据空间但不可见。 11. **position属性**：包括static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位），各有不同的定位规则。 12. **浮动与清除浮动**：浮动用于创建多列布局，但会导致父元素高度塌陷，可通过clear属性或使用clearfix类来清除浮动。 13. **Flex布局**：弹性盒子模型，允许更灵活的布局控制，包括主轴对齐、侧轴对齐、项目伸缩等。 14. **解决margin塌陷**：使用BFC（块格式化上下文）、设置`overflow: auto`、使用`display`属性等方法。 15. **::before和::after伪元素**：在元素内容前面或后面插入内容，双冒号表示CSS3语法，单冒号为CSS2.1语法。 16. **CSS3新伪类**：如`:hover`, `:active`, `:focus`, `:nth-child()`, `:nth-of-type()`等，用于更精细的元素状态选择。 17. **Bootstrap栅格系统**：基于12列的网格布局，通过`.col-*-*`类实现响应式设计。 18. **BFC（Block Formatting Context）**：一个独立的渲染区域，决定了内部元素如何定位以及与外部元素的关系。 19. **渐进增强与优雅降级**：渐进增强是从基本功能开始，逐步添加复杂功能以覆盖更多浏览器；优雅降级则是在先进浏览器上使用最新技术，同时确保在旧浏览器上有基本功能。 20. **iframe优缺点**：优点是可以嵌入外部网页，缺点是可能导致页面加载速度慢，SEO不友好，且存在安全风险。 21. **小于12px文字**：Chrome等浏览器默认不支持小于12px的文本，可以通过CSS3的`transform: scale()`缩小元素，或者使用`transform: translateY()`模拟小字体。 22. **JavaScript基本类型**：包括Undefined、Null、Boolean、Number、String、Symbol（ES6新增）和BigInt（ES10新增）；引用类型有Object，包括Array、Function等。 23. **创建函数**：可以使用function声明、函数表达式（匿名函数、命名函数表达式）和箭头函数。 24. **创建对象**：字面量语法、构造函数、Object.create、ES6的class和解构赋值等。 25. **宿主对象与原生对象**：宿主对象由JavaScript运行环境提供，如BOM和DOM对象；原生对象是JavaScript引擎提供的，如Array、String等。 26. **内置对象与方法**：例如Math对象包含各种数学函数，Date对象处理日期和时间，Array对象提供数组操作方法等。 27. **===与==的区别**：`===`严格相等，不仅比较值，还比较类型；`==`相等，会进行类型转换。 28. **null与undefined的区别**：null是一个特殊值，表示“无”或“空”，undefined表示变量未定义或函数返回值未指定。 以上内容仅是前端面试宝典的部分核心知识点，全面掌握这些将有助于在面试中脱颖而出。