前端面试题（2022年）

1.对BFC规范（块级格式化上下文）的理解*

Bfc 块级上下文 是一块独立的区域，有自己的规则，BFC中的元素与外界的元素互不影响
BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。

怎么触发BFC
1.float的值left或right （左浮动或者右浮动）
2.overflow的值部位visible（默认）
3.display的值为inline-block、table-cell、table-caption
4.position的值为absolute（绝对定位）或fixed固定定位

规则

1、BFC的区域不会与float box重叠。
2、BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
3、计算BFC的高度时，浮动元素也会参与计算。
4、内部的Box会在垂直方向上一个接一个放置。
5、Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

BFC的应用
1.可以用来自适应布局
利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会互相影响，哪怕高度不相等。 给左边盒子加浮动，右盒子加overflow：hidden；变成BFC，就可以消除外部左边盒子因为浮动对他的影响
2.可以清除浮动
一个父元素中的子元素，设置浮动的时候，父元素没有设置高度，这个时候子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。
3.解决垂直边距重叠
a. 问题： 父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。
解决方式：给父元素添加一个 overflow:hidden，这样父元素就变为BFC，不会随子元素产生外边距
b:问题：统计兄弟关系的重叠
同级元素在垂直方向上外边距会出现重叠现象，最后外边距的大小取两者绝对值大的那个
解决方式：可通过添加一个空元素或伪类元素，设置overflow:hidden;解决

2.什么是渐进增强优雅降级

渐进增强：针对低版本浏览器进行构建页面，办证基本的功能，然后在针对高级浏览器进行效果、交互等改进和追求功能达到更好的用户体验。
优雅降级： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

3.从浏览器地址输入url到显示页面的步骤

1.浏览器根据请求的url交给Dns进行域名解析，找到真是ip地址，像服务器发起请求；
2.服务器交给后台处理完成后返回数据，浏览器接收文件（html、css、js、images等）；
3.浏览器对加载到的资源（html、css、js、images等）进行语法解析，建立相应的内部数据结构（如html的dom）
4.载入解析到的资源文件，渲染页面，完成。

4.z-index规则

1.值可以是正整数，负整数或0，数值越大，盒子约靠上；
2.如果属性值相同，则按照书写顺序，后来者居上；
3.数字后面不能加单位
4.z-index只能能应用于脱离文档流的元素（相对定位、绝对定位和固定定位），

原文章链接： https://blog.csdn.net/qq_54753561/article/details/122149197