H5+CSS 高频面试题及详细答案（实战版）

H5+CSS高频面试题及详细答案（实战版）一、HTML5面试题1、说说HTML5新增的语义化标签有哪些？语义化的好处是什么？参考答案：常用语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。语义化核心好处：代码结构清晰：标签顾名思义，可读性强，团队协作维护更方便，不用靠注释区分模块。利于SEO：搜索引擎爬虫可以精准识别页面模块结构，区分导航、正文、侧边栏、页脚，提升页面收录和权重。适配无障碍访问：屏幕阅读器可以精准识别页面区域，方便视障用户浏览页面。标准化规范：替代了过去全靠div堆砌的混乱写法，页面结构更统一规范。2、HTML5新增的表单特性有哪些？常用新表单类型和校验属性参考答案：一、新增表单输入类型：email、tel、url、number、date、time、month、search、range、color。二、新增表单校验属性：required：必填校验placeholder：输入框提示文字max/min/step：数值、日期范围限制pattern：正则表达式自定义校验规则autofocus：页面加载自动聚焦autocomplete：开启/关闭输入联想三、新增表单特性：表单可以脱离form标签嵌套，通过form属性关联表单域；新增submit、reset等原生表单校验触发机制。3、H5离线缓存（ApplicationCache）了解吗？优缺点？现在主流替代方案是什么？参考答案：ApplicationCache是HTML5原生离线缓存技术，通过manifest清单文件配置需要缓存的静态资源，页面首次加载后，后续离线状态可直接读取缓存资源。缺点非常明显，现在基本废弃：缓存机制死板，必须修改manifest文件才会更新缓存，资源更新不灵活存在缓存穿透、缓存失效异常问题，兼容性bug多无法精细化控制缓存粒度，全局缓存难以适配复杂项目目前主流替代方案：ServiceWorker，可以精细化控制缓存策略、实现离线访问、资源预加载、后台更新，是现代PWA项目的核心技术。4、localStorage、sessionStorage、cookie的区别？参考答案：三者都是前端本地存储，核心差异在存储大小、生命周期、作用域、请求携带、兼容性：cookie：容量4KB左右，默认会话级（关闭页面失效），可手动设置过期时间；每次HTTP请求都会自动携带，存在性能损耗；可设置跨域、httponly、secure属性，多用于存储登录态、token。localStorage：H5新增，容量5MB左右；永久存储，手动删除或清空缓存才会失效；同域名共享，跨页面有效；不会随请求自动提交，适合存储长期本地数据、用户配置。sessionStorage：H5新增，容量5MB左右；仅当前会话有效，关闭当前标签页立即清空；不同标签页不共享数据；适合存储临时页面状态、表单临时数据。5、HTML5拖拽API常用事件有哪些？参考答案：分为拖拽元素事件和目标元素事件：拖拽元素（被拖动的元素）：dragstart（开始拖拽）、drag（拖拽过程持续触发）、dragend（拖拽结束）目标元素（放置区域）：dragenter（进入区域）、dragover（悬浮在区域内，必须阻止默认事件才能触发drop）、dragleave（离开区域）、drop（释放放下）二、CSS核心基础面试题1、CSS选择器优先级规则？权重如何计算？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式权重计算规则（不进位）：行内样式：1000ID选择器：0100类、伪类、属性选择器：0010标签、伪元素选择器：0001通配符、继承：0000同级权重下，后写的样式覆盖先写的；!important直接无视所有权重，优先级最高，项目中尽量少用，避免样式难以维护。2、盒模型有几种？标准盒模型和IE怪异盒模型的区别？如何切换？参考答案：分为标准W3C盒模型和IE怪异盒模型。核心区别：宽高计算范围不同标准盒模型（content-box）：width/height仅代表内容区大小，元素实际宽度=width+padding+border+margin怪异盒模型（border-box）：width/height包含内容区+内边距+边框，元素实际宽度=width+margin，不会因为padding、border撑大盒子切换方式：通过box-sizing属性切换，项目开发中统一设置*{box-sizing:border-box;}避免布局错乱。3、BFC是什么？触发条件和实际应用场景参考答案：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，内部元素的布局不会影响外部元素，外部也不会干扰内部。常用触发条件：根元素htmlfloat不为noneoverflow不为visible（hidden、auto、scroll）display为inline-block、flex、grid、table-cellposition为absolute、fixed实际业务应用：解决浮动元素父级高度塌陷问题解决上下元素margin重叠（外边距合并）问题实现自适应两栏、三栏布局，防止元素被浮动覆盖4、清除浮动的方式有哪些？各自优缺点？参考答案：浮动会导致父元素高度塌陷，常用4种清除浮动方式：父级加overflow:hidden：写法最简单，代码少；缺点是会裁剪溢出内容，部分弹窗、tooltip场景不适用结尾加空div，设置clear:both：兼容性极好；缺点是增加冗余DOM节点，代码不优雅伪元素清除浮动（主流方案）：给父类添加clearfix类，通过::after伪元素清除浮动，无冗余标签、兼容性好、不裁剪内容，企业项目通用方案父级开启BFC（flex/grid）：现代布局方案，彻底规避浮动问题；缺点是会改变父元素布局方式5、CSS浮动的原理和优缺点？现在为什么逐渐少用浮动布局？参考答案：浮动原理：让元素脱离普通文档流，向左/向右停靠，原本用于实现文字环绕图片，早期用于页面多栏布局。优点：兼容性极佳，适配老旧浏览器；缺点：脱离文档流导致父级高度塌陷、margin重叠、元素层级混乱，需要额外写代码清除浮动，布局维护成本高。目前替代方案：Flex、Grid弹性布局，布局更简单、自适应更强、无需处理塌陷问题，是现代布局主流。三、Flex/Grid布局高频题1、Flex常用属性有哪些？分别作用于父容器和子项参考答案：父容器属性（控制整体布局）：display:flex：开启弹性布局flex-direction：主轴方向（row/column）justify-content：主轴对齐方式（居中、两端对齐、均分）align-items：交叉轴单行对齐flex-wrap：是否自动换行align-content：多行对齐方式子项属性（控制单个元素）：flex-grow：放大比例，默认0（不放大）flex-shrink：缩小比例，默认1（自动缩小）flex-basis：元素基础尺寸，优先级高于widthflex：简写属性（growshrinkbasis）align-self：单独设置自身交叉轴对齐方式order：控制排列顺序，数值越小越靠前2、flex:1代表什么？参考答案：flex:1是简写，等价于flex:110%。flex-grow:1：剩余空间自动均分放大flex-shrink:1：空间不足时自动缩小flex-basis:0%：初始尺寸为0，完全根据剩余空间分配大小常用于多个元素均分容器宽度、自适应填充剩余空间场景。3、Grid布局和Flex布局的区别？适用场景？参考答案：Flex是一维布局：只能控制单行或单列，适合线性布局、导航栏、列表、居中对齐、均分布局Grid是二维布局：同时控制行和列，适合复杂网格布局、卡片列表、整体页面排版、不规则多列布局业务选型：简单线性排布用Flex，复杂横竖网格排布用Grid。四、CSS3进阶面试题1、CSS3动画transition、transform、animation的区别参考答案：transform：变形属性，纯静态样式，负责元素旋转、缩放、位移、倾斜，无动画效果transition：过渡动画，需要触发条件（hover、点击、数据变化），只能实现简单的状态过渡，无关键帧animation：关键帧动画，可自定义多段动画过程，支持循环、暂停、延时、匀速/变速，无需触发即可自动执行，适合复杂动画效果2、CSS层级堆叠规则？z-index失效的原因有哪些？参考答案：层级堆叠优先级：定位元素>普通文档流元素；同级元素后写的覆盖先写的；z-index仅对已定位元素（relative/absolute/fixed/sticky）生效。z-index常见失效原因：元素未设置定位，默认static，z-index无效父级元素存在层级堆叠上下文限制，子元素z-index无法突破父级层级同级元素堆叠上下文不同，z-index对比无效堆叠上下文触发：定位+z-index不为auto、flex子项、opacity小于1、transform、filter等属性都会创建堆叠上下文。3、居中对齐的所有实现方式（水平+垂直）参考答案：1、常规居中（块级）：margin:0auto实现水平居中，仅适配固定宽度块级元素2、绝对定位居中：父相对定位，子绝对定位，top/left=50%，transform:translate(-50%,-50%)；适配未知宽高元素，兼容性好3、Flex居中（最常用）：父容器设置display:flex+justify-content:center+align-items:center，一行代码实现万能居中，适配所有场景4、Grid居中：父容器display:grid+place-items:center，极简写法5、行内元素居中：父级text-align:center（水平）+line-height等于父高（垂直）五、布局实战与兼容面试题1、经典三栏自适应布局怎么实现？（左右固定、中间自适应）参考答案：三种主流实现方式：1、浮动布局：左右模块分别左右浮动、固定宽度，中间模块设置margin左右留白，适配老旧项目2、Flex布局（推荐）：父容器开启flex，左右设置固定width，中间设置flex:1，自动填充剩余空间，代码简洁、无塌陷问题3、Grid布局：grid-template-columns:200pxauto200px，一行代码完成三栏布局2、移动端适配方案有哪些？各自优缺点参考答案：百分比布局：简单易用，缺点是宽高、字体无法精准适配，适配效果差rem布局：根据屏幕宽度动态设置html根字体大小，所有尺寸用rem单位，适配大部分移动端场景，是传统移动端主流方案vw/vh布局（现代主流）：1vw等于屏幕宽度1%，无需JS动态计算，纯CSS适配，适配更精准、代码更简洁flex+grid自适应：结合弹性布局实现自适应，搭配媒体查询适配不同屏幕3、常见CSS兼容问题及解决方案参考答案：flex兼容旧浏览器：添加-webkit-前缀，避免低版本安卓、ios布局错乱图片3px缝隙：图片设置vertical-align:top/middlemargin塌陷：触发BFC、改用padding、使用flex布局移动端点击300ms延迟：设置metaviewport禁止缩放，或使用fastclick透明边框、阴影兼容：统一前缀写法，避免低版本浏览器失效六、性能优化面试题1、CSS性能优化的方式有哪些？参考答案：选择器优化：避免层级过深、避免通配符、少用属性选择器，减少浏览器匹配开销减少重排重绘：频繁修改样式统一操作，优先使用transform、opacity做动画（仅触发合成层，不触发重排）精简CSS代码：去除冗余样式、合并重复样式，使用预处理器统一规范合理使用继承：可继承样式统一设置