前端面试题大全及答案.docxVIP

前端面试题大全及答案

一、HTML相关

什么是语义化标签？为什么要用？

答：语义化标签是有明确含义的HTML标签，比如header（页头）、nav（导航）、article（正文）、footer（页脚），而非全用div。

好处：一是利于SEO，搜索引擎能更清晰识别页面结构；二是提升无障碍，屏幕阅读器可通过标签判断内容类型；三是方便维护，同事看代码能快速理解结构，比如看到nav就知道这是导航区。

DOCTYPE的作用是什么？忽略会有什么问题？

答：DOCTYPE是HTML文档开头的声明，用来告诉浏览器“我用的是哪个HTML版本”，比如!DOCTYPEhtml就是HTML5的声明。

忽略的话，浏览器会进入“怪异模式（QuirksMode）”，此时浏览器会用旧的非标准规则渲染页面，比如盒模型计算方式和标准模式不一样（怪异模式下width包含padding和border），可能导致页面在不同浏览器显示混乱。

meta标签中viewport的作用？常用配置是什么？

答：viewport是用来控制移动端页面显示的，解决手机端页面“缩放变形”的问题。

常用配置：metaname=viewportcontent=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no

其中：device-width让页面宽度等于设备屏幕宽度；initial-scale=1.0是初始缩放比例1:1；maximum-scale和user-scalable限制用户缩放（实际开发中可根据需求调整，比如阅读类APP可能允许缩放）。

二、CSS相关

什么是BFC？怎么触发？有什么用？

答：BFC是“块级格式化上下文”，可以理解成一个“独立的容器”，容器里的元素布局不会影响外面的元素，外面的也不会影响里面的。

触发方式：常用的有4种——①给元素设overflow:hidden（除了visible）；②浮动元素（float不是none）；③绝对定位/固定定位（position:absolute/fixed）；④行内块元素（display:inline-block）。

实际用途：①清除浮动（父元素触发BFC后，能包裹住浮动的子元素，避免父元素高度塌陷）；②防止margin重叠（两个相邻的块级元素都触发BFC，它们的垂直margin就不会叠在一起）；③隔离元素（比如侧边栏浮动后，主内容区触发BFC，避免被侧边栏覆盖）。

标准盒模型和IE盒模型的区别？怎么切换？

答：核心区别在“width/height的计算范围”：

标准盒模型：width=内容区宽度（content），height=内容区高度，padding和border会额外增加元素的实际大小（比如一个div设width:100px，padding:10px，实际占宽是120px）。

IE盒模型：width=content+padding+border，height同理，padding和border不会让元素实际大小变大（上面的例子，IE盒模型下实际占宽还是100px）。

切换方式：用box-sizing属性——box-sizing:content-box是标准盒模型（默认），box-sizing:border-box是IE盒模型（开发中常用这个，方便计算元素大小）。

Flex布局中，flex:1代表什么意思？

答：flex:1是简写，展开是flex:110%，三个值分别对应flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始宽度）。

意思是：①当容器有多余空间时，该元素会按1的比例瓜分多余空间（比如两个元素都设flex:1，就各占一半）；②当容器空间不够时，该元素会按1的比例缩小（避免溢出）；③元素的初始宽度是0%（不是固定值，会根据内容和空间调整）。

实际开发中常用flex:1让元素“占满剩余空间”，比如导航栏的中间内容区。

CSS选择器的优先级怎么算？!important有什么用？

答：优先级从高到低分4级，用“权重”表示（数字越大优先级越高）：

内联样式（style属性）：权重1000；

ID选择器（#box）：权重100；

类/伪类/属性选择器（.red/:hover/[type=text]）：权重10；

元素/伪元素选择器（div/:before）：权重1。

计算规则：把选择器的各级权重加起来，总和大的优先；如果总和一样，写