Web前端面试题及答案.docx

Web前端面试题及答案

一、HTML基础

问：什么是HTML语义化标签？实际开发中用它有什么好处？

答：语义化标签就是有明确含义的标签，比如header（页头）、main（主体）、article（文章内容）、footer（页脚）这些，不是像div这种无意义的容器。

好处主要有三个：一是利于SEO，搜索引擎能通过语义标签更快识别页面结构，比如article里的内容会被判定为核心内容；二是方便无障碍阅读，屏幕阅读器会根据语义标签给用户清晰的结构提示；三是代码可读性更高，同事看代码时不用猜divclass=header到底是什么，直接看header就懂。

比如做博客页面，用header包标题导航，article包单篇博文，aside包侧边栏推荐，比全用div清爽多了。

问：移动端开发中，metaname=viewport标签的作用是什么？常用配置怎么写？

答：这个标签是用来控制移动端页面的缩放比例，避免页面显示错乱的。比如不设置的话，手机会把页面当成PC页面缩小显示，文字特别小。

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

解释下每个参数：width=device-width让页面宽度等于设备屏幕宽度；initial-scale=1.0初始缩放比例1:1；maximum-scale=1.0和user-scalable=no是禁止用户缩放（有些场景比如表单、地图需要允许缩放，就去掉这两个）。

二、CSS相关

问：浮动（float）会带来什么问题？怎么清除浮动？

答：浮动会让元素脱离文档流，导致父元素“高度塌陷”——比如父盒子里的子元素都浮动了，父盒子就会变成一条线，后面的元素还会被浮动元素覆盖。

清除浮动常用三种方法：

（1）额外标签法：在浮动元素最后加一个空标签divstyle=clear:both;/div，但会多一个没用的标签，不太推荐；

（2）父元素加overflow:hidden：给父盒子加overflow:hidden或auto，能触发BFC（块级格式化上下文），让父元素包裹住浮动子元素，但要注意如果子元素有下拉菜单，可能会被隐藏；

（3）伪元素法（最常用）：给父元素加个类，比如.clearfix，然后写样式：

.clearfix::after{

content:;

display:block;

clear:both;

visibility:hidden;

height:0;

}

.clearfix{

*zoom:1;/*兼容IE6/7*/

}

这种方法不增加额外标签，兼容性也好。

问：Flex布局中，justify-content和align-items的区别是什么？举个居中的例子。

答：这两个都是控制元素对齐的，但方向不一样——justify-content管“主轴”（默认是水平方向，从左到右），align-items管“交叉轴”（默认是垂直方向，从上到下）。

比如要让一个盒子里的子元素水平垂直都居中，就可以这样写：

.parent{

display:flex;

justify-content:center;/*主轴（水平）居中*/

align-items:center;/*交叉轴（垂直）居中*/

height:300px;/*父元素必须有高度，否则垂直居中看不出效果*/

}

.child{

width:100px;

height:100px;

background:red;

}

如果把主轴方向改了，比如flex-direction:column，那justify-content就变成垂直方向居中，align-items变成水平方向居中了。

问：CSS选择器的优先级怎么算？如果样式冲突了怎么解决？

答：优先级从高到低是：!important内联样式（style属性）ID选择器（#xxx）类/伪类/属性选择器（.xxx/:hover/[type]）元素/伪元素选择器（div/:before）。

计算的时候可以简单记“权重”：内联1000，ID100，类10，元素1，加起来谁大听谁的。比如#box.text权重是100+10=110，.boxp是10+1=11，所以前者生效。

注意两点：一是！important会覆盖所有样式，但尽量少用，用多了不好维护，而且如果两个样式都加了！important，还是看权重；二是继承的样式优先级最低，比如父元