前端面试必备知识点：HTML5、CSS布局与Flexbox

"前端面试宝典（无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攻击风险。 这本书详细介绍了前端面试中常见的技术点，对于面试准备和技能提升非常有帮助。