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

HTML+CSS高频面试题及详细答案（实战版）一、HTML核心面试题1.简述HTML5新增的语义化标签，以及语义化的意义参考答案：常用HTML5语义化标签：header、nav、main、section、article、aside、footer、figure、figcaption。语义化核心意义：1.结构清晰：代码标签顾名思义，可读性极强，多人协作时能快速看懂页面模块结构，不用靠注释区分区域。2.利于SEO：搜索引擎爬虫可以精准识别页面头部、导航、主体内容、侧边栏、底部等核心区域，提升页面收录和搜索权重。3.适配设备兼容：屏幕阅读器、无障碍设备可精准识别页面结构，适配残障人士浏览需求，满足项目无障碍规范。4.减少冗余代码：替代了大量无意义的div嵌套，精简代码结构，降低维护成本。2.行内元素、块级元素、行内块元素的区别？各自常见标签有哪些？参考答案：（1）块级元素独占一行，默认宽度100%父级宽度，支持宽、高、内外边距、margin，可嵌套块级和行内元素。常见：div、p、h1-h6、ul、li、ol、section、header。（2）行内元素同行排列，不独占一行，宽度由内容撑开，不支持宽高、上下margin，仅支持左右margin和全部padding，只能嵌套行内元素。常见：span、a、em、i、strong、u。（3）行内块元素兼具两者特性：同行排列，同时支持宽高、内外边距、margin，宽度默认由内容撑开。常见：img、input、button、textarea。3.a标签的target属性有哪些值？作用分别是什么？参考答案：1._self：默认值，在当前窗口/当前标签页打开链接。2._blank：在新的空白标签页打开链接，日常开发最常用。3._parent：在父级框架窗口打开链接，多用于iframe嵌套页面场景。4._top：在顶级窗口打开链接，会清除所有嵌套框架，返回最顶层页面。4.img标签的alt和title属性区别？参考答案：1.alt：图片加载失败时的替代文本，核心作用是容错展示+SEO+无障碍适配，属于必填属性，爬虫可识别，屏幕阅读器会读取该文本。2.title：鼠标悬浮在图片上时展示的提示文字，仅做交互提示，对SEO无帮助，非必填属性。5.说说HTML文档的渲染解析过程参考答案：1.浏览器请求获取HTML代码，逐行解析HTML文本，生成DOM树（文档对象模型）。2.解析页面中的CSS样式，生成CSSOM树（CSS对象模型）。3.将DOM树和CSSOM树结合，生成渲染树，只包含需要显示的节点和对应样式。4.布局（回流）：计算渲染树中每个节点的具体位置、宽高、坐标。5.绘制（重绘）：根据布局结果，将页面像素绘制到屏幕上，完成页面展示。二、CSS基础高频面试题1.CSS选择器优先级规则？权重如何计算？参考答案：优先级从高到低：!important>行内样式>ID选择器>类/伪类/属性选择器>标签选择器>通配符>继承样式权重计算规则（不进位）：1.行内样式：10002.ID选择器：01003.类、伪类、属性选择器：00104.标签、伪元素选择器：00015.通配符、继承：0000实战要点：权重多组叠加只比较对应位数，不会进位，比如11个类选择器（0110）权重小于1个ID选择器（0100错误，纠正：ID权重0100，10个类是0100，相等时后写的样式生效）；!important直接覆盖所有样式，开发中尽量少用，难以维护。2.什么是文档流？如何脱离标准文档流？参考答案：标准文档流是浏览器默认的页面布局规则：块级元素自上而下纵向排列，行内/行内块元素自左向右横向排列，是页面默认的布局状态。脱离文档流的三种方式：1.浮动float：元素漂浮在文档流之上，原有位置留白，后续元素会向上填充，需要手动清除浮动。2.绝对定位position:absolute：完全脱离文档流，不占用原有页面空间。3.固定定位position:fixed：完全脱离文档流，相对于浏览器窗口定位，滚动页面位置不变。3.position定位的5个值及区别参考答案：1.static（默认）：标准文档流定位，无特殊定位，top/left/right/bottom/z-index全部失效。2.relative（相对定位）：不脱离文档流，保留原有位置，相对于自身默认位置偏移，可提升层级。3.absolute（绝对定位）：脱离文档流，相对于最近的已定位非static父元素定位，无已定位父级则相对于根元素html。4.fixed（固定定位）：脱离文档流，相对于浏览器视口定位，页面滚动时元素位置固定，常用于导航、返回顶部按钮。5.sticky（粘性定位）：混合相对和固定定位，默认跟随文档流滚动，到达设定阈值后固定定位，常用于列表吸顶。4.浮动的副作用？常用的清除浮动方法参考答案：浮动副作用：1.父级元素高度塌陷（子元素浮动脱离文档流，父级无内容支撑高度为0）；2.后续普通文档流元素向上错位、页面布局错乱；3.浮动元素会产生文字环绕效果。常用清除浮动方法（实战常用）：1.伪类清除（最优、最常用）：给父元素添加clearfix类，通过::after伪元素设置clear:both，不新增冗余标签，兼容性好。2.额外空标签：浮动元素末尾添加空div，设置clear:both，简单但会增加冗余DOM节点，不推荐大规模使用。3.父级设置overflow:hidden/auto：触发BFC清除浮动，代码简洁，但会隐藏溢出内容，有布局溢出需求时不能用。5.什么是BFC？BFC的触发条件和作用参考答案：BFC即块级格式化上下文，是浏览器的一块独立渲染区域，区域内部元素的布局不会影响外部元素，外部也不会干扰内部。触发BFC的常见条件：1.根元素html；2.元素设置overflow不为visible（hidden/auto/scroll）；3.浮动元素（float不为none）；4.绝对定位、固定定位元素；5.display为inline-block、flex、grid、table-cell。BFC核心作用：1.解决父级高度塌陷问题；2.解决上下margin重叠塌陷问题；3.阻止浮动元素文字环绕，实现自适应两栏、三栏布局。三、CSS布局高频面试题1.说说Flex布局的常用属性及实战用法参考答案：Flex是弹性布局，一维布局方案，适配移动端和常规自适应布局，设置display:flex后子元素自动脱离常规文档流，成为弹性项。父容器常用属性：1.flex-direction：主轴方向（row横向、column纵向）；2.justify-content：主轴对齐（center居中、space-between两端对齐、space-around均分）；3.align-items：侧轴单行对齐（center居中、stretch拉伸、top/bottom对齐）；4.flex-wrap：是否自动换行（nowrap不换行、wrap自动换行）；5.align-content：多行侧轴对齐。子元素常用属性：1.flex-grow：放大比例，默认0（不放大）；2.flex-shrink：缩小比例，默认1（自动缩小）；3.flex-basis：元素基础宽度；4.flex：简写属性，常用flex:1（自适应平分剩余空间）；5.align-self：单独设置自身侧轴对齐方式。2.水平垂直居中的多种实现方式（必考）参考答案：方式1：Flex布局（最简、企业最常用）父元素设置：display:flex;justify-content:center;align-items:center;无需设置子元素宽高，适配所有场景。方式2：绝对定位+transform（不定宽高通用）父元素相对定位，子元素绝对定位；top:50%;left:50%;transform:translate(-50%,-50%);优势：不依赖子元素宽高，兼容性良好。方式3：绝对定位+宽高固定计算（固定宽高使用）子元素固定宽高，设置top/left/right/bottom全部为0，margin:auto;实现居中。方式4：Grid布局父元素设置display:grid;place-items:center;一行代码实现横竖居中。3.简述自适应两栏、三栏布局实现方案参考答案：（1）两栏自适应（左固定、右自适应）1.Flex方案：左栏固定宽度，右栏设置flex:1，自动占满剩余空间；2.浮动+BFC：左栏浮动固定宽，右栏触发BFC，自适应剩余宽度。（2）三栏自适应（左右固定、中间自适应）1.Flex方案：父容器flex布局，左右栏固定宽，中间flex:1，最简单稳定；2.传统圣杯布局、双飞翼布局：通过浮动、负margin实现，兼容低版本浏览器，现在项目基本用Flex替代。四、CSS进阶面试题（面试加分项）1.回流和重绘的区别？如何优化页面性能？参考答案：重绘：元素样式改变（颜色、背景、透明度），但不改变宽高、位置、布局，浏览器仅重新绘制像素，开销较小。回流（重布局）：元素宽高、位置、字体大小、隐藏显示等布局属性改变，导致页面整体布局重新计算，会触发重绘，开销极大。回流必触发重绘，重绘不一定触发回流。性能优化方案：1.批量修改样式，避免逐行修改DOM样式，可提前写好class统一切换；2.频繁动画元素开启硬件加速（transform、opacity实现动画，不触发回流）；3.避免频繁获取DOM布局属性（offsetWidth、clientHeight），减少浏览器强制刷新队列；4.脱离文档流的元素做动画，不影响整体页面布局。2.CSS3新增特性有哪些？常用的有什么参考答案：1.选择器：属性选择器、伪类（nth-child、nth-of-type）、伪元素（::before、::after）；2.样式属性：圆角border-radius、阴影box-shadow、文字阴影text-shadow、透明度opacity、渐变gradient；3.变换：transform（平移、缩放、旋转、倾斜）；4.过渡动画：transition过渡、animation关键帧动画；5.布局：Flex、Grid弹性网格布局；6.其他：媒体查询@media、box-sizing盒模型。3.box-sizing的两个值区别（content-box、border-box）参考答案：1.content-box（默认）：标准盒模型，元素设置的width/height仅为内容区尺寸，padding、border会向外撑开元素总尺寸，布局容易错位，开发极少用。2.border-box（怪异盒模型）：元素设置的width/height是包含内容、padding、border的总尺寸，padding和border不会撑大盒子，布局更稳定，项目中全局统一设置该属性。4.z-index失效的原因是什么？参考答案：1.元素未开启定位，z-index只对非static定位元素生效；2.存在层级上下文（堆叠上下文），父元素层级低于对方父级，子元素z-index再高也无法覆盖；3.元素处于不同堆叠上下文，层级比较无效；4.元素被父级overflow裁剪、或者存在transform属性干扰堆叠层级。五、综合手写面试题（实操必问）1.手写清除浮动clearfix类样式参考答案：css

.clearfix::after{

content:'';

display:block;

height:0;

clear:both;

visibility:hidden;

}

.clearfix{

zoom:1;/*兼容低版本IE*/

}2.手写单行、多行文本溢出省略参考答案：单行文本溢出省略css

.text-ellipsis{

white-space:now