前端面试题css

CSS

CSS 属性是否区分大小写?

CSS 属性名和属性值在大多数情况下是不区分大小写的,但也有少数例外情况,如 font-variant 和 text-decoration 等属性与其值中的某些字母是区分大小写的。建议在编写 CSS 代码时还是严格遵守大小写以避免不必要的错误。

CSS的盒模型?

CSS 盒模型包括标准盒模型和IE盒模型。其中标准盒模型(box-sizing: content-box;)的宽度和高度只包括内容的宽度和高度;而IE盒模型(box-sizing: border-box;)的宽度和高度则包括了内容、内边距和边框的宽度和高度。这两种盒模型的主要区别在于计算元素宽度和高度时所涉及的内容不同。

link与@import的区别

<link>@import都可以用来引入外部资源,如CSS文件,但是它们之间有以下区别:

  1. 引入方式:<link>是HTML标签,@import是CSS提供的一种方式。
  2. 加载顺序和性能:<link>在页面载入时同时加载,@import在页面载入完成后加载。
  3. 定义方式:<link>可以在文档头部定义,也可以在文档中任何地方定义,@import只能在样式表中定义。
  4. 加载方式:<link>可以同时加载多个外部样式表,而@import必须一条一条地执行。
  5. 附加功能:link标签支持添加一些额外属性,如mediatitle等,用于指定媒体类型或提供样式表的描述。@import不支持这些附加功能。
  6. 可控性:<link>支持动态插入,而@import不支持。

元素垂直居中的方式有哪些?

  1. 使用flexbox布局,通过设置父元素的align-items属性为center实现元素垂直居中。
  2. 使用grid布局,可以通过设置网格项的align-self属性为center实现元素垂直居中。
  3. 使用position和transform属性,设置元素的top和left属性为50%,并使用transform属性的translate()函数将元素向上和左移动自身高度和宽度的一半,就可以实现元素垂直居中。
  4. 使用表格布局,将元素放入一个单元格中,并设置单元格的vertical-align属性为middle实现元素垂直居中。

文本垂直居中的方式有哪些?

  1. 使用行高(line-height)属性,将行高设置为等于容器的高度减去文本行高,再将文本的行高设置为容器高度。
  2. 使用弹性盒子(flexbox)布局,在容器上设置 display:flex 和 align-items:center 属性。
  3. 使用网格布局(grid)将文本放置在居中单元格中。
  4. 使用绝对定位(absolute positioning)属性,并将文本的 top 和 bottom 都设置为 0,再设置 margin:auto 来水平居中

CSS 选择器的优先级是如何计算的?

  1. !important优先级最高
  2. 标签内样式:即在 HTML 标签内部使用 style 属性设置的样式,优先级第二高。
  3. ID选择器:以 # 符号开头,指定某个元素的唯一标识符,比如 #header,优先级第三高。
  4. 类选择器、属性选择器和伪类选择器:包括 .class、[attr]、:hover 等,优先级第四高。
  5. 元素选择器和伪元素选择器:包括 div、span、:before 等,优先级最低。

在比较优先级时,遵循“从左到右,从高到低”的原则,也就是选择器中每增加一项就会降低一级别的优先级。如果两个选择器的优先级相同,则后面的选择器优先级更高。

请阐述块格式化上下文(Block Formatting Context)、工作原理以及形成条件?

块格式化上下文(Block Formatting Context,BFC)是一个独立的渲染区域,在这个区域内,元素的布局和外部元素互不影响。BFC是 Web 页面布局中的一种重要机制,主要用于控制块级元素的布局及其内部元素的排列方式。

BFC的工作原理:

  1. 内部的块级盒子会在垂直方向一个接一个放置。
  2. 块级盒子的垂直间距(margin)会发生折叠。相邻的块级盒子的上下外边距会取最大值,而非相加。
  3. BFC的区域不会与浮动盒子重叠。在计算布局时,BFC会考虑浮动元素的占用空间,从而避免与浮动元素重叠。
  4. 计算BFC的高度时,浮动元素也参与计算。
  5. BFC是一个独立的容器,外部元素对其内部元素布局没有影响;同样,BFC内部元素的布局也不会影响外部元素。

形成BFC的条件:

要创建一个BFC,需要满足以下条件之一:

  1. 根元素(<html>)。
  2. 浮动元素(float属性为leftright)。
  3. 绝对定位元素(position属性为absolutefixed)。
  4. 内联块(display属性为inline-block)。
  5. 表格单元格(display属性为table-cell)。
  6. 表格标题(display属性为table-caption)。
  7. 匿名表格单元格(display属性为tabletable-rowtable-row-grouptable-header-grouptable-footer-grouptable-columntable-column-group)。
  8. 元素的overflow属性值不为visible(例如,autoscrollhidden)。
  9. 弹性盒子(display属性为flexinline-flex)。
  10. 网格容器(display属性为gridinline-grid)。
  11. 多列容器(column-countcolumn-width属性不为auto)。
  12. contain属性值为layoutpaintstrict

通过满足以上条件之一,可以创建BFC,实现独立渲染区域。在实际应用中,BFC有助于解决外边距折叠、浮动元素引起的布局问题等。

请阐述z-index属性,并说明如何形成层叠上下文(stacking context)

z-index属性是CSS中用于控制元素在页面中的堆叠顺序(即在z轴上的顺序)的属性。具有较高z-index值的元素会覆盖较低z-index值的元素。需要注意的是,z-index属性只适用于具有定位属性(position属性值为relativeabsolutefixed)的元素。

层叠上下文(Stacking Context)是一个抽象概念,它定义了一个元素在z轴上的层次。在同一个层叠上下文中,元素的堆叠顺序由z-index属性控制。层叠上下文可以嵌套,形成一个层叠上下文树。层叠上下文解决了多个元素重叠时的优先级显示。

形成层叠上下文的条件:

  1. 根元素(<html>)。
  2. z-index值不为auto的定位元素(position属性值为relativeabsolutefixed)。
  3. z-index值不为auto的弹性盒子(display属性值为flexinline-flex)的直接子元素。
  4. z-index值不为auto的网格容器(display属性值为gridinline-grid)的直接子元素。
  5. opacity属性值小于1的元素。
  6. transform属性值不为none的元素。
  7. filter属性值不为none的元素。
  8. perspective属性值不为none的元素。
  9. will-change属性值指定了任意形成层叠上下文的属性的元素。
  10. contain属性值为paintstrict的元素。
  11. mix-blend-mode属性值不为normal的元素。
  12. isolation属性值为isolate的元素。

满足以上任意条件之一的元素都会创建一个新的层叠上下文。在层叠上下文中,元素会根据其z-index值和其他因素进行堆叠。层叠上下文有助于更好地控制元素的堆叠顺序,解决元素覆盖和遮挡的问题。

CSS 有哪些继承属性?

  1. 文本和字体相关属性:
  • color
  • font-family
  • font-size
  • font-weight
  • font-style
  • font-variant
  • letter-spacing
  • line-height
  • text-align
  • text-indent
  • text-transform
  • white-space
  • word-spacing
  1. 列表样式相关属性:
  • list-style-type
  • list-style-position
  • list-style-image
  1. 表格布局相关属性:
  • border-collapse
  • border-spacing
  • caption-side
  • empty-cells
  • table-layout
  1. 其他可继承属性:
  • visibility
  • cursor
  • quotes
  • text-decoration
  • text-shadow
  • word-break
  • word-wrap
  • writing-mode
  • direction

有哪些清除浮动的技术,都适用哪些情况?

  1. 使用clear属性: 在浮动元素后添加一个空元素,然后使用CSS的clear属性来清除浮动。适用于简单布局和较早的浏览器版本。

    ...
  2. 父元素使用overflow属性: 为父元素添加overflow: autooverflow: hidden属性。此方法可以使父元素自动计算其高度,包括浮动元素。适用于不需要显示滚动条的布局。

    .container {
    overflow: auto;
    }

  3. 使用伪元素::after: 为父元素添加::after伪元素,并设置clear: both。这种方法不需要额外的HTML元素。适用于现代浏览器和简洁的HTML结构。

    .container::after {
    content: “”;
    display: table;
    clear: both;
    }

  4. 使用Flexbox布局: 将父元素的display属性设置为flex。这会使所有子元素成为弹性项,并且不再需要清除浮动。适用于现代浏览器和需要使用弹性布局的场景。

    .container {
    display: flex;
    }

  5. 使用Grid布局: 将父元素的display属性设置为grid。这会使所有子元素成为网格项,并且不再需要清除浮动。适用于现代浏览器和需要使用网格布局的场景。

    .container {
    display: grid;
    }

在实际项目中,选择哪种清除浮动的技术取决于项目的具体需求、浏览器兼容性和布局类型。现代项目通常更倾向于使用Flexbox或Grid布局来解决浮动问题。

响应式布局有哪些

响应式布局是一种使网站能够自动适应不同屏幕尺寸和设备类型的设计方法。以下是一些常见的响应式布局技术:

  1. 流式布局(Fluid Layout): 使用百分比来定义元素的宽度,使元素随浏览器窗口大小变化而自动调整宽度。这种布局可以在一定程度上适应不同屏幕尺寸,但在极小或极大屏幕上可能无法提供最佳用户体验。
  2. 弹性布局(Flexible Layout): 使用CSS3中的弹性盒子(Flexbox)布局模型,可以轻松创建自适应大小和顺序的布局。弹性布局可以根据屏幕尺寸自动调整元素的大小和排列,提供更好的响应式体验。
  3. 网格布局(Grid Layout): 使用CSS3中的网格布局(Grid)模型,可以创建复杂的二维布局。网格布局允许在水平和垂直方向上自由排列和调整元素,从而实现高度自适应的响应式设计。
  4. 媒体查询(Media Queries): 使用CSS3的媒体查询功能,可以针对不同屏幕尺寸、分辨率和设备类型应用特定的样式。结合流式布局、弹性布局和网格布局,媒体查询可以实现更精确和全面的响应式设计。
  5. 自适应图片(Responsive Images): 使用srcsetsizes属性和<picture>元素,可以让浏览器根据设备像素比(DPR)和屏幕尺寸选择合适的图片资源。这样可以在不同设备上加载适当大小的图片,提高性能并保持视觉效果。
  6. 移动优先设计(Mobile-first Design): 从移动设备的视角开始设计,然后逐步扩展到平板和桌面设备。这种设计方法强调简单、清晰和高效,可以提高跨设备的用户体验。

在实际项目中,通常会综合运用以上技术来实现响应式布局。这些技术可以使网站在不同设备和屏幕尺寸下保持良好的用户体验和视觉效果。

讲一下三栏布局实现?圣杯布局、双飞翼布局和flex布局

三栏布局是指一个网页由三个栏目组成的布局,分别是左栏、右栏和中间栏。下面是三种实现三栏布局的方法:

  1. 圣杯布局

圣杯布局是一种使用浮动和负边距实现的三栏布局。中间栏先放在html结构中,使用负边距将左右栏移动到中间栏的两侧,再使用相对定位将左右栏拉回原来的位置。这种布局可以使得中间栏优先渲染,兼顾SEO和用户体验。

  1. 双飞翼布局

双飞翼布局也是一种使用浮动和负边距实现的三栏布局。与圣杯布局不同的是,左右栏使用margin负值撑开中间栏的宽度。这种布局与圣杯布局相比,代码更简单易懂。

  1. Flex布局

Flex布局是CSS3引入的一种新的布局方式,通过flex容器和flex项目的属性设置,可以轻松实现三栏布局。设置左右栏的宽度为固定值,中间栏的宽度使用flex-grow属性自动填充。这种布局适用于移动端和PC端,具有响应式的特点。

使用过哪些CSS预处理器?它们有什么优劣?

Less和Sass这两个常见的CSS预处理器。它们的优势是可以使用变量、嵌套规则和函数等功能,可以更简单更高效地编写CSS代码。缺点是需要进行额外的预处理工作,增加了开发成本。

如何解决CSS样式在不同浏览器中的兼容性问题?

解决CSS样式在不同浏览器中的兼容性问题可以使用一些通用的方法,如使用CSS Reset,避免使用CSS Hack和浏览器前缀,使用标准的组件库,尽量使用标准的CSS属性和属性值等。

如何制作一个自适应的正方形?

在外层容器内创建一个正方形元素,并设置padding-bottom为100%。这里的关键是padding-bottom以父元素的宽度为基准计算,因此当设置为100%时,它将等于父元素的宽度,从而保证正方形的宽高相等。

<div class="square-container"><div class="square"></div>
</div>.square {position: absolute;top: 0;left: 0;width: 100%;padding-bottom: 100%; /* 确保正方形的高度等于宽度 */background-color: #f00; /* 设置背景颜色以便观察效果 */
}

讲讲margin塌陷和margin合并以及解决方案?

margin塌陷margin合并 都是 CSS 中描述 margin 行为的术语。它们分别指 margin 在不同场景下的特殊表现。

  1. Margin塌陷:Margin塌陷是指当一个元素的上外边距(margin-top)和相邻的另一个元素的下外边距(margin-bottom)相遇时,它们之间的距离实际上等于两个外边距中的较大值,而不是它们的总和。这种现象主要发生在具有相邻兄弟元素的块级元素之间。
  2. Margin合并:Margin合并是指在父子元素之间发生的现象。当一个元素的外边距与其父元素的外边距相遇时,它们之间的距离实际上等于两个外边距中的较大值,而不是它们的总和。Margin合并通常发生在没有边框、内边距或行内内容分隔的父元素与其第一个或最后一个子元素之间。

解决方案:

针对 margin 塌陷和合并的现象,有以下几种解决方案:

  1. 使用内边距(padding):如果适用,可以使用内边距代替外边距来调整元素之间的距离。内边距不会发生塌陷或合并。
  2. 添加边框(border)或内边距(padding):在父子元素间的 margin 合并问题上,可以通过给父元素添加一个边框或一个很小的内边距来阻止 margin 合并。
  3. 使用 BFC(块格式化上下文):创建一个新的 BFC(如通过设置 overflow 属性为 autohidden)可以防止父子元素间的 margin 合并。
  4. 使用伪元素:可以通过在两个相邻的兄弟元素之间插入一个透明的伪元素(如 ::before::after),并为其添加 display: inline-block; 属性来防止兄弟元素间的 margin 塌陷。
  5. 避免使用外边距:在某些情况下,可以使用其他布局技术(如 Flexbox 或 Grid)来调整元素之间的距离,从而避免 margin 塌陷和合并的问题。

了解 margin 塌陷和合并现象以及如何解决这些问题可以帮助你更好地控制布局和元素间距。

如何实现一个三角形?

使用 CSS 创建一个三角形的常见方法是利用边框(border)属性。具体操作如下:

  1. 首先,创建一个宽高为0的元素(如 div),这样它的内容区域将不占据任何空间。
  2. 为该元素设置透明边框,这样它的边框也不会显示出来。
  3. 根据你需要的三角形方向,设置一个边框颜色,使该边框变得可见。

以下是一个创建向上的三角形的示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>.triangle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
</style>
</head>
<body><div class="triangle"></div>
</body>
</html>

在这个示例中,我们创建了一个名为 .trianglediv 元素。我们将其宽度和高度设置为 0,然后为其添加了左、右和底边框。左右边框设置为透明,底边框设置为红色。这将创建一个向上的红色三角形。

如何画一条0.5px的线

要在屏幕上绘制一条 0.5px 的线,可以使用 CSS 的伪元素 ::before::after,并设置它们的尺寸和缩放(scale)。以下是一个绘制 0.5px 水平线的示例:

.half-pixel-line {position: relative;display: inline-block;width: 100%;height: 1px;
}.half-pixel-line::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 1px;background-color: black;transform-origin: left top;transform: scaleY(0.5);
}

视差滚动效果的原理?

视差滚动效果(Parallax Scrolling)是一种视觉设计技巧,通过在页面滚动时以不同速度移动前景和背景元素,从而产生深度感和动态效果。这种效果可以使网页看起来更有趣、更具吸引力。

视差滚动效果的原理在于,当用户滚动页面时,页面上的不同元素(例如前景、背景、文字等)以不同的速度移动。这些速度差使得靠近观察者的元素(前景)看起来移动得更快,而远离观察者的元素(背景)看起来移动得更慢。这种相对运动产生了一种错觉,使用户感觉到页面的不同部分之间有深度关系,从而增强了视觉体验。

要实现视差滚动效果,可以使用以下方法之一:

  1. 纯 CSS 方法:利用 CSS3 的 background-attachment 属性设置为 fixed。这种方法简单易实现,但仅适用于背景图像,并且在某些浏览器或设备上可能存在兼容性问题。
  2. JavaScript 方法:通过监听页面滚动事件,根据滚动位置动态调整元素的位置。这种方法更灵活,可以应用于任何元素,并且可以实现更复杂的视差效果。通常使用 JavaScript 库(如 Rellax.js、Parallax.js 等)来简化开发过程。

需要注意的是,过多或不合适的视差滚动效果可能会导致页面性能下降、用户体验受损,因此在实现视差滚动效果时要保持适度。

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

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

相关文章

白龙地铁消费项目(地铁消费系统,包括用户端、管理端)

大一学的C#可视化项目文件&#xff0c;所有功能均可使用。可以直接下载 下方是演示照片

sigmoid softmax优化

1.前言 最近在搞模型部署发现&#xff0c;推理速度不能满足我们需求&#xff0c;于是最近学习了优化算子技巧&#xff0c;学到了sigmoid&#xff0c;softmax算子优化&#xff0c;真的数学之美。2.sigmoid算子优化 一.算子优化图 我们根据sigmoid公式&#xff0c;我们进行求反…

.NET 8 网络改进

作者&#xff1a; Mňa - Software Engineer, .NET Natalia Kondratyeva - Software Engineer, .NET 排版&#xff1a;Alan Wang 随着新的 .NET 版本的发布&#xff0c;发表有关网络空间中新的有趣变化的博客文章已经成为一种传统。今年&#xff0c;我们要介绍 HTTP 部分的变化…

Python RCL 调试劳德巴赫

Python RCL 调试劳德巴赫 比较旧的调试方式是TRACE32 Remote API, 看起来比较麻烦 新的是RCL trace32的安装路径下有官方的python教程, 用浏览器可以打开 <path>/demo/api/python/rcl/doc/html/index.html 需要先安装python库, 也在trace32安装路径下 <path>/de…

谷歌公布 2023 年最受欢迎的 Chrome 扩展

2023年&#xff0c;谷歌公布了最受欢迎的Chrome扩展&#xff0c;共有12款涵盖了多个领域&#xff0c;从提升工作效率到游戏娱乐。这些扩展旨在增强用户的浏览体验和生产力。 Scribe 功能&#xff1a;使用AI记录工作流程并创建逐步指南。 特点&#xff1a;自动记录和生成详细…

【完整项目】基于Python+Tkinter+FFD(free-form deformations)的2D彩色图像实时网格自由变形软件的设计与实现

文章目录 一、效果展示二、前言介绍三、软件使用说明3.1 环境配置3.2 文件结构3.3 准备工作 四、快速开始五、主要思路算法思路网格变形和实时操作思路 六、总结与反思七、代码链接八、其他完整项目 一、效果展示 校正比萨斜塔&#xff1a; 人脸变形&#xff1a; 图像拼接结果…

【运维】大日志文件按日期划分方法的改进及思考

之前由于运维需求&#xff0c;需要对一个大日志文件按照日期进行划分&#xff0c;将每天的日志写入一个单独的文件中。 刚开始接到这个需求后&#xff0c;我浏览了一遍日志文件&#xff0c;发现里面只有11月17号到11月22号的日志&#xff0c;天数不多&#xff0c;可以尝试手动…

conan 入门(三十七):conan 2.x通过定义环境变量(environment)执行make编译只有Makefile的项目(erpcgen)

之前一篇博客《conan 入门(三十四):conan 2.x实现对只有Makefile的项目(erpcgen)的封装示例》介绍如何用AutotoolsToolchain,Autotools实现来编译只有Makefile的项目&#xff0c;因为Autotools.make,Autotools.install方法就是执行make来编译项目。 我原本是想用self.run来执行…

C# 读取Word表格到DataSet

目录 功能需求 Office 数据源的一些映射关系 范例运行环境 配置Office DCOM 关键代码 组件库引入 ​核心代码 杀掉进程 总结 功能需求 在应用项目里&#xff0c;多数情况下我们会遇到导入 Excel 文件数据到数据库的功能需求&#xff0c;但某些情况下&#xff0c;也存…

基于VUE3+Layui从头搭建通用后台管理系统(前端篇)十七:演示功能模块相关功能实现

一、本章内容 本章实现常见业务功能,包括文章管理、商品管理、订单管理、会员管理等功能。 1. 详细课程地址: https://edu.csdn.net/course/detail/38183 2. 源码下载地址: 点击下载 二、界面预览 三、开发视频 3.1 B站视频地址:

Jenkins 自动设置镜像版本号

使用Jenkins环境变量当作镜像版本号 这样version变量就是版本号,在镜像构建的过程中可以使用 docker build 之后&#xff0c;如果有自己的镜像库&#xff0c;肯定要docker push 一下 至于部署的步骤&#xff0c;一般需要stop并删除原有的容器.我这里用的是docker-compose。同样…

如何使用 pnpm 实现前端 Monorepo项目管理

前言 随着软件开发项目变得越来越庞大和复杂&#xff0c;如何有效管理和维护代码库成为了一个重要的问题。一种流行的解决方案是 Monorepo&#xff0c;也就是在一个版本控制系统中管理所有的项目代码。 什么是 Monorepo Monorepo 是一种项目代码管理方式&#xff0c;指单个仓…

PHP-8.1.0-dev 后门命令执行漏洞复现_zerodiumvar_dump

0x00漏洞描述 PHP 8.1.0-dev 版本在2021年3月28日被植入后门&#xff0c;但是后门很快被发现并清除。当服务器存在该后门时&#xff0c;攻击者可以通过发送User-Agentt头来执行任意代码。 0x01影响范围 PHP 8.1.0-dev 0x02环境搭建 1、本次环境搭建使用vulhub中的docker环…

加速 SQL 查询的 9 种方法

SQL 是开发和查询数据库的主要语言&#xff0c;但它有一些怪癖。在我的上一篇文章中&#xff0c;我分享了 7 个需要避免的 SQL 错误。现在&#xff0c;让我们来看看编写更快的 SQL 查询的 9 个最佳实践。 更快 SQL 查询的 9 个最佳实践 仅检索您需要的列 使用 CASE 而不是 UP…

PPT中加入页码

PPT中加入页码 文章目录 简单版本样式更改 简单版本 PPT中插入页码&#xff0c;基础的就是在“插入”选项卡中单机“幻灯片编号”即可 样式更改 然而&#xff0c;就像我们做幻灯片不满足于白底黑字一样&#xff0c;页码也总不能是默认的样式。 比如&#xff0c;在页码下面…

2023年全国省市区县行政区划矢量数据(含10段线)

2023年&#xff0c;中国地图面貌发生了重大变化&#xff0c;领土面积由960万平方公里扩大到1045万平方公里&#xff0c;九段线改为了十段线。 因此在使用地图的时候&#xff0c;特别是做全国的地图的时候&#xff0c;一定需要最新的行政界限&#xff0c;今天就将最新的省市县行…

http请求超时 ,用PHP如何解决的?

当进行HTTP请求时&#xff0c;有时候可能会遇到请求超时的情况。为了解决这个问题&#xff0c;你可以考虑以下几个方面&#xff1a; 设置脚本的最大执行时间&#xff1a; 在PHP中&#xff0c;可以使用set_time_limit函数来设置脚本的最大执行时间。该函数接受一个以秒为单位的整…

串口发送控制命令,实现一些外设LED 风扇 马达

main.c #include "uart4.h"int main(){char a;char buf[128];uart4_config();while (1){/* //接收一个字符数据agetchar();//发送接收的字符1putchar(a1);putchar(\r);putchar(\n); */gets(buf); // 读取字符串//puts(buf); // 输出字符串if(strcmp(buf,"l…

linux无法访问共享目录,ls hgfs失败

刚在新买的华为电脑上安装ubuntu20&#xff0c;共享文件出现各种问题&#xff1a; dlubuntu:/mnt$ ls ls: cannot access hgfs: Permission denied hgfs 解决方法&#xff1a; 1.首先输入vmware-hgfsclient&#xff0c;看看是否共享文件夹已经建立&#xff0c;没有的话去参考…

在Vue3中使用qrcode库实现二维码生成

本文主要介绍在Vue3中使用qrcode库实现二维码生成的方法。 目录 一、基础用法实现二、toDataURL()方法三、toCanvas()方法四、create()方法五、QRCodeRenderersOptions()方法 在Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑。常用的库有 qrcode和 vue-qrcode…