前端面试学习笔记

1.大前端时代需要掌握的技术栈

  • HTML5 仅仅是标签

    • 语义化标签类

    • 音视频处理 （音视频标签）

    • Canvas/WebGL

    • history API

    • requestAnimationFrame

    • 地理位置

    • WebSocket

    • ……

  • CSS3

    • 常规
    • 动画
    • 盒子模型
    • 响应式布局
    • ……

  • JavaScript

    • ECMAScript 3、4、5、6、7、8、9
    • DOM
    • BOM
    • 设计模式
    • 底层原理
      • 堆栈内存
      • 闭包作用域AO/VO/GO/EC/ECSTACK
      • 面向对象OOP
      • THIS
      • EventLoop
      • 浏览器渲染原理
      • 回流重绘
      • ……

  • 网络通信层

    • AJEX/Fetch/axios
    • HTTP1.0/2.0
    • TCP
    • 跨域处理方案
    • 性能优化 - 网络通信层优化
    • ……

  • Hybird或者APP再或者小程序

    • Hybrid
    • uni-app
    • RN
    • Flutter
    • 小程序MPVUE
    • Weex
    • PWA

  • 工程化方面

    • webpack
    • git
    • linux/nginx
    • ……

  • 全栈方面

    • node
    • express
    • koa2
    • mongodb
    • nuxt.js/next.js
    • ……

  • 框架方面

    • Angular -基本不用

    • Vue

      • 基础知识
      • 核心原理
      • vue-router
      • vue-cli
      • vuex
      • element ui
      • vant
      • cube
      • SSR
      • 优化
      • ……

    • React

      • 基础知识
      • 核心原理
      • react-router-dom
      • redux
      • react-redux
      • dva
      • umi
      • mobix
      • antd
      • antd pro
      • SSR
      • 优化
      • ……

    • ……

  • 游戏方向

  • 可视化或AI方向

  • ……

3.BAT和TMD是怎样面试的

一个问题就知道会不会CSS

  • 什么是标签语义化

    合理的标签干合适的事情

  • 都有哪些标签，都是啥意思

    块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot

    行级（display：inline）：a、span、small、strong、em、i、code、

    行内块（display：inline-block）：img、input

  • 块级标签和行内标签的区别

    区别：

    1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

    2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

    3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

    4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

  • 如何转换

    通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block

  • display除了这些值还有哪些

    display还有none（隐藏dom）、flex（弹性）、table（表）

  • display:none

    • 让元素隐藏可以怎么做？

      display:none和visibility:hidden

    • display:none和visibility:hidden的区别

      display:none 不显示块，也就没有占位符

      visibility:hidden不可见，但是还是占位

    • opacity的兼容处理

      使用fliter

    • fliter除了处理透明度之外还能处理什么

      filter滤镜：对比度、饱和度、阴影、色相、透明度

  • display:flex

    • 项目中什么时候用到 建议参考https://www.runoob.com/w3cnote/flex-grammar.html

      布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

      img

      2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

      img

      Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。

      以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

      一、Flex布局是什么？

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

      任何一个容器都可以指定为Flex布局。

      .box{
display: flex;
}

      行内元素也可以使用Flex布局。

      .box{
display: inline-flex;
}

      Webkit内核的浏览器，必须加上-webkit前缀。

      .box{
display: -webkit-flex; /* Safari */
display: flex;
}

      注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

      二、基本概念

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

      img

      容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

      项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

      三、容器的属性

      以下6个属性设置在容器上。

      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
      • align-items
      • align-content

      3.1 flex-direction属性

      flex-direction属性决定主轴的方向（即项目的排列方向）。

      .box {
  flex-direction: row | row-reverse | column | column-reverse;
}

      img

      它可能有4个值。

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

      3.2 flex-wrap属性

      默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

      img

      .box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

      它可能取三个值。

      （1）nowrap（默认）：不换行。

      img

      （2）wrap：换行，第一行在上方。

      img

      （3）wrap-reverse：换行，第一行在下方。

      img

      3.3 flex-flow

      flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

      .box {
  flex-flow: <flex-direction> <flex-wrap>;
}

      3.4 justify-content属性

      justify-content属性定义了项目在主轴上的对齐方式。

      .box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

      img

      它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

      • flex-start（默认值）：左对齐
      • flex-end：右对齐
      • center： 居中
      • space-between：两端对齐，项目之间的间隔都相等。
      • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

      3.5 align-items属性

      align-items属性定义项目在交叉轴上如何对齐。

      .box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

      img

      它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

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

      3.6 align-content属性

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

      .box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

      img

      该属性可能取6个值。

      • flex-start：与交叉轴的起点对齐。
      • flex-end：与交叉轴的终点对齐。
      • center：与交叉轴的中点对齐。
      • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
      • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
      • stretch（默认值）：轴线占满整个交叉轴。

      四、项目的属性

      以下6个属性设置在项目上。

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

      4.1 order属性

      order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

      .item {
  order: <integer>;
}

      img

      4.2 flex-grow属性

      flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

      .item {
  flex-grow: <number>; /* default 0 */
}

      img

      如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

      4.3 flex-shrink属性

      flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

      .item {
  flex-shrink: <number>; /* default 1 */
}

      img

      如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

      负值对该属性无效。

      4.4 flex-basis属性

      flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

      .item {
  flex-basis: <length> | auto; /* default auto */
}

      它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

      4.5 flex属性

      flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

      .item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

      该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

      建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

      4.6 align-self属性

      align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

      .item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

      img

      该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

    • 除了这种方式还有哪些可以实现居中？

      text-align:center这种方式可以水平居中块级元素中的行内元素，如inline，inline-block；但是如果用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种方法就会失效。

      margin:0 auto 这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。

      脱离文档流的居中方式 这种通常应用在自定义弹框当中，把背景层设置成透明灰色，内容居中显示在最前面。

      .center{
 display: block;
 position: fixed;
 _position: absolute;
 top: 50%;
 left: 50%;
 width: 666px;
 height:400px;
 margin-left: -333px;
 margin-top: -200px;
 z-index: 10001;
 box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;
 background-color: #fff;
}

      这种居中方式，把内部div设置宽高之后，再设置top、left各为50%，设置完之后，这里是按照左端居中的，接着我们使用负边距的方式调整，将margin-top设置为负的高度的一半，margin-left设置为负的宽度的一半，就可以居中了。

      这种方式还有一种居中方法就是设置margin：-（内部div高度的一半） auto；这用就不用设置left的值了。

      display:table-cell display:table-cell配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td，float、absolute等属性都会影响它的实现，不响应margin属性

      .center {
　　display: table;
　　width: 100%;
}
.center_text {
　　display: table-cell;
　　text-align: center;
　　vertical-align: middle;
}

      垂直居中

      1.行内元素的垂直居中把height和line-height的值设置成一样的即可。

      2.使用css3的translate水平垂直居中元素

      .center {
 position: relative;
 height: 500px;}
.center_text{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 300px;
 height: 600px;
}

      • 响应式布局

        响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够，缺点就是CSS比较重。下面是博客网站对不同设备适配后的结果，分别是iPhone5/SE,iphone6/7/8,iphone 6/7/8 plus,ipad pro,dell台式宽屏(1440 X 900)。

        响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机，从而请求服务层，返回不同的页面。

        1. 媒体查询

        CSS3媒体查询可以让我们针对不同的媒体类型定义不同的样式，当重置浏览器窗口大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

        如何选择屏幕大小分割点

        如何确定媒体查询的分割点也是一个开发中会遇到的问题，

        选择600px,900px,1200px,1800px作为分割点、480px,800px,1400px,1400px

        上面的分割方案不一定满足项目中的实际需求，我们可以先用跨度大的分割点进行分割，如果出现不适配的情况可以再根据实际情况增加新的分割点。

        移动优先 OR PC优先

        不管是移动优先还是PC优先，都是依据当随着屏幕宽度增大或减小的时候，后面的样式会覆盖前面的样式。因此，移动端优先首先使用的是min-width，PC端优先使用的max-width。

        2.百分比布局

        通过百分比单位，可以使得浏览器中组件的宽和高随着浏览器的高度的变化而变化，从而实现响应式的效果。Bootstrap里面的栅格系统就是利用百分比来定义元素的宽高，CSS3支持最大最小高，可以将百分比和max(min)一起结合使用来定义元素在不同设备下的宽高。

        子元素的height或width中使用百分比，是相对于子元素的直接父元素，width相对于父元素的width，height相对于父元素的height；子元素的top和bottom如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度，同样子元素的left和right如果设置百分比，则相对于直接非static定位(默认定位的)父元素的宽度；子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。跟padding一样，margin也是如此，子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width；border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度，除了border-radius外，还有比如translate、background-size等都是相对于自身的；

        从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

        计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。

        各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如width和height相对于父元素的width和height，而margin、padding不管垂直还是水平方向都相对比父元素的宽度、border-radius则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

        3.rem布局

        REM是CSS3新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。rem单位都是相对于根元素html的font-size来决定大小的,根元素的font-size相当于提供了一个基准，当页面的size发生变化时，只需要改变font-size的值，那么以rem为固定单位的元素的大小也会发生响应的变化。 因此，如果通过rem来实现响应式的布局，只需要根据视图容器的大小，动态的改变font-size即可（而em是相对于父元素的）。

        rem响应式的布局思想：

        一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值

        高度值可以设置固定值，设计稿有多大，我们就严格有多大

        所有设置的固定值都用rem做单位（首先在HTML总设置一个基准值：px和rem的对应比例，然后在效果图上获取px值，布局的时候转化为rem值)

        js获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

        rem布局的缺点：

        在响应式布局中，必须通过js来动态控制根元素font-size的大小，也就是说css样式和js代码有一定的耦合性，且必须将改变font-size的代码放在css样式之前

        /上述代码中将视图容器分为10份，font-size用十分之一的宽度来表示，最后在header标签中执行这段代码，就可以动态定义font-size的大小，从而1rem在不同的视觉容器中表示不同的大小，用rem固定单位可以实现不同容器内布局的自适应。/

        REM布局也是目前多屏幕适配的最佳方式。默认情况下我们html标签的font-size为16px,我们利用媒体查询，设置在不同设备下的字体大小。

        4.视口单位

        css3中引入了一个新的单位vw/vh，与视图窗口有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度，除了vw和vh外，还有vmin和vmax两个相关的单位。各个单位具体的含义如下：

        vw 相对于视窗的宽度，1vw 等于视口宽度的1%，即视窗宽度是100vw

        vh 相对于视窗的高度，1vh 等于视口高度的1%，即视窗高度是100vh

        vmin vw和vh中的较小值

        vmax vw和vh中的较大值

        用视口单位度量，视口宽度为100vw，高度为100vh（左侧为竖屏情况，右侧为横屏情况）。例如，在桌面端浏览器视口尺寸为650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持0.5px，那么实际渲染结果可能是7px）。

        使用视口单位来实现响应式有两种做法：

        1.仅使用vw作为CSS单位

        2.搭配vw和rem

        5.图片响应式

        这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

        1.使用max-width（图片自适应）:

        图片自适应意思就是图片能随着容器的大小进行缩放

        2.使用srcset

        3.使用background-image

        4.使用picture标签

        总结：

        响应式布局的实现可以通过媒体查询+px,媒体查询+百分比，媒体查询+rem+js,vm/vh,vm/vh +rem这几种方式来实现。但每一种方式都是有缺点的，媒体查询需要选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配，另外用户体验也不友好，布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的切换变化，如同卡带的唱机般“咔咔咔”地一下又一下。通过百分比来适配首先是计算麻烦，第二各个属性中如果使用百分比，其相对的元素的属性并不是唯一的，这样就造成我们使用百分比单位容易使布局问题变得复杂。通过采用rem单位的动态计算的弹性布局，则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得CSS与JS 耦合了在一起。通过利用纯css视口单位实现适配的页面，是既能解决响应式断层问题，又能解决脚本依赖的问题的，但是兼容性还没有完全能结构接受。

        响应式布局的成型方案

        现在的css，UI框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：

        利用上面的方法自己来实现，比如CSS3 Media Query,rem，vw等

        Flex弹性布局，兼容性较差

        Grid网格布局，兼容性较差

        Columns栅格系统，往往需要依赖某个UI库，如Bootstrap

        响应式布局的要点

        在实际项目中，我们可能需要综合上面的方案，比如用rem来做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：

        设置viewport

        媒体查询

        字体的适配（字体单位）

        百分比布局

        图片的适配（图片的响应式）

        结合flex，grid，BFC，栅格系统等已经成型的方案

    几道前端的经典面试题

    1.掌握盒子水平垂直居中的五大方案

    • 定位：三种

    • display:flex

    • JavaScript

    • display:table-cell

      <html>
    <head>
        <style>
            body{
                position: relative;
                /* height: 100%; */
                overflow:hidden;
            }
            .box{
                box-sizing:border-box;
                width:100px;
                height:50px;
                line-height: 48px;
                text-align: center;
                font-size: 16px;
                border:1px solid lightblue;
                background: lightcyan;
            }
            /*定位*/
            /* body{
                position: relative;
            } */
            /* .box{
                position:absolute;
                top:50%;
                left:50%;
                margin-top: -25px;
                margin-left: -50px;
                /* 需要宽高，关注具体数值 
            } */
            /* .box{
                position:absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                margin:auto;
                /* 需要宽高，但不用关注具体数值 
            } */
            /* .box{
                position:absolute;
                top:0;
                left:0;
                transform: translate(-50%,-50%);
                /* 不需要宽高，前为左移，后为上移，兼容性不好
            } */

            /* flex 兼容性也不是很好 */
            /* body{
                display:flex;
                justify-content:center; /*单根轴线的对齐方式，水平居中
                align-items:center; /*多根轴线的对齐方式，垂直居中
            } */

            /* body{
                display:inline-block;
                vertical-align:middle;
                text-align: center;
                /* 固定宽高 
                width:500px;
                height: 500px;
                background:lightcoral;
            }
            .box{
                display: inline-block;
            } */
        </style>
    </head>
<body>
    <div class="box" id="box">
        居中文本
    </div>
     <!-- JS方式 -->
     <!-- <script>
        let HTML=document.documentElement,
            winW=HTML.clientWidth,
            winH=HTML.clientHeight,
            boxW=box.offsetWidth,
            boxH=box.offsetHeight;
        box.style.position="absolute";
        box.style.left=(winW-boxW)/2+'px';
       box.style.top=(winH-boxH)/2+'px';

         </script> -->

</body>
</html>

    2.关于CSS3中盒模型的几道面试题

    • 标准盒子模型
    • 怪异盒模型
# css3
Logo
CSDN学习社区

CSDN联合极客时间，共同打造面向开发者的精品内容学习社区，助力成长！

更多推荐

cover

用 OpenAI Assistants 做大模型应用开发

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区
cover

1 小时解读鸿蒙 10 大热点问题

avatar CSDN学习社区