猎聘网前端真实面试题（含详细接地气答案）.docxVIP

猎聘网前端真实面试题（含详细接地气答案）

一、HTML/CSS基础高频题（5道）

1、标准盒模型和怪异盒模型的区别？项目中怎么选用？

参考答案：

标准盒模型是W3C默认规则，元素设置的width/height只对应内容区，元素实际占位宽高=内容宽高+padding+border+margin。

怪异盒模型是IE旧版默认规则，width/height包含了内容、padding和border，实际占位宽高只需要再加margin。

项目中统一用box-sizing:border-box（怪异盒模型逻辑），布局更可控。我们写样式时不用再手动计算padding和border撑开的宽度，适配自适应布局、弹性布局更方便，是现在所有项目的通用规范。

切换代码：

/*标准盒模型*/

box-sizing:content-box;

/*怪异盒模型（项目常用）*/

box-sizing:border-box;

2、CSS选择器优先级规则？!important你怎么用？

参考答案：

优先级从高到低：!important行内样式ID选择器类/伪类/属性选择器标签选择器通配符继承样式。

优先级是按权重叠加计算，不存在进位，多个类选择器权重也超不过ID选择器。

!important我项目中极少用，它会打乱默认优先级层级，导致后续样式覆盖困难、样式难以维护