前言

工作这么多年，面试期间换个几次工作，也面试过不少公司，裸面的话，基本都是受打击，虽然都是面试‘造火箭’, 工作拧螺丝，为了在后续面试中，能更好的发挥，在这里总结下自己和朋友面试过程中的经历的一些面试，也算是对平时工作中，一些不太注意的地方的一个总结，一起共勉。

css篇

1、有段文字，但不知道多长，请问该如何实现单行文居中，多行文本居左显示？

答案：本题考查的是flex布局，单行文本不足居中，多行文本自动折行居左显示：

display: flex; flex-direction: row; justify-content: center;

2、实现一个盒子上下左右居中显示的方式有哪些？

方法1、宽度和高度已知的:

给父元素相对定位,给子元素绝对定位,left: 50%;top: 50%;margin-left: 负的宽度一半;margin-top: 负的高度一半。

方法2、宽度和高度自己未知：

给父盒子相对定位，给子盒子绝对定位top、right、bottom、left全为0，margin: auto;

方法3、 flex布局：

        .center{
            display: flex;
            justify-content: center;//实现水平居中
            align-items: center;//实现垂直居中
        }

方法4、平移定位 + transform：

         .child_box{
            width: 200px;
            height: 100px;
            background: #9ff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate( -50%,-50%);
        }

方法五、 table-cell布局：

父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;

3、如何选择合适的图片？

本题考查的是关于图片格式的区别，gif、jpg（jpeg）、png、svg 的区别：

首先图片的类型目前就分为两种：位图、矢量图

1、所谓位图就是用像素点拼起来的图也叫点阵图，平时我们用到的png、jpg等图片就是位图。

2、矢量图，也叫做向量图。矢量图并不纪录画面上每一点的信息，而是纪录了元素形状及颜色的算法，当你打开一幅矢量图的时候，软件对图形对应的函数进行运算，将运算结果图形的形状和颜色显示给你看。

无论显示画面是大还是小，画面上的对象对应的算法是不变的，所以，即使对画面进行倍数相当大的缩放，它也不会像位图那样会失真。

矢量图常见的就是svg格式的。

图片的压缩类型:

JPEG/JPG 采用有损压缩，压缩后体积更小,支持24位真彩色,支持渐进式加载; 有损压缩会损坏图片的质量,不支持透明/半透明。

png、gif使用的是无损压缩。png支持透明性，gif既可以是全透明，也可以是全不透明，但是它并没有半透明（alpha透明）。

svg是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形, 是可伸缩的, 可与 JavaScript 技术一起运行，是纯粹的 XML。

4、css实现三角形的原理？

答：width，height设置为0，然后两边的border值给透明transparent，另外一边给实际颜色值。

          .triangle{
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right:  50px solid transparent;
            border-top: 100px solid #333;
        }

5、什么是BFC？什么情况下会触发BFC？

W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（Block Fromatting Context，即块级格式上下文）。

触发条件:

1、根元素或包含根元素的元素；

2、浮动元素 float ＝ left | right 或 inherit （≠ none）；

3、绝对定位元素 position ＝ absolute 或 fixed；

4、display ＝ inline-block | flex | inline-flex | table-cell 或 table-caption ；

5、overflow ＝ hidden | auto 或 scroll (≠ visible)；

js 基础篇

1、讲讲 var,let const三者之间的区别？

1、 let、const 定义的变量不能重复定义，否则报错, var不存在这个问题；

2、 let、const 不能先引用再申明，否则报引用错误， var定义的变量存在变量提升问题；let、const定义的变量存在“暂时性封闭死区”；

3、const的作用域与let命令相同：只在声明所在的块级作用域内有效；

4、const声明的是基本类型时，一旦申明，则该常量不能改变，如果申明的是对象Object类型，则不存在该问题。

引申：

基本数据类型的变量名与值都是保存在栈区中的，值与值之间是独立存在的，修改一个变量不会影响其他的变量；

引用类型是存放在堆内存中的对象，同时在栈内存中保存了变量的一个指针，这个指针指向堆内存，在栈区保存的是堆内存中的引用地址，通过这个引用地址可以快速查找到保存中堆内存中的对象。

所以：const声明的只是栈区内容不变，基本数据类型保存在栈区中不可改变；引用数据类型在栈区保存的地址不可改变。所以const声明的对象，给属性重新赋值是可以的，但是重新定义对象，那样会改变对象在栈区的地址。

前端面试题

前言

css篇

js 基础篇