前端面试必备知识点: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表示变量未定义或函数返回值未指定。 以上内容仅是前端面试宝典的部分核心知识点,全面掌握这些将有助于在面试中脱颖而出。
![](https://csdnimg.cn/release/download_crawler_static/88282334/bg10.jpg)
![](https://csdnimg.cn/release/download_crawler_static/88282334/bg11.jpg)
![](https://csdnimg.cn/release/download_crawler_static/88282334/bg12.jpg)
![](https://csdnimg.cn/release/download_crawler_static/88282334/bg13.jpg)
![](https://csdnimg.cn/release/download_crawler_static/88282334/bg14.jpg)
剩余252页未读,继续阅读
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/bad7430e6e6f4899b670e04e7b559a54_qq_48652579.jpg!1)
- 粉丝: 2w+
- 资源: 88
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Vue实现iOS原生Picker组件:详细解析与实现思路
- Arduino蓝牙小车:参数调试与功能控制
- 百度Java面试精华:200页精选资源涵盖核心知识点
- Swift使用CoreData填坑指南:CoreData在Swift 3.0的变化
- 微距离无线充电器创新设计及其实验探索
- MTK Android平台开发全攻略:44步详解流程
- RecyclerView全面解析:替代ListView的新选择
- Android开发:自动适配中英文键盘解决方案
- Android调用WebService接口教程
- Android开发:BitmapUtil图片处理全解析与实例
- Android多线程断点续传实现详解
- PCA算法在人脸识别会议签到系统中的应用
- EventBus 3.0:Android事件总线详解与实战应用
- Android FileUtil:全面解析文件操作实用技巧与实例
- RecyclerView添加头部和尾部实战教程
- Android实现微博滑动固定顶部栏实战与优化
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)