本系列文章将介绍开发基础知识，函给了前端、后端、算法、运维、中间件五大类。希望能给奋斗中的小伙伴们带来或多或少的帮助。

一、HTML/CSS相关问题

1. 什么是盒模型？如何在 CSS 中改变盒模型？

盒模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。在 CSS 中可以通过 box-sizing 属性设置盒模型，content-box 为标准盒模型，border-box 为 IE 盒模型。

2. display: none 与 visibility: hidden 的区别？

display: none 将元素从文档流中移除，不占据空间；visibility: hidden 元素不可见，但仍然占据原来的空间。

3. 如何实现水平垂直居中？

多种方式可实现居中，如 flex 布局：

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

4.解释 CSS 选择器的优先级规则。

优先级从高到低依次是：!important > 内联样式 > ID 选择器 > 类、伪类和属性选择器 > 标签选择器 > 通配符选择器 > 继承的样式。

5.position: absolute和position: fixed的区别？

absolute 相对于最近的定位父元素进行定位；fixed 相对于视口进行定位，不随页面滚动。

6.什么是 BFC (Block Formatting Context)？

BFC 是一种布局机制，它规定了元素如何在块级上下文中布局。可以通过设置 overflow: hidden、float 等触发 BFC，常用于清除浮动。

7. 如何让图片自适应容器的大小？

可以使用以下 CSS 属性：

img {
    width: 100%;
    height: auto;
}

8.什么是响应式设计？如何实现？

响应式设计是一种根据不同设备的屏幕尺寸调整页面布局的设计方式。常用的技术包括媒体查询 (@media)、弹性布局 (flexbox)、栅格系统等。

9.CSS 伪类和伪元素的区别？

伪类用于选择元素的特定状态（如 :hover），伪元素则用于创建文档树之外的元素（如 ::before 和 ::after）。

10.解释 CSS 动画的工作原理。

CSS 动画通过 @keyframes 定义动画的关键帧，并通过 animation 属性设置动画效果。动画可以设置时长、循环次数、延迟等。

二、JavaScript相关问题

11. 什么是闭包？

闭包是指函数能够访问其外部作用域的变量，即使该函数在外部作用域执行后，闭包仍能记住并访问它们。

12.==和===有什么区别？

== 会进行类型转换后再比较，=== 不进行类型转换，要求类型和值都相等。

13. 解释事件冒泡与事件捕获。

事件冒泡是事件从最深的目标元素向上传播到祖先元素，事件捕获则是从祖先元素向下传播到目标元素。

14. 如何阻止事件冒泡？

可以使用 event.stopPropagation() 来阻止事件冒泡。

15. 什么是箭头函数？与普通函数的区别是什么？

箭头函数是 ES6 的一种简写函数语法，它没有自己的 this 和 arguments，this 指向的是定义时的外部作用域。

16. 什么是回调函数？

答案：回调函数是作为参数传递给另一个函数，并在特定时间或条件下执行的函数。

17. Promise 的工作原理是什么？

Promise 是用于处理异步操作的对象。它有三个状态：pending、fulfilled 和 rejected，通过 then() 和 catch() 方法处理成功或失败的结果。

18. 什么是异步编程？如何在 JavaScript 中实现？

异步编程指的是程序在处理某个任务时，可以在等待的同时处理其他任务。可以使用 callback、Promise 或 async/await 实现异步编程。

19. 什么是事件循环（Event Loop）？

事件循环是 JavaScript 中管理异步操作的机制，它允许非阻塞操作的执行。事件循环不断检查调用栈和消息队列，将消息队列中的任务推入调用栈执行。

20. 如何使用async/await实现异步操作？

async 用于定义异步函数，await 用于等待 Promise 的结果。