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

🍓🍓观众老爷们好，这里是牛牛的新专栏【牛牛前端面试天天练】，主要会记录刷题过程中遇到的题，以及解题思路，每章一个方向，感兴趣可以订阅支持。

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

一，说一下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 解题思路

• 特点
• 用途
• 清除浮动
• 加分项：三种浮动的特点影响

3.2 作答

设置浮动后，该元素脱标，表现为不占位置，如果父级盒子本来是由该元素撑起高度，设置浮动后，会导致父级塌陷，影响后面盒子布局。

浮动作用有实现文字环绕图片，设置浮动的块级元素可以排列在同一行，设置浮动的行内元素可以设置宽高，同时可以按照浮动设置的方向对齐排列盒子。

清除浮动：

1. 使用伪元素清除浮动
2. 格外标签法清除浮动
3. overflow:hidden

标签插入法清除浮动，会新增标签，造成不必要的渲染。伪元素清除浮动，不会有其他影响，是比较流行的方法。overflow:hidden，由于写法方便，比较常见。

四，说一说HTML语义化

• 便于页面内容结构化
• 利于无CSS页面可读
• 利于SEO
• 利于代码可读

---

五，说一说盒模型

5.1 解题思路

• 标准盒模型、怪异盒模型
• box-sizing:border-box

5.2 作答

盒模型定义了一个盒子元素包含margin、padding、border、content四部分。标准模型就是给盒子设置width和 height，实际设置的是content，而怪异盒子，是给盒设置的width、height是包含padding、border的。

盒子默认为标准盒模型，而当我们给自己设置box-sizing:border-box时，即将盒子设置为怪异盒模型。

🍓🍓本专栏题库取自牛客网面试题库