🍓🍓暑假还有一大半时间,这不拿来刷面试题可惜了。针对性的面试题不仅可以让我们深入理解知识,而且它还是拿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
会发生塌陷重叠。
形成条件有:
-
设置
float
为left
orright
。 -
固定定位或绝对定位
-
overflow
值非visible
,而是auto
,scroll
,hidden
-
元素显示模式为
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)