2024前端面经(1)，网页前端开发

最新推荐文章于 2024-09-30 15:42:36 发布

2401_84091580

最新推荐文章于 2024-09-30 15:42:36 发布

阅读量811

点赞数 22

分类专栏：程序员文章标签：前端

本文链接：https://blog.csdn.net/2401_84091580/article/details/137304469

版权

程序员专栏收录该内容

295 篇文章 0 订阅

订阅专栏

在这里插入图片描述

二.BFC

BFC的布局规则

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

如何创建BFC

根元素或其它包含它的元素
float属性不为none的时候
overflow属性不为visible的时候
position属性为absolute或fixed的时候 / position的值不是static或者relative
display属性为inline-block、table-cell、table-caption、flex、inline-flex的时候

BFC的作用

防止盒子间外边距margin重叠（margin合并）
防止与浮动元素重叠
包裹住浮动元素(解决margin塌陷)
实现文本对图片的环绕效果
清除浮动
自适应两栏布局

总结

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

三.css_清除浮动的4种方式

float布局会脱离文档流，对页面的布局造成影响，比如造成父级的高度坍塌等问题。清除浮动后，便不会影响文档流。

1. 父级添加overflow: hidden；

子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性，就可以解决浮动带来的影响。

2. 通过属性clear:both;达到清除浮动的目的；

元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的目的。
3. 通过给父级元素添加伪类after，达到清除浮动的目的；

这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也是常用的清理浮动的方式。
4. 使用双伪类；
四.Flex布局

具体可以看原文章：30 分钟学会 Flex 布局

1. Flex布局是什么？
- Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
.container {

display: flex | inline-flex; //可以有两种取值

}

分别生成一个块状或行内的 flex 容器盒子。简单说来，如果你使用块元素如 div，你就可以使用 flex，而如果你使用行内元素，你可以使用 inline-flex。

需要注意的是：当时设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

2. 有下面六种属性可以设置在容器上，它们分别是：
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
2-1. flex-direction: 决定主轴的方向(即项目的排列方向

.container {

flex-direction: row | row-reverse | column | column-reverse;

}
1. row：默认值-主轴为水平方向，起点在左端
2. row-reverse：主轴为水平方向，起点在右端
3. column：主轴为垂直方向，起点在上沿
4. column-reverse：主轴为垂直方向，起点在下沿
2-2. flex-wrap: 决定容器内项目是否可换行

.container {

flex-wrap: nowrap | wrap | wrap-reverse;

}
1. nowrap：默认值不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
2. wrap：项目主轴总尺寸超出容器时换行，第一行在上方
3. wrap-reverse：换行，第一行在下方
2-3. flex-flow: flex-direction 和 flex-wrap 的简写形式

.container {

flex-flow: || ;

}
1. 默认值为: row nowrap，感觉没什么卵用，老老实实分开写就好了。这样就不用记住这个属性了。
2-4. justify-content：定义了项目在主轴的对齐方式。

.container {

justify-content: flex-start | flex-end | center | space-between | space-around;

}

建立在主轴为水平方向时测试，即 flex-direction: row
1. flex-start : 默认值flex-start 左对齐
2. flex-end：右对齐
3. center：居中
4. space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
5. space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。
2-5. align-items: 定义了项目在交叉轴上的对齐方式。

.container {

align-items: flex-start | flex-end | center | baseline | stretch;

}

建立在主轴为水平方向时测试，即 flex-direction: row
1. 默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。
2. flex-start：交叉轴的起点对齐
3. flex-end：交叉轴的终点对齐
4. center：交叉轴的中点对齐
5. baseline: 项目的第一行文字的基线对齐
2-6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用。

.container {

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

}

建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap
1. 默认值为 stretch
2. flex-start：轴线全部在交叉轴上的起点对齐
3. flex-end：轴线全部在交叉轴上的终点对齐
4. center：轴线全部在交叉轴上的中间对齐
5. space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
6. space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。
3.Flex 项目属性
1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self
大富大
1. order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0
.item {

order: ;

}
1. flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间，浏览器根据这个属性，计算主轴是否有多余空间
.item {

flex-basis: | auto;

}
1. flex-grow: 定义项目的放大比例
.item {

flex-grow: ;

}
1. flex-shrink: 定义了项目的缩小比例
.item {

flex-shrink: ;

}
1. flex: flex-grow, flex-shrink 和 flex-basis的简写
.item{

flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

}
1. align-self: 允许单个项目有与其他项目不一样的对齐方式
.item {

align-self: auto | flex-start | flex-end | center | baseline | stretch;

}

五.防抖节流
- 防抖函数：事件相应函数在一段时间后才执行，如果在这段时间内再次执行则重新计算，当预定的时间内没有再次调用该函数，则执行相应逻辑。
应用场景：

1.scroll滚动事件出发

2.搜索框输入查询

3.表单验证

4.按钮提交事件

5.浏览器窗口缩放，resize事件
- 节流函数：如果你持续触发事件，每隔一段时间只执行一次事件（一个函数执行一次后，只有大于设定的执行周期后再触发）
应用场景：

1.DOM元素的拖拽功能实现

2.计算鼠标移动的距离

3.射击游戏

4.监听scroll滚动事件

六.闭包
- 彻底搞懂JS闭包各种坑
- 闭包
七.作用域和作用域链
- JS中的作用域和作用域链
- JS中的作用域和作用域链(原文)
八.Cookie、LocalStorage 与 SessionStorage的区别在哪里？
九.行内元素和块级元素的区别有哪些？（最基础也最致命）
1. 常见行内元素和块级元素
1.行内元素

、、
、、、、、、、^、_、、

2.块级元素
、
、
~
、
、
、
```
、
    
    
     
     、
     
     
      
      、
      
      
       
       、、
       
       
        
        、

       
       
       
       
      
      
     
     
    
    
```
1. display的block、inline和inline-block的区别
1.block

会独占一行，多个元素会另起一行，可以width、height、margin和padding属性

2.inline

元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不可以设置垂直方向的padding和margin

3.inline-block

将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内
1. 行内元素和块级元素的区别
1.行内元素

1：设置宽高无效

2：对margin设置左右方向有效，而上下无效，padding设置都无效

3：不会自动换行

2.块级元素

1：可以设置宽高

2：设置margin和padding都有效

3：可以自动换行

4：多个块状，默认排列从上到下

十. var let const

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-eswDIH5F-1712076166430)]

[外链图片转存中…(img-KAQlAtV9-1712076166431)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-ULraHHDl-1712076166431)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

资料领取方式：戳这里前往免费领取