2024前端面经

ul{

background: pink;

}

li {

list-style: none;

height: 100px;

width: 100px;

float: left;

background: red;

margin-left: 20px;

}

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: ;

  }

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

  .item {

  flex-basis: | auto;

  }

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

  .item {

  flex-grow: ;

  }

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

  .item {

  flex-shrink: ;

  }

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

  .item{

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

  }

  6. 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.块级元素

  、 、

  ~

  、

  ---

  、

  、

  、
      
      
  
       
       、
       
       
  
        
        、
        
        
  
         
         、、
         
         
  
          
          、
  
         
         
         
         
        
        
       
       
      
      

  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对象呈现，之后的内联对象会被排列在同一行内

  3. 行内元素和块级元素的区别

  1.行内元素

  1：设置宽高无效

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

  3：不会自动换行

  2.块级元素

  1：可以设置宽高

  2：设置margin和padding都有效

  3：可以自动换行

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

  十. var let const

  ---

  4. 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

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

  console.log(a);//undefined

  var a = 1;

  console.log(b);//报错

  let b = 2;

  console.log©;//报错

  const c = 3;

  6. let和const声明形成块作用域

  if(true){

  var a = 1;

  let b = 2;

  const c = 3;

  }

  console.log(a);//1

  console.log(b);//报错

  console.log©;//报错

  7. 同一作用域下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]不是同一个地址/

  十一. 水平垂直居中的几中方法
  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

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

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

  

  

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

  

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

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

  

  最后

  

  

  由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。

  不能发生改变，应始终指向[]所在的地址,[1,4]与[6,7]不是同一个地址*/

  十一. 水平垂直居中的几中方法
  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

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

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

  [外链图片转存中…(img-xWUuggVJ-1713434407281)]

  [外链图片转存中…(img-YAq1GuoP-1713434407282)]

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

  [外链图片转存中…(img-hNeV6xi1-1713434407282)]

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

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

  [外链图片转存中…(img-rRRN42Tf-1713434407283)]

  最后

  [外链图片转存中…(img-1gfVJUal-1713434407283)]

  [外链图片转存中…(img-kBqitB9G-1713434407283)]

  由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处免费获取。