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

HTML+CSS高频面试题及详细答案（实战版）说明：本题库整理前端真实面试高频考点，答案贴合工程实战，摒弃书面化套话，适合面试刷题、复盘巩固，覆盖基础、核心布局、兼容性、进阶特性等必考内容。一、HTML基础面试题1.说说HTML5新增的语义化标签，以及使用意义参考答案：常用语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。使用意义主要有三点：1.结构清晰：代码可读性更高，通过标签就能区分页面头部、导航、主体、侧边栏、底部等区域，方便团队协作维护；2.利于SEO：搜索引擎爬虫可以精准识别页面模块结构，判断内容权重，提升网页收录和排名；3.适配设备与无障碍：屏幕阅读器可以精准解析页面结构，方便视障用户浏览，同时适配移动端、多终端页面解析。对比传统div布局，语义化标签没有样式差异，核心价值是定义结构、规范层级。2.行内元素、块级元素、行内块元素的区别？各自常见标签有哪些？参考答案：块级元素特点：独占一行，宽度默认100%父级宽度，支持宽高、内外边距、margin上下左右均生效；常见标签：div、p、h1-h6、ul、li、ol、section、header、footer。行内元素特点：同行排列，不独占一行，宽高由内容撑开，不支持设置宽高，上下margin无效，上下padding不撑开布局，左右内外边距生效；常见标签：span、a、em、i、strong、u。行内块元素特点：兼具两者特性，同行排列，同时支持设置宽高、全部内外边距；常见标签：img、input、button、textarea、select。3.img标签alt和title属性的区别参考答案：alt：图片加载失败时的替代文本，核心作用是无障碍适配和SEO，是img标签必填属性，不会鼠标悬浮显示；title：鼠标悬浮在图片上时悬浮提示文本，仅做交互提示，和图片加载状态无关，不影响SEO和无障碍访问。4.什么是HTML懒加载？原理是什么？参考答案：图片、视频懒加载是指：页面初始加载时，只加载可视区域内的资源，滚动到对应位置后，再加载可视区域外的资源。HTML5原生懒加载只需设置loading="lazy"，无需JS：原理：浏览器监听页面滚动事件，自动判断元素是否进入视口，进入后发起资源请求，有效减少首屏请求数量，提升页面首屏加载速度，节省带宽。二、CSS基础核心面试题1.CSS选择器优先级排序，以及权重计算规则参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式权重计算规则（不进位）：1.行内样式：10002.ID选择器：01003.类、伪类、属性选择器：00104.标签、伪元素选择器：00015.通配符、继承：0000核心要点：权重不会进位，10个类选择器权重也比不上1个ID选择器；!important直接置顶，慎用。2.CSS盒模型有几种？区别是什么？参考答案：分为标准盒模型（content-box）和怪异盒模型（border-box），由box-sizing属性控制。标准盒模型（默认）元素实际宽度=width+padding+border+margin；width仅代表内容区宽度。怪异盒模型（常用）元素实际宽度=width+margin；width包含内容区、padding、border。开发中统一设置*{box-sizing:border-box;}，方便布局计算，避免padding、border撑破盒子。3.讲讲CSS浮动，浮动的作用、问题、清除浮动方法参考答案：浮动作用：早期用于实现横向布局，让块级元素脱离标准文档流，同行排列。浮动带来的问题：父级元素高度塌陷、浮动元素后续标准流元素位置错乱、页面布局塌陷。常用清除浮动方法（实战常用）1.伪类清除（推荐）：给父元素添加clearfix类，兼容性好、无冗余标签PlainText

.clearfix::after{

content:'';

display:block;

clear:both;

visibility:hidden;

height:0;

}2.父级设置overflow:hidden；简单快捷，适合无溢出显示需求的场景；3.新增空标签设置clear:both；代码冗余，基本不使用。4.display:none和visibility:hidden的区别参考答案：1.空间占用：display:none彻底隐藏，不占用页面空间；visibility:hidden隐藏内容，保留元素占位空间；2.渲染回流：display:none会触发页面重排回流；visibility:hidden仅重绘，无回流，性能更好；3.继承性：display:none子元素一起隐藏；visibility:hidden子元素可单独设置visibility:visible显示。三、CSS布局高频面试题1.弹性布局Flex常用属性及核心特点参考答案：Flex是一维布局模型，适合单行、单列布局，兼容性良好，是移动端主流布局方案。父容器属性display:flex：开启弹性布局；flex-direction：主轴方向（row横向/column纵向）；justify-content：主轴对齐方式（居中、两端对齐、均分等）；align-items：侧轴单行对齐方式；flex-wrap：是否自动换行。子元素属性flex-grow：放大比例，默认0；flex-shrink：缩小比例，默认1；flex-basis：元素基础尺寸；flex：1简写，代表均分剩余空间；align-self：单独设置自身侧轴对齐方式。2.Grid布局和Flex布局的区别，分别适用场景参考答案：1.维度不同：Flex是一维布局，只能控制单行或单列；Grid是二维布局，同时控制行和列；2.控制粒度不同：Flex侧重子元素自适应拉伸、对齐；Grid侧重整体网格划分，精准控制行列尺寸、间距、位置；3.适用场景：Flex：导航栏、按钮组、单行列表、居中对齐、自适应均分布局；Grid：卡片九宫格、商品列表、复杂页面整体栅格布局、不规则二维排版。3.常用的水平垂直居中方案（至少3种）参考答案：方案1：Flex居中（最常用）父容器设置：display:flex;justify-content:center;align-items:center;简单高效，适配所有场景。方案2：定位+transform（未知宽高通用）PlainText

父级：position:relative;

子级：position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);方案3：定位+marginauto（已知宽高）PlainText

父级：position:relative;

子级：position:absolute;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;四、CSS进阶与渲染原理面试题1.什么是重排（回流）和重绘？如何优化性能？参考答案：重绘：元素样式发生改变，但不改变布局尺寸，浏览器仅重新绘制像素，比如修改颜色、透明度、背景色，开销较小。重排（回流）：元素布局、尺寸、位置发生改变，浏览器需要重新计算页面所有元素布局，开销极大，比如修改宽高、边距、定位、显示隐藏。优化方案1.集中修改样式，避免逐行频繁修改DOM样式；2.使用类名统一切换样式，代替单独修改style属性；3.频繁动画元素开启硬件加速（transform、opacity），这两个属性只会触发重绘，不会触发重排；4.避免频繁获取页面布局属性（offsetWidth、scrollTop等），减少浏览器强制刷新队列。2.CSS继承属性和非继承属性有哪些？参考答案：可继承属性：字体系列（font-size、font-family）、文本系列（color、text-align、line-height、text-indent）、visibility、cursor等；不可继承属性：宽高、边距、边框、背景、定位、浮动、display、z-index等布局属性，默认不会继承父级样式。3.position定位属性区别（static/relative/absolute/fixed/sticky）参考答案：1.static默认定位：标准文档流，无定位效果，top/left等属性无效；2.relative相对定位：相对于自身原始位置偏移，保留占位空间，不脱离文档流；3.absolute绝对定位：相对于最近的非static父级定位，脱离文档流，不保留占位；4.fixed固定定位：相对于浏览器视口定位，脱离文档流，页面滚动位置不变，常用于顶部导航、悬浮按钮；5.sticky粘性定位：相对定位+固定定位结合，滚动前相对定位，滚动到阈值后固定定位，常用于列表吸顶。五、兼容性与实战坑点面试题1.常见的移动端CSS兼容问题及解决方案参考答案：1.移动端点击300ms延迟：旧机型双击缩放导致，解决方案：设置viewport禁止缩放、使用fastclick插件；2.图片模糊：高清屏适配，使用2倍图、3倍图，配合background-size适配；3.ios滚动卡顿：给滚动容器添加-webkit-overflow-scrolling:touch；4.输入框默认样式不一致：统一重置input、button默认样式，去除原生边框、阴影。2.为什么要重置CSS样式？常用重置方案参考答案：不同浏览器对默认标签样式的解析不一致，存在默认边距、字体、行高、列表样式差异，不重置会导致页面多浏览器显示错乱。常用方案：1.简易重置：清除默认内外边距、列表默认样式、统一盒模型；2.工程化重置：使用nor