面试题第三章

最新推荐文章于 2024-06-10 22:18:41 发布

小桃子~

最新推荐文章于 2024-06-10 22:18:41 发布

阅读量108

点赞数

分类专栏：前端面试题文章标签： javascript 前端 css css3 jquery

本文链接：https://blog.csdn.net/m0_61692295/article/details/127835339

版权

前端面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

面试题第三章

1.Css的盒模型

CSS盒模型(box model),它是包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)属性的一个盒子模型。
而盒模型又分为两类标准：标准盒子模型和IE盒子模型（怪异盒子模型）
在标准盒子模型中，盒子的width是指content的宽高，
而IE盒子模型中就比较怪异了，它包含了content、border和padding的距离。
即它们的主要区别在于width和height的计算方式的不同。
标准盒子模型：盒子的总宽度 = content
IE 盒子模型 : 盒子的总宽度 = content+padding+border
高度计算同理

2.选择器有哪些和优先级

元素选择器
id选择器
类选择器
后代选择器
子代选择器
兄弟选择器
相邻选择器
群组选择器
全局选择器
属性选择器
伪类选择器

css优先级: !important>行间样式> ID选择器>属性选择器&&伪类选择器&&类选择器>元素选择器

3.Css垂直居中有哪些方式?

CSS垂直居中的8种方法
1、通过vertical-align:middle实现CSS垂直居中。
2、通过display:flex实现CSS垂直居中。
3、通过伪元素:before实现CSS垂直居中。
4、通过display:table-cell实现CSS垂直居中。
5、通过隐藏节点实现CSS垂直居中。
6、已知父元素高度通过transform实现CSS垂直居中。
7、到垂直居中的位置。
8、通过line-height实现CSS垂直居中。

4.Inline-block和block区别?

inline-block:简单的说，就是将对象呈现为inline对象，让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体。
display:block特点
1、独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满其父元素宽度
2、block元素可以设置width,height属性。块元素即使设置了宽度,仍然是独占一行。
3、block元素可以设置margin和padding属性。

5.box-sizing?

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。 [1]
语法
box-sizing：content-box | border-box
默认值：content-box
取值
content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding)
此属性表现为标准模式下的盒模型。
border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
此属性表现为怪异模式下的盒模型。

6.你用过的像素有哪些？Px（在细说一下rem）

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2、em：相对长度单位。基准点为父节点字体的大小，即相对于当前对象内文本的字体尺寸（继承父节点字体大小）。
如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸( 16px )。
3、rem：相对长度单位。r’是“root”的缩写，相对于根元素<html>的字体大小。
4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。
5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。

7.Em和vw和vh？

em
	em是相对长度单位，它是基于父元素的字体大小。

	当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸（1em = 16px）。
vm、vh、是一种视窗单位，也是相对单位。主要用于页面视口大小布局，相对于rem在页面布局上更加方便简单,
由视窗大小来决定的，单位 1，代表类似于 1%。
在pc端中，指的是浏览器的可视区域。
在移动端中，指的则是布局视口。
总结
	px：绝对单位，页面按精确像素展示。
	em：相对父节点字体的大小。
	rem：相对根节点html的字体大小来计算。
	vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单。

8.Js的数组方法？

1. push   向数组的末尾添加一项或多项元素
2. pop     删除数组的最后一项
3. shift    删除数组的首项
4. unshift  向数组的开头添加一或多项
5. splice  增删改
6. slice    截取数组(复制数组)
7. join      用指定的分隔符将数组每一项拼接为字符串
8. concat  用于连接两个或多个数组
9. sort   对数组的元素进行排序
10. reverse  倒序数组

9.js继承 call和apply的区别

bind不会立刻执行，会返回绑定this之后的函数，
call和apply会立即执行
三者都可以传参，但是apply是数组，而call和bind传过去的是一系列参数

10.Es6新特性?

let const关键字
箭头函数
模板字符串
箭头函数
promise对象
变量的解构赋值
简化的对象写法
形参默认值
symbol
Iterator遍历器
generator函数
Async函数

11.Promise是怎么封装的？

将一个普通的函数封装成一个 promise 实例，有3个关键步骤，
第一步是在函数内部构造一个 promise 实例，
第二步是部署函数执行完去改变 promise 的状态为已完成，
第三步就是返回这个 promise 实例。
每个 promise 实例都有3种状态，分别为 pending(初始化状态)、resolve(成功状态)、rejected(失败状态)。


resolve 接受一个参数，该参数就可以轻松实现将数据传送给使用 then 方法添加的回调中。
对于 ajax 请求，easy.js 直接将 ajax 方法封装成了 promise 对象，可以直接添加 then 方法来回调。
then 方法接受2个函数作为参数，第一个函数是已完成的回调，第二个就是已失败的回调。
when 方法是将多个 promise 实例存到一个数组中，等到该数组的所有 promise 实例都是已完成状态才去执行已完成的回调，一旦有一个实例是已拒绝的状态，则立即执行已拒绝的回调。

12.使用axios请求跨域怎么解决的？

config.index.js页面：
改造proxyTable部分，引入虚拟代理 ，请求target这个地址的时候直接写成/api即可。
业务.vue
代码：
  devServer: {
      proxy: {
          '/api': {  // http://localhost:8081/api/banner
              target: 'http://127.0.0.1:7001',  // http://127.0.0.1:7001/banner
              changeOrigin: true,
              pathRewrite: {
                '^/api': ''
              }
          }
      }
  }
修改请求为/api封装开头（但是如果你的接口包含/api的关键字的话，建议使用其他关键字）

13.代理配置怎么做代理的？

前端服务器之间不存在跨域，因此在跨域的时候需要进行服务器代理配置；

14.Proxy用来干嘛？

Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，
都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

15.Token是怎么用来储存呢？

Token: 访问资源的凭证。一般用户通过用户名密码登录后，服务端会将登录凭证做数字签名，
加密之后的字符串作为Token。
并在客户端后面的向服务端的请求中携带，作为凭证。
H5本地存储：sessionStorage：临时的会话存储，只要当前的会话窗口未关闭，存储的信息就不会丢失，
	即便刷新了页面或者在编辑器中更改了代码，存储的会话信息也不会丢失。localStorage是一种永久存储，
	会一直将数据存储在客户端的储存方式，即使关闭了浏览器，
	下次打开的时候仍然可以看到之前存储的未主动清除的数据（即便是杀毒软件或者浏览器自带的清除功能，也不能将localStorage存储的数据清除掉）。
Cookie：Cookie是存储在用户计算机上的小文件，保存特定客户端和网站的适量数据，
	并可以由Web服务器或客户端浏览器访问，允许服务器提供针对特定用户定制的页面，
	或者页面本身可以包含一些知道cookie中的数据的脚本。

小桃子~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面试题第三章

inline-block:简单的说，就是将对象呈现为inline对象，让block元素不再独占一行，多个block元素可以同排一行，且元素具有block的属性，可设置宽高，是block和inline元素的综合体。CSS盒模型(box model),它是包含了内容(content)、内边距(padding)、边框(border)、外边距(margin)属性的一个盒子模型。 1、独占一行，多个block元素另起一行，默认情况下，block元素宽度自动填满其父元素宽度。
复制链接

扫一扫