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

HTML+CSS面试题及详细答案（实战完整版）一、HTML基础面试题1.说说HTML5的新增特性？答：HTML5主要新增了结构标签、多媒体能力、表单新特性、本地存储、语义化优化等核心功能，日常开发高频使用的有：语义化标签：header、nav、main、section、article、aside、footer，替代传统div布局，代码结构更清晰，利于SEO和可读性。多媒体标签：audio音频、video视频、canvas画布、svg矢量图形，无需插件即可实现音视频播放和图形绘制。表单新增属性/标签：input新增email、tel、number、date等类型，新增required、placeholder、autofocus、readonly等属性，提升表单校验体验。本地存储：localStorage长期存储、sessionStorage会话存储、indexedDB大容量数据库，弥补cookie存储量小、携带请求头的短板。其他特性：拖拽API、地理定位、全屏API、WebSocket通信、语义化表单验证等。2.什么是语义化标签？为什么要使用？答：语义化标签就是标签本身具备明确的语义，能直观表达页面内容的作用和结构，而非单纯用来承载样式。常用语义化标签：header（头部）、nav（导航）、main（主体）、section（区块）、article（独立文章）、aside（侧边栏）、footer（底部）。使用优势：代码结构清晰，可读性强，团队协作维护更方便；利于搜索引擎抓取页面结构，优化SEO排名；适配屏幕阅读器，提升残障用户的访问体验；浏览器能更好解析页面结构，减少布局异常问题。3.div、span、p标签的区别？答：三者都是页面常用容器，核心区别在display特性、语义、使用场景：div：块级元素，无默认语义，独占一行，宽高、内外边距均可设置，主要用于页面大区块布局、结构划分。span：行内元素，无默认语义，不独占一行，宽高无法直接设置，仅用于文本局部样式修改、小范围内容包裹。p：块级元素，自带段落语义，独占一行，有默认上下边距，专门用于包裹段落文本，内部不嵌套块级元素。4.行内元素、块级元素、行内块元素的区别？答：（1）块级元素（block）独占一行，自动换行；宽高、margin、padding上下左右均有效；可以嵌套行内、块级元素；常见：div、p、h1-h6、ul、li、section。（2）行内元素（inline）不独占一行，横向排列；宽高无效，仅左右margin、padding生效，上下无效；只能嵌套文本或行内元素，不能嵌套块级元素；常见：span、a、em、i、strong。（3）行内块元素（inline-block）结合两者优点，横向排列不换行；宽高、内外边距全部生效；常见：img、input、button，可通过display:inline-block手动转换。5.HTML中href和src的区别？答：核心区别是作用场景、加载逻辑不同：src：用于引入资源文件，如图片、脚本、视频，浏览器会直接加载、解析资源，替换当前标签内容；常见：imgsrc、scriptsrc、videosrc。href：用于建立链接关联，不会替换当前页面内容，仅建立跳转、引用关系；常见：a标签跳转、link引入css样式表。二、CSS基础核心面试题1.CSS选择器优先级？权重计算规则答：CSS优先级由选择器权重决定，权重越高，样式优先级越高，!important优先级最高。权重从高到低排序：!important（最高，慎用，会打乱层级）行内样式style=""（权重1000）ID选择器#id（权重100）类、伪类、属性选择器.class、:hover、[type]（权重10）标签、伪元素选择器div、p、::before（权重1）通配符*、继承样式（权重0）计算规则：权重累加，不进位。比如11个类选择器（110）权重低于1个ID选择器（100）。2.CSS继承性有哪些属性？哪些不继承？答：可继承属性：字体系列（font-size、font-family、font-weight）、文本系列（color、text-align、line-height、text-indent）、visibility、cursor等。子元素会默认继承父元素样式。不可继承属性：宽高、margin、padding、border、background、定位、浮动、display、z-index等。不会自动继承，需手动设置inherit。3.盒模型详解？标准盒模型和IE怪异盒模型区别答：CSS盒模型是页面布局的核心，所有块级、行内块元素都由：内容区（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。（1）标准盒模型（W3C盒模型）box-sizing:content-box（默认）元素设置的宽高仅为content尺寸，最终占位宽度=width+padding+border+margin。（2）IE怪异盒模型box-sizing:border-box元素设置的宽高包含content+padding+border，最终占位宽度=width+margin。日常开发全部使用该模式，布局更精准，不会因padding、border撑大盒子。4.什么是BFC？触发条件、作用答：BFC全称块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会干扰内部。常见触发条件：根元素html；浮动元素（float不为none）；绝对定位、固定定位元素；overflow不为visible（hidden、auto、scroll）；display为inline-block、flex、grid。BFC核心作用：解决高度塌陷：父元素无高度、子元素浮动导致父高度为0；解决外边距重叠：相邻块级元素上下margin合并问题；隔离浮动元素，避免布局错乱。5.浮动的原理、优缺点、清除浮动的方法答：浮动（float）最初用于文字环绕图片，现在多用于传统横向布局。元素设置浮动后，会脱离标准文档流，向左/向右悬浮排列。优点：快速实现多列横向布局，兼容性极好，适配低版本浏览器。缺点：元素脱离文档流，导致父元素高度塌陷；浮动元素会遮挡普通流元素，容易出现布局错乱。常用清除浮动方法：伪元素清除法（最常用）：给父元素添加clearfix类，通过::after伪元素清除浮动，无副作用。overflow:hidden：给父元素设置，简单快捷，适合简单布局，缺点是会隐藏溢出内容。空div清除：在浮动子元素末尾加空div，设置clear:both，代码冗余，不推荐。6.CSS定位方式及区别答：CSS五种定位方式，核心区别是参考基准、是否脱离文档流：static默认定位：正常文档流，无定位偏移，top/left等属性无效。relative相对定位：相对于自身默认位置偏移，不脱离文档流，原位置保留，常用于配合绝对定位做父级约束。absolute绝对定位：相对于最近的已定位父级偏移，无已定位父级则相对于body，脱离文档流，原位置不保留。fixed固定定位：相对于浏览器视口固定，滚动页面位置不变，脱离文档流，常用于顶部导航、底部弹窗。sticky粘性定位：相对定位+固定定位结合，滚动时达到阈值后固定，常用于列表吸顶。三、布局高频面试题1.常见的水平垂直居中方案答：整理4种工作最常用、面试必考的方案：（1）flex居中（最简、推荐）父元素设置：display:flex;justify-content:center;align-items:center;无需考虑子元素宽高，适配所有场景。（2）绝对定位+transform子元素：position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);自适应宽高，无兼容性问题。（3）绝对定位+margin负值（固定宽高）子元素定宽高，top/left50%，margin设为宽高一半负值，仅适合固定尺寸元素。（4）grid居中父元素：display:grid;place-items:center;代码极简，现代布局首选。2.弹性布局flex常用属性及作用答：flex是现代主流布局方案，分为父容器属性和子元素属性：父容器常用：display:flex：开启弹性布局，子元素默认横向排列；flex-direction：主轴方向（row横向、column纵向）；justify-content：主轴对齐（center居中、space-between两端对齐、space-around均分）；align-items：侧轴对齐（center居中、stretch拉伸）；flex-wrap：是否换行（wrap自动换行）。子元素常用：flex-grow：放大比例，默认0；flex-shrink：缩小比例，默认1；flex-basis：基准尺寸，优先级高于width；align-self：单独设置自身侧轴对齐方式。3.三栏自适应布局实现方式需求：左右固定宽度，中间自适应铺满方案一：Flex布局（推荐）父容器开启flex，左右盒子设置固定width，中间盒子设置flex:1自动占满剩余空间，简单无兼容问题。方案二：浮动布局左栏左浮动、右栏右浮动，中间栏设置margin左右边距（对应左右栏宽度），实现自适应，需注意清除浮动。四、CSS进阶&兼容面试题1.CSS动画transition、transform、animation区别transform：变形属性，静态效果，负责元素平移、缩放、旋转、倾斜，无动画过渡效果。transition：过渡动画，需要触发条件（hover、点击、js修改样式），仅实现状态从A到B的一次过渡。animation：关键帧动画，可自定义多段状态、循环播放、延迟、速度曲线，无需触发即可自动执行，支持复杂动画。2.如何解决1px边框在移动端变粗的问题？答：移动端设备像素比（DPR）大于1，1pxcss像素会对应多个物理像素，导致边框变粗。常用解决方案：通过transform缩放实现0.5px视觉边框给元素添加伪元素，设置1px边框，通过scale(0.5)缩放，适配所有移动端机型，是项目通用方案。3.垂直外边距重叠问题及解决办法答：标准文档流中，相邻块级元素、父子块级元素的上下margin会发生合并，取最大值，不会叠加。解决方法：触发BFC（父元素设置overflow:hidden、display:flex等）；用padding替代margin；增加边框、透明间隔层隔离元素。4.浏览器兼容问题常用解决方案IE双边距bug：浮动元素设置margin时双倍边距，解决方案：设置display:inline。图片默认间隙：img行内块特性导致底部留白，解决方案：img设置display:block。flex兼容：添加浏览器前缀-webkit-，兼容低版本安卓、IOS。默认样式统一：引入reset.css或normalize.css，清除浏览器默认边距、样式差异。五、实战面试问答（高频口述题）1.页面加载闪烁、样式错乱是什么原因？怎么解决？答：原因是CSS加载晚于HTML渲染，浏览器先渲染无样式的裸页面，再加载样式重绘页面，导致闪烁错乱。解决：CSS文件外链引入、放在head头部加载，避免行内样式延迟加载。2.重排和重绘的区别？如何优化？答：重绘：元素样式改变（颜色、背景），不改变布局尺寸，仅重新绘制页面，消耗性能较低。重排（回流）：元素宽高、位置、布局改变，浏览器需要重新计算整个页面布局，