css、js、vue常考部分面试题

css

css盒子水平垂直居中方法

方法一：定位

javascript 复制代码

.child{
  height: 100px;
  position: absolute;//父元素相对定位
  top:50%;
  left:50%;
   transform: translate(-50%,-50%);
}

方法二：定位

javascript 复制代码

.child{
	width: 100px;
	height: 100px;
	position: absolute;
	top:50%;
	left:50%;
	margin-top: -50px;
	margin-left: -50px;
}

方法三：定位

javascript 复制代码

child {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto
}

方法四：弹性盒子

javascript 复制代码

father{
		 width: 200px;
         height: 200px;
         display: flex;
         justify-content: center;
         align-items: center;
}

方法五：表格

javascript 复制代码

father{
		width: 500px;
         height: 500px;
         border: 1px solid red;
         /* 将元素转成表格单元格显示 */
         display: table-cell;
         vertical-align: middle;
         text-align: center;
}
子元素需设置{
display: inline-block;
        vertical-align: middle;//消除行内块元素三像素问题
}

css盒子模型的理解

将一个内容放在页面合适的位置，需要考虑到这个内容大小，位置，形状，就相当于，买一个家具

css将所有内容的形状统一成矩形，然后只需要考虑内容大小。

盒模型、盒子模型、框模型（box model）*/

1:内容区(content) 冰箱

2、内边距（padding）泡沫

3、边框（border）纸箱

4、外边距（margin）控制位置(元素与元素之间)

过渡约束

浏览器的一种规则，元素水平方向七个值数值相加，要等于其父元素内容区宽度，

如果不等于，浏览器会进行强制调整，这个过程就叫过度约束

怎么调整：

1、七个值当中没有auto，就调整margin-right

0+0+0+100+0+0+500=600

2、如果有auto，margin-left，width，margin-right可以被设置为auto

1个auto 谁是auto调整谁

margin-left为auto，width，margin-right为固定值

margin-right为auto，width，margin-left为固定值

width为auto，margin-left，margin-left为固定值

0+0+0+auto+0+0+0=600

2个auto

margin-left，width为auto，margin-right为固定值调整width

width，margin-right为auto，margin-left为固定值调整width

margin-left，margin-right为auto，width为固定值同时调整margin-left，margin-right

3个auto

margin-left，width，margin-right为auto 调整的width

总结：如果width为auto，就只调整width

垂直外边距的重叠

-兄弟元素
两者正值的话，谁大听谁的
一正一负，两者相加
两者负值的话，谁小听谁的
一般情况，兄弟元素的外边距重叠问题不需要特殊解决
-父子元素
如果父子元素的垂直外边距相邻了，则子元素的外边距会传递给父元素
从而会影响到整个页面的布局，必须要处理

解决方案：

1、用透明边框隔开两者的外边距

2、overflow: 非visible的值;(可以开启元素的BFC属性)

3.用伪类前面加一个display:table;（在父元素的外面添加）*/

css3新特性

边框和背景：
- 圆角边框（border-radius）
- 阴影效果（box-shadow）
- 边框图片（border-image）
- 背景大小（background-size）
文本效果：
- 文本阴影（text-shadow）
- 文本渐变（linear-gradient、radial-gradient）
- 多列文本布局（multi-column layout）
字体：
- 自定义字体（@font-face）
- 字体阴影（text-stroke）
变换和过渡：
- 2D/3D 变换（transform）
- 过渡效果（transition）
动画：
- 关键帧动画（@keyframes）
- 动画属性（animation）
布局：
- 弹性布局（flexbox）
- 网格布局（grid layout）
媒体查询：
- 响应式设计（responsive design）
- 根据媒体类型和特性调整样式表（@media）

如何开启BFC

是解决高度塌陷

给元素开启BFC（块级格式化上下文）

BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块

具有一些特点，这些特点，可以帮助我们解决一些问题

1、开启BFC的元素，垂直方向外边距不会重叠

2、开启BFC的元素，不会被浮动元素覆盖

3、开启BFC的元素，会包含住浮动元素，可以解决高度塌陷问题

如何开启BFC

1、设置浮动

可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

2、将元素转成行内块

可以解决高度塌陷，但宽度会丢失，且有三像素问题

3、overflow属性非visible值

副作用最小，建议使用

4、开启绝对定位

可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

让 Chrome支持小于12px的文字方式有哪些?

使用相对单位：可以使用相对单位如 em、rem 或者百分比来设置字体大小，这样可以相对于父元素或者根元素进行缩放，而不会受到浏览器的最小字体限制。
使用 transform 进行缩放：可以使用 CSS3 的 transform 属性对文字进行缩放，例如 transform: scale(0.8); 可以将文字缩小到原来的 80%。
使用 SVG：将文字作为 SVG 图像来显示，这样可以绕开浏览器对于文字最小字号的限制。
使用图片或图标字体：将小于 12px 的文字内容制作成图片或者使用图标字体来展示，这样可以规避浏览器对于文字最小字号的限制。

需要注意的是，小于 12px 的文字可能会影响到可读性和用户体验，建议在使用时进行充分的测试和考虑。

Js

Promise理解

js有同步和异步：

同步：代码依次执行，上一个任务完成后，下一个任务才执行
异步：遇到耗时任务时不必等待其完成，继续执行后面的任务，如定时器、事件回调、ajax请求

注意：代码先执行同步代码，后执行异步代码

对promise的理解：异步容易造成回调地狱，promise是一个内置构造函数，接受一个函数作为参数，该参数函数立即调用，该执行函数可以放同步或异步任务，参数函数接受两个形参resolve,reject这两个参数是函数，resolve()调用表示成功，reject()调用表示失败，promise有三个状态默认状态(等待态、成功态、失败态)

事件环

js是单线程，同一时间只能做一件事，为了避免耗时任务阻塞代码，js通过事件环来处理这种耗时任务(异步）

执行程序：

先同步，再异步

异步分微任务(then、catch方法),宏任务(ajax、定时器、事件回调、script标签)
事件环是先执行宏任务(解析script)

从上往下执行，遇到同步代码，立刻放入js调用栈执行，遇到宏任务放到宿主环境(浏览器)

遇到微任务放到微任务队列。当宿主环境的时间或事件触发，对应的回调进入宏任务队列

当Js调用栈空闲时，会清空微任务队列，然后在执行宏任务队列，执行完一个宏任务，再清空微任务队列

Vue

聊聊Vuex

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它主要用于集中管理应用程序中的所有组件的状态，并以一种可预测的方式进行状态的修改和管理。

State（状态）：应用程序中需要集中管理的状态数据，类似于组件中的 data。
Getters（获取器）：用于从 state 中派生出一些状态，类似于组件中的计算属性。
Mutations（突变）：用于修改 state 中的数据，必须是同步函数。
Actions（动作）：用于提交 mutations，可以包含任意异步操作。
Modules（模块）：用于将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions。

2 Vue 如何定义指令

全局方式

javascript 复制代码

// 全局注册一个自定义指令
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时......
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部方式

javascript 复制代码

// 在组件中定义局部指令
directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

Vue路由模式区别

hash模式

默认hash 哈希模式，地址上带#

优点：兼容性好

缺点：不美观

原理：#后面地址改变不会引起页面刷新，路由会检测到地址变化(window.onhashchange)，拿到最新的地址找到

匹配的组件进行渲染

mode: 'hash',

history模式

history模式地址上不带#

优点：美观缺点：兼容不好

原理：采用h5的history相关api(pushState, replaceState)

必须服务器支持,配合后台

在脚手架环境下，默认支持history模式

v-if 和 v-for为什么不能一起使用

v-if 和 v-for 不能直接一起使用是因为它们的优先级不同，会导致意想不到的结果。
当 v-for 和 v-if 同时存在于同一个元素上时，v-for 的优先级高于 v-if。这意味着 v-for 指令会首先被执行，然后才是 v-if。这可能导致在渲染列表时，v-if 的条件判断会被应用到每个循环中的元素上，而不是整个列表。
如果需要在遍历列表时进行条件判断，可以将 v-if 放在包裹元素上，或者使用计算属性或方法来过滤需要渲染的列表数据。

可以这样使用

javascript 复制代码

<div v-for="item in items" v-if="item.isActive">
  {{ item.name }}
</div>