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>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/599956.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

OVF简介（Open Virtualization Format：开放虚拟化格式 ）

OVF简介（Open Virtualization Format：开放虚拟化格式 ）

OVF&#xff08;Open Virtualization Format&#xff1a;开放虚拟化格式 &#xff09; 开源虚拟化格式OVF&#xff08;Open Virtualization Format&#xff09;文件是一种开源的文件规范&#xff0c;它描述了一个开源、安全、有效、可拓展的便携式虚拟打包以及软件分布格式。 …
阅读更多...
Unity 使用Sprite绘制一条自定义图片的线

Unity 使用Sprite绘制一条自定义图片的线

Unity 使用Sprite绘制一条自定义图片的线 前言项目场景布置代码编写总结 运行效果感谢 前言 遇到一个需要绘制自定义形状的需求。那只能利用Sprite来绘制一条具有自定义图片的线&#xff0c;通过代码动态设置起点、终点以及线宽&#xff0c;实现灵活的线条效果。 项目 场景…
阅读更多...
c++属于同一个类的不同对象之间可相互访问private和protected成员

c++属于同一个类的不同对象之间可相互访问private和protected成员

先看一个代码例子&#xff1a; #include <stdio.h>class A { private:char* name;void printA_Name() const {printf(name);} public:A(char* name) {this->name name;}void printA_Name(const A& a) {printf(a.name);}void printA_Name2(const A& a) {a.pr…
阅读更多...
【Linux Shell】6. echo 命令

【Linux Shell】6. echo 命令

文章目录 【 1. 显示普通字符串 】【 2. 显示转义字符 】【 3. 显示变量 】【 4. 显示换行 】【 5. 显示不换行 】【 6. 显示命令执行结果 】 Shell 的 echo 指令用于字符串的输出。命令格式&#xff1a; echo string【 1. 显示普通字符串 】 #!/bin/bashecho "It is a …
阅读更多...
arr.prototype 数组的方法

arr.prototype 数组的方法

1.forEach 作用:遍历这个数组 代码&#xff1a; let arr [10, 20, 30, 40, 50];arr.forEach((item) > {console.log(item);}); 返回值:没有返回值 2.fiflter 作用:过滤数组 代码&#xff1a; let arr [10, 20, 30, 40, 50];let newArr arr.filter((item) > {retu…
阅读更多...
机器学习（三） -- 特征工程（1）

机器学习（三） -- 特征工程（1）

系列文章目录 机器学习&#xff08;一&#xff09; -- 概述 机器学习&#xff08;二&#xff09; -- 数据预处理&#xff08;1-3&#xff09; 机器学习&#xff08;三&#xff09; -- 特征工程&#xff08;1-2&#xff09; 未完待续…… 目录 系列文章目录 前言 一、特征…
阅读更多...
全视通-医院智能视讯系统 病房视讯系统解决方案 智能医院对讲系统信息发布系统

全视通-医院智能视讯系统 病房视讯系统解决方案 智能医院对讲系统信息发布系统

医院智能视讯系统解决方案 1、行业背景 对于患者来说现阶段各大医院的住院部大都面临同样的问题&#xff0c;例如患者就医缺乏精准化医疗&#xff0c;缺乏对患者的心理健康引导&#xff0c;缺乏多维度沟通渠道&#xff0c;缺乏多元增值服务等。 对于传统医院住院部病房&am…
阅读更多...
JVM篇：字符串常量池

JVM篇：字符串常量池

String类型字符串常量池问题 public class demo2 {public static void main(String[] args) {String s1 "a";String s2 "b";String s3 "ab";} } 对以上代码进行编译得到字节码文件后使用javap -c [字节码文件]反汇编得到以下信息 Constant…
阅读更多...
自定义标记

自定义标记

章节目录&#xff1a; 一、概述二、使用自定义标记三、注册自定义标记3.1 创建文件3.2 修改文本编码格式 四、执行测试五、结束语 一、概述 pytest 可以支持自定义标记&#xff0c;自定义标记可以把一个 web 项目划分多个模块&#xff0c;然后指定模块名称执行。譬如我可以标明…
阅读更多...
企业邮箱发送会议邀请：简单高效的邮件安排技巧与指南

企业邮箱发送会议邀请：简单高效的邮件安排技巧与指南

通过电子邮件安排会议是工作中的常见做法。这也是确认口头安排的会议的一种有益方式。在本视频中&#xff0c;我们将详细介绍此类电子邮件的基本部分&#xff01; 您可能出于多种原因需要安排会议&#xff0c;例如安排面试、跟进业务主管或与潜在客户探讨项目。通过电子邮件有效…
阅读更多...
HarmonyOS4.0系统性深入开发14AbilityStage组件容器

HarmonyOS4.0系统性深入开发14AbilityStage组件容器

AbilityStage组件容器 AbilityStage是一个Module级别的组件容器&#xff0c;应用的HAP在首次加载时会创建一个AbilityStage实例&#xff0c;可以对该Module进行初始化等操作。 AbilityStage与Module一一对应&#xff0c;即一个Module拥有一个AbilityStage。 DevEco Studio默…
阅读更多...
高并发如何保证接口的幂等性？

高并发如何保证接口的幂等性？

前言 接口幂等性问题&#xff0c;对于开发人员来说&#xff0c;是一个跟语言无关的公共问题。本文分享了一些解决这类问题非常实用的办法&#xff0c;绝大部分内容我在项目中实践过的&#xff0c;给有需要的小伙伴一个参考。 不知道你有没有遇到过这些场景&#xff1a; 有时我…
阅读更多...
Open3D聚类算法

Open3D聚类算法

按照官网的例子使用聚类&#xff0c;发现结果是全黑的。 经过多次测试发现 eps3.3, min_points1这里是关键 min_points必须等于1否则无效果 import time import open3d as o3d; import numpy as np; import matplotlib.pyplot as plt#坐标 mesh_coord_frame o3d.geometry.Tria…
阅读更多...
css sourcemap 源代码映射

css sourcemap 源代码映射

vue.config.js css: {// Enable CSS source maps.sourceMap: process.env.NODE_ENV ! production, }重新运行&#xff1a;yarn serve 效果&#xff1a;
阅读更多...
在目标检测中，Anchor的庞大数量使得存在严重的不平衡问题。这里的不平衡指的是什么。

在目标检测中，Anchor的庞大数量使得存在严重的不平衡问题。这里的不平衡指的是什么。

问题描述&#xff1a; 在目标检测中&#xff0c;Anchor的庞大数量使得存在严重的不平衡问题。这里的不平衡指的是什么。 问题解答&#xff1a; 在目标检测任务中&#xff0c;Anchor指的是一组预定义的边界框或候选框&#xff0c;这些框以多个尺度和宽高比例组合而成。Anchor…
阅读更多...
【Linux Shell学习笔记】Linux Shell基本流程和基本语法

【Linux Shell学习笔记】Linux Shell基本流程和基本语法

第一部分&#xff1a;Linux Shell 简介 Shell 是一个用 C 语言编写的程序&#xff0c;它是用户使用 Linux 的桥梁。Shell 既是一种命令语言&#xff0c;又是一种程序设计语言。 Shell 是指一种应用程序&#xff0c;这个应用程序提供了一个界面&#xff0c;用户通过这个界面访问…
阅读更多...
计算机基础知识——数据的表示概述

计算机基础知识——数据的表示概述

目录 1 进制转换 1.1 二进制、十进制和十六进制等常用数制及其相互转换 1.2 十进制和二进制之间转换 1.3 二进制数与八进制数、十六进制数之间的转换 2 码值&#xff1a;原码、反码、补码 2.1 原码 2.2 反码 2.3 补码 3 浮点数表示 3.1 浮点数的运算 1 进制转换 1…
阅读更多...
MR实战：网址去重

MR实战：网址去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建网址去重映射器类5、创建网址去重归并…
阅读更多...
【Java】LockSupport原理与使用

【Java】LockSupport原理与使用

LockSupport&#xff1a; 关键字段&#xff1a; private static final sun.misc.Unsafe UNSAFE;private static final long parkBlockerOffset; Unsafe&#xff1a;"魔法类"&#xff0c;较为底层&#xff0c;在LockSupport类中用于线程调度(线程阻塞、线程恢复等)。…
阅读更多...
Windows安装部署nginx

Windows安装部署nginx

1、官网下载安装包&#xff1a; 官网地址&#xff1a;https://nginx.org/en/download.html 下载好后&#xff0c;解压即可&#xff1a; 在nginx的配置文件是conf目录下的nginx.conf&#xff0c;默认配置的nginx监听的端口为80&#xff0c;如果本地80端口已经被使用则修改成其…
阅读更多...
最新文章

Copyright @ 2022~2023