2024前端面经(1)

最新推荐文章于 2024-10-03 20:14:40 发布

2401_84153262

最新推荐文章于 2024-10-03 20:14:40 发布

阅读量742

点赞数 16

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

本文链接：https://blog.csdn.net/2401_84153262/article/details/138641293

版权

程序员专栏收录该内容

167 篇文章 0 订阅

订阅专栏

分别生成一个块状或行内的 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;

}

row：默认值-主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

2-2. flex-wrap: 决定容器内项目是否可换行

.container {

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

}

nowrap：默认值不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
wrap：项目主轴总尺寸超出容器时换行，第一行在上方
wrap-reverse：换行，第一行在下方

2-3. flex-flow: flex-direction 和 flex-wrap 的简写形式

.container {

flex-flow: || ;

}

默认值为: row nowrap，感觉没什么卵用，老老实实分开写就好了。这样就不用记住这个属性了。

2-4. justify-content：定义了项目在主轴的对齐方式。

.container {

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

}

建立在主轴为水平方向时测试，即 flex-direction: row

flex-start : 默认值flex-start 左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔相等，即剩余空间等分成间隙。
space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与边缘的间隔大一倍。

2-5. align-items: 定义了项目在交叉轴上的对齐方式。

.container {

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

}

建立在主轴为水平方向时测试，即 flex-direction: row

默认值为 stretch 即如果项目未设置高度或者设为 auto，将占满整个容器的高度。
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐

2-6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用。

.container {

}

建立在主轴为水平方向时测试，即 flex-direction: row, flex-wrap: wrap

默认值为 stretch
flex-start：轴线全部在交叉轴上的起点对齐
flex-end：轴线全部在交叉轴上的终点对齐
center：轴线全部在交叉轴上的中间对齐
space-between：轴线两端对齐，之间的间隔相等，即剩余空间等分成间隙。
space-around：每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍。

3.Flex 项目属性

order
flex-basis
flex-grow
flex-shrink
flex
align-self

大富大

order: 定义项目在容器中的排列顺序，数值越小，排列越靠前，默认值为 0

.item {

order: ;

}

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

.item {

flex-basis: | auto;

}

flex-grow: 定义项目的放大比例

.item {

flex-grow: ;

}

flex-shrink: 定义了项目的缩小比例

.item {

flex-shrink: ;

}

flex: flex-grow, flex-shrink 和 flex-basis的简写

.item{

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

}

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

.item {

}

五.防抖节流

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

应用场景：

1.scroll滚动事件出发

2.搜索框输入查询

3.表单验证

4.按钮提交事件

5.浏览器窗口缩放，resize事件

节流函数：如果你持续触发事件，每隔一段时间只执行一次事件（一个函数执行一次后，只有大于设定的执行周期后再触发）

应用场景：

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

2.计算鼠标移动的距离

3.射击游戏

4.监听scroll滚动事件

六.闭包

七.作用域和作用域链

八.Cookie、LocalStorage 与 SessionStorage的区别在哪里？

九.行内元素和块级元素的区别有哪些？（最基础也最致命）

常见行内元素和块级元素

1.行内元素

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

2.块级元素

、、

~

、

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：设置宽高无效

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

3：不会自动换行

2.块级元素

1：可以设置宽高

2：设置margin和padding都有效

3：可以自动换行

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

十. var let const

var声明变量会挂载在widow上，而let和const声明的变量不会

var a = 1;

console.log(window.a);//1

let b = 2;

console.log(window.b);//undefined

const c = 3;

console.log(window.c);//undefined

var声明的变量存在变量提升，let和const不存在变量提升

console.log(a);//undefined

var a = 1;

console.log(b);//报错

let b = 2;

console.log©;//报错

const c = 3;

let和const声明形成块作用域

if(true){

var a = 1;

let b = 2;

const c = 3;

}

console.log(a);//1

console.log(b);//报错

console.log©;//报错

同一作用域下let和const不能声明同名变量，var可以声明同名变量

var a = 10;

console.log(a);//10

var a = 100;

console.log(a);//100

const b = 11;

console.log(b);// 11

const b = 22; // Identifier ‘b’ has already been declared 标识符“b”已声明

console.log(b);//报错

let c = 33;

console.log© // 33

let c = 44; // Identifier ‘c’ has already been declared 标识符“c”已声明

console.log©;//报错

注意：const一旦声明变量必须赋值，也不能重新赋值

const PI = 3.141592653589793;

PI = 3.14; // 报错 Assignment to constant variable.

PI = PI + 10; // 报错

但是：

复合类型的数据（对象和数组）：变量指向的是内存地址，保存的是一个指针，const只能保存这个指针地址是固定的，至于他指向的数据结构是不是可变的，就完全不能控制了。

常量对象可以更改

const car = {type:“porsche”, model:“911”, color:“Black”};

car.color = “White”;

car.owner = “Bill”;

常量数组可以更改

const cars = [“Audi”, “BMW”, “porsche”];

cars[0] = “Honda”;

cars.push(“Volvo”);

但是您无法重新为常量数组赋值：

const names2=[1,4];

names2=[6,7]; // /出错，因为变量names2指向的地址不能发生改变，应始终指向[]所在的地址,[1,4]与[6,7]不是同一个地址/

十一. 水平垂直居中的几中方法

margin:auto法

.par{

width: 300px;

height: 300px;

position: relative;

background-color: cadetblue;

}

.child{

width: 100px;

height: 100px;

position: absolute;

margin: auto;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: green;

}

负margin法

.par{

width: 300px;

height: 300px;

border: 2px solid #379;

position: relative;

}

.child{

width: 100px;

height: 100px;

background-color: #746;

position: absolute;

top: 50%;

left: 50%;

margin-top: -190px; /height的一半/

margin-left: -240px; /width的一半/

}

absolute+transform

.par{

width: 300px;

height: 300px;

position: relative;

background-color: cadetblue;

}

.child{

width: 100px;

height: 100px;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

background-color: green;

}

Flex

.par {

width: 300px;

height: 300px;

display: flex;

justify-content: center;

align-items: center;

background-color: cadetblue;

}

.child{

width: 100px;

height: 100px;

background-color: green;

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

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

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

}

Flex

.par {

width: 300px;

height: 300px;

display: flex;

justify-content: center;

align-items: center;

background-color: cadetblue;

}

.child{

width: 100px;

height: 100px;

background-color: green;

最后

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

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

[外链图片转存中…(img-yZ9vBRkx-1715283476583)]

[外链图片转存中…(img-Qa34BFP1-1715283476584)]

[外链图片转存中…(img-nEm0rQnw-1715283476584)]

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

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

2401_84153262

关注

16
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

2024前端面经(1)

~

、 、、、 、 、 、、 、

最后

最后

、
、
、
、
、
、
、、
、