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

css

css盒子水平垂直居中方法

方法一：定位

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

方法二：定位

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

方法三：定位

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

方法四：弹性盒子

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

方法五：表格

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新特性

1. 边框和背景：

   • 圆角边框（border-radius）
   • 阴影效果（box-shadow）
   • 边框图片（border-image）
   • 背景大小（background-size）

2. 文本效果：

   • 文本阴影（text-shadow）
   • 文本渐变（linear-gradient、radial-gradient）
   • 多列文本布局（multi-column layout）

3. 字体：

   • 自定义字体（@font-face）
   • 字体阴影（text-stroke）

4. 变换和过渡：

   • 2D/3D 变换（transform）
   • 过渡效果（transition）

5. 动画：

   • 关键帧动画（@keyframes）
   • 动画属性（animation）

6. 布局：

   • 弹性布局（flexbox）
   • 网格布局（grid layout）

7. 媒体查询：

   • 响应式设计（responsive design）
   • 根据媒体类型和特性调整样式表（@media）

如何开启BFC

是解决高度塌陷

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

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

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

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

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

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

      如何开启BFC

      1、设置浮动

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

      2、将元素转成行内块

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

      3、overflow属性 非visible值

      副作用最小，建议使用

      4、开启绝对定位

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

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

1. 使用相对单位：可以使用相对单位如 em、rem 或者百分比来设置字体大小，这样可以相对于父元素或者根元素进行缩放，而不会受到浏览器的最小字体限制。

2. 使用 transform 进行缩放：可以使用 CSS3 的 transform 属性对文字进行缩放，例如 transform: scale(0.8); 可以将文字缩小到原来的 80%。

3. 使用 SVG：将文字作为 SVG 图像来显示，这样可以绕开浏览器对于文字最小字号的限制。

4. 使用图片或图标字体：将小于 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 应用程序开发的状态管理模式。它主要用于集中管理应用程序中的所有组件的状态，并以一种可预测的方式进行状态的修改和管理。

1. State（状态）：应用程序中需要集中管理的状态数据，类似于组件中的 data。

2. Getters（获取器）：用于从 state 中派生出一些状态，类似于组件中的计算属性。

3. Mutations（突变）：用于修改 state 中的数据，必须是同步函数。

4. Actions（动作）：用于提交 mutations，可以包含任意异步操作。

5. Modules（模块）：用于将 store 分割成模块，每个模块拥有自己的 state、getters、mutations、actions。

2 Vue 如何定义指令

全局方式

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

局部方式

// 在组件中定义局部指令
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 放在包裹元素上，或者使用计算属性或方法来过滤需要渲染的列表数据。

可以这样使用

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