"前端面试宝典(无Vue).pdf"
该资料是一本专注于前端面试的指南,由蔡威编写,适用于准备前端职位面试的人员。书中涵盖了前端开发中的核心概念和技术,包括HTML5的新特性、CSS3的新特性、布局技巧、CSS选择器优先级、输入类型、CSS单位、响应式设计、预处理器(如Less和Scss)以及浏览器兼容性等关键知识点。
1. HTML5的新特性包括:离线存储(AppCache)、拖放功能(Drag and Drop)、媒体元素(<video>和<audio>)、 canvas 画布、svg矢量图、geolocation 定位、web workers 和 web sockets 等,这些新特性极大地丰富了网页内容的呈现和交互方式。
2. CSS3的新特性包括:新的选择器(例如:nth-child()、nth-of-type()),多列布局(column-count、column-gap),过渡(transition)、动画(animation),以及边框半径(border-radius)、阴影效果(box-shadow)等,增强了页面的视觉效果和用户体验。
3. 水平垂直居中可以通过多种方法实现,如绝对定位配合transform,flex布局,或者CSS Grid布局等。
4. 双飞翼布局(圣杯布局)是一种创建三列布局的方法,其中两侧固定宽度,中间自适应。可以通过定位、flex布局或BFC(块级格式化上下文)来实现。
5. CSS盒模型分为标准盒模型(W3C)和IE盒模型,主要区别在于边距和内填充是否包含在总宽度和高度中。
6. input元素的type属性有很多值,例如:text、password、email、date、checkbox、radio等,用于创建不同类型的输入字段。
7. CSS中可继承的属性有color、font-size、line-height等,不可继承的属性包括border、padding、margin等。
8. px是固定单位,em基于父元素字体大小,rem基于根元素(html)字体大小,使用rem进行响应式布局可以统一调整页面元素大小。
9. rem适配方法通常基于设备像素比( DPR )和屏幕宽度(SW)计算HTML根元素的字体大小,从而实现不同设备的自适应布局。
10. display:none 隐藏元素且不占用空间,visibility:hidden 隐藏元素但保留其占用的空间。
11. position属性的值有static(默认)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位),分别对应不同的定位方式。
12. 浮动(float)用于创建文字环绕效果,但可能导致父元素高度塌陷,可通过clearfix类或设置overflow属性来清除浮动。
13. flex布局提供了一种更灵活的布局方式,可以方便地实现主轴对齐、交叉轴对齐以及弹性分配空间。rem布局则基于根元素字体大小调整所有元素尺寸,适合响应式设计。
14. 解决margin塌陷可以使用clearfix、设置border、使用display属性、用padding替代margin等方法。
15. Less和Scss是CSS预处理器,允许使用变量、嵌套规则、函数等,提高CSS的可维护性和复用性。
16. ::before 和 :before 之间的双冒号和单冒号的区别在于,双冒号是CSS3的标准写法,单冒号是CSS2.1的遗留写法,两者作用相同,都用于在元素前面插入内容。
17. CSS3新增的伪类如:hover、:active、:focus、:target等,伪元素如::first-letter、::first-line、::before、::after等,增强了元素的样式控制能力。
18. Bootstrap栅格系统基于12列的网格布局,通过col-xx-yy类实现响应式设计,简化了页面布局工作。
19. 自定义响应式布局方案通常涉及媒体查询(media queries)的应用,根据屏幕尺寸调整元素的样式和布局。
20. BFC(Block Formatting Context)是块级格式化上下文,影响元素内部和周围元素的布局,例如解决margin塌陷和防止浮动元素影响非浮动元素。
21. 渐进增强(Progressive Enhancement)是从基本功能开始,逐步添加更复杂的功能,确保所有用户都能访问内容;优雅降级(Graceful Degradation)则是先构建高级功能,然后为旧浏览器添加兼容性,保证核心功能在所有环境下可用。两者目标都是提供良好的用户体验,但策略不同。
22. iframe的优点包括:内容隔离、加载独立资源、实现页面内嵌,缺点包括:可能造成性能问题、不利于SEO、存在XSS攻击风险。
这本书详细介绍了前端面试中常见的技术点,对于面试准备和技能提升非常有帮助。