【牛牛前端面试每天练】一，HTML与CSS专项(1)

🍓🍓暑假还有一大半时间，这不拿来刷面试题可惜了。针对性的面试题不仅可以让我们深入理解知识，而且它还是拿offer的必经之路，早点啃下后面面试前复习就很快啦。

文章目录

• • • 一，说一下BFC

    • • 1.1 解题思路

      • 1.2 作答

    • 二，说一下样式优先级的规则

    • • 2.1 解题思路

      • 2.2 作答

    • 三，说一下浮动

    • • 3.1 解题思路

      • 3.2 作答

    • 四，说一说HTML语义化

    • 五，说一说盒模型

    • • 5.1 解题思路

      • 5.2 作答

一，说一下BFC

1.1 解题思路

• 概念特点

• 形成条件

• 用途

• 加分项：清除浮动详论、IFC和GFC

1.2 作答

BFC全称为块级格式化上下文，在web页面作为一个独立的渲染区域，内部元素的渲染不会影响到边界以外的元素。计算BFC高度时，浮动元素也会参与计算。属于在同一个BFC中的两个垂直相邻的盒子margin会发生塌陷重叠。

形成条件有：

1. 设置float为leftorright。

2. 固定定位或绝对定位

3. overflow值非visible，而是auto，scroll，hidden

4. 元素显示模式为flex或者inline-block等

用途：清除浮动

BFC的方式都可以清除浮动，不过常使用的清除浮动的BFC方法只有overflow:hidden，原因是当我们使用float或者position方式清除时，虽然父级本身浮动清除，但父级脱离文档流，对后面父级的兄弟盒子的布局会造成影响。而设置父级为display: flex，父级内部的浮动又会失效，因此通常只用overflow:hidden清除浮动。

IFC:内联格式上下文，高度由其包含行内元素中最高的实际高度计算

GFC:网络布局格式化上下文，当一个元素设置display为grid时，该元素也会得到一个独立的渲染区域

FFC自适应格式上下文，对应的就是flex布局，形成自适应容器。

---

二，说一下样式优先级的规则

2.1 解题思路

• 按优先级顺序回答

• 加分项：!important

2.2 作答

样式优先级为!important、行内样式、嵌入样式、外联样式、id选择器、类选择器、标签选择器、符合选择器、通配符选择器、继承样式。

使用!important时需谨慎，优先考虑使用样式规则的优先级来解决问题，而不是!important，只有在需要覆盖全站或外部CSS的特定页面中使用!important

---

三，说一下浮动

3.1 解题思路

• 特点

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

og.csdnimg.cn/img_convert/04273c2f50e58b6822663c5b2f379206.png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】