价值$22800的前端面试题兄弟们~~~我会每天更新

wulixiang123
77 阅读6分钟

HTML

1. HTML5 新特性

1.新的语义化元素：main、footer、header、nav、section
2.新的表单控件：date、time、email、url、search
3.新的 API：

  • 音视频：audio 和 video 元素
  • 绘图图形：canvas 元素
  • 本地存储：localStorage，sessionStorage
  • 多线程操作：Web Worker

引申的内容：

1.语义化：是什么？有什么用？

  • 有利于 SEO，代码更加规范和可读
  • SEO 是搜索引擎优化：提升网站在搜索引擎排名
  1. 可以通过 meta 标签设置 description / keyword 等值，一般值由产品需求提供
  2. 可以通过服务端渲染技术 SSR （react - next / vue - nuxt）

2.canvas（未来讲）

  • 概念：画布，用来绘制图形图表
  • 项目中主要用来完成数据可视化功能：比如数据大屏展示/适配/实时更新等

3.localStorage / sessionStorage

  • 区别
  1. localStorage 永久存储，通常用来存储用户的登录唯一标识 token
  2. sessionStorage 临时会话存储（关闭浏览器会自动清空内容）
  • 扩展其他存储方案
    cookie
    • 储存体积小（4KB）
    • 发送请求，cookie 会自动携带
    webStorage
    • 储存体积更大（2mb）
    • 必须手动携带（封装 axios 中请求拦截器在请求头中携带 token 参数）

4.WebWorker（未来讲）

  • 多线程操作，可以用于项目性能优化：比如将计算量大的任务交给 web worker 处理
  1. 常见的行内元素和块级元素有哪些？它们的区别？

1.行内元素 span i a
2.块级元素 div p ul/li header/footer form
3.行内块元素 img input

区别：

1.行内和行内块元素一行多个，块级元素独占一行
2.行内元素不能设置 width/height，行内块和块级元素可以设置

  1. 谈谈 iframe

  2. 概念：能在当前页面嵌套其他页面（能在当前应用嵌套其他子应用）

  3. 问题

  • 同源情况下, 可以通过 iframe 标签直接获取数据
  • 不同源情况下，postMessage 方法 和 message 事件的方式进行通信
  • postMessage 方法，用来发送数据
  • message 事件，用来接收数据

3.引申：同源概念

  • 主应用和子应用不同源，父应用就不能获取子应用的任何内容
  • 同源：协议名、域名、端口号三者必须完全一致

4.应用

  • 前端微应用：在主项目嵌套其他子项目。实际开发主要使用框架来完成： qiankun / micro

CSS

  1. CSS3 新特性

1.新增了选择器

  • :last-child 匹配父元素的最后一个子元素
  • :nth-child(n) 匹配父元素的第 n 个子元素

2.边框特性

  • border-radius 圆角

3.颜色与不透明度

  • opacity: 0.5;
  • color: rgba(0, 0, 0, 0.5)

4.阴影

  • text-shadow 文字阴影
  • box-shadow 盒子阴影

5.transform 变形

  • transform: rotate(9deg) 旋转
  • transform: scale(0.5) 缩放
  • transform: translate(100px, 100px) 位移

6.过渡与动画

  • transition 过渡
  • animation 动画 Vue 中 transition 组件，用来给显示隐藏切换的元素一个动画/过渡效果

7.媒体查询

至少说 4 个点

  1. 盒模型

  2. 概念：页面渲染时，DOM 元素所采用的布局模型。 可通过 box-sizing 进行设置。

  3. 分类：

  • content-box (W3C 标准盒模型) 当给元素设置 width 和 height 时，只会改变 width + height。
  • border-box (IE 盒模型) 当给元素设置 width 和 height 时，会改变 width + height + padding。
  • 其他未实现了
  1. BFC

1.概念

  • BFC，又称为块级格式化上下文，指的是：一个独立的渲染区域.

2.触发条件（开启 BFC）

  • 设置 overflow，即 hidden，auto，scroll
  • 设置浮动，不包括 none
  • 设置定位，absolute 或者 fixed 等方式

3.具体规则

  • BFC 是一个块级元素，块级元素在垂直方向上依次排列。
  • BFC 是一个独立的容器，内部元素不会影响容器外部的元素。
  • 属于同一个 BFC 的两个盒子，外边距 margin 会发生重叠，并且取最大外边距。
  • 计算 BFC 高度时，浮动子元素也要参与计算。

4.应用

  • 阻止 margin 重叠
  • 清除浮动，防止高度塌陷
  • 阻止标准流元素被浮动元素覆盖
  1. 选择器权重&优先级
  • !important > 行内样式 > #id > .class > tag > * > 继承 > 默认
  • CSS 选择器浏览器是 从右往左 依次解析

  1. CSS 预处理器(Sass/Less/Stylus)

  2. 概念：CSS 预处理器定义了一种新的语言，可以更方便的维护和管理 CSS 代码

  3. 比如我最常用的 sass

  • 可以使用 $ 来定义变量
  • 可以样式嵌套
  • 可以通过 mixin 来定义混合，复用代码

3.Vue 项目中使用

  • 通过安装 sass sass-loader 依赖就可以直接使用 sass 了
  • 定义变量通常在项目中会进行脚手架配置，来让有变量样式文件全局生效（配置 sass）

4.扩展

  • 现阶段样式变量 css 也支持了
  • 通过 :root{ --xxx-xx: xxx } 定义
  • 通过 var(--xxx-xx) 使用
  1. flex 布局

1.概念

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：主轴和交叉轴（也叫做侧轴）。默认水平方向的为主轴，垂直方向为侧轴。

2.容器的属性（2-3 个）

  • flex-direction 定义主轴的方向
  • flex-wrap 定义是否换行
  • flex-flow 是 flex-direction 属性和 flex-wrap 属性的简写形式
  • justify-content 定义项目在主轴上的对齐方式
  • align-items 定义项目在侧轴上的对齐方式
  • align-content 定义项目在交叉轴上如何对齐

3.项目的属性（2-3 个）

  • order 定义项目的排列顺序。数值越小，排列越靠前，默认为 0。
  • flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
  • flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
  • flex-basis 定义了在分配多余空间之前，项目占据的主轴空间。它的默认值为 auto，即项目的本来大小。
  • flex 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。
  • align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

4.扩展：flex: 1 啥意思

  • flex-grow: 1 如果存在剩余空间, 该项目会放大。
  • flex-shrink: 1 如果剩余空间不足，该项目会缩小。
  • flex-basis: 0% 设置为 0% 之后，即不占据主轴空间，但是因为有 flex-grow 和 flex-shrink 的设置，该项目会自动放大或缩小。
  1. 实现两栏布局
.container {
  display: flex;
  height: 100px;
}
.left {
  width: 200px;
  height: 100%;
  background: pink;
}
.right {
  flex: 1;
  height: 100%;
  background: deeppink;
}
  1. 隐藏页面元素方式

1.display: none 不占位。不会响应 DOM 事件。
2.opacity: 0 占位，但不可见。会响应 DOM 事件。
3.visibility: hidden 占位，但不可见。不会响应 DOM 事件。
4.position: absolute; left: -10000px 移动到屏幕外
5.z-index: -1 将别的定位元素遮盖掉当前元素

  1. 让元素水平垂直居中方式

1.利用绝对定位, 子元素未知宽高

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

2.利用绝对定位, 子元素必须明确宽高

.father {
  position: relative;
}
.son {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
}

3.利用 flex

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

明天继续兄弟们

avatar
文章
阅读
粉丝