面试ssss

news2024/11/17 13:41:31


响应式布局

响应式布局是一种设计和开发网页的方法,使网页能够适应不同的设备和屏幕尺寸,提供更好的用户体验。它通过使用媒体查询(Media Queries)和弹性布局(Flexbox)等技术,根据设备的特性和视口(Viewport)大小来自动调整和重新排列页面的元素和内容。

响应式布局的目标是使网页在各种设备上都能呈现良好的布局和可用性,无论是在桌面电脑、笔记本电脑、平板电脑还是手机等移动设备上。

以下是一个简单的响应式布局的示例,假设我们有一个包含导航栏和内容区域的网页布局:

html

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    /* 基础样式 */
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    /* 导航栏样式 */
    .navbar {
      background-color: #333;
      color: #fff;
      padding: 10px;
    }
    /* 内容区域样式 */
    .content {
      padding: 20px;
    }
    /* 媒体查询 */
    @media (max-width: 768px) {
      /* 在小屏幕上调整布局 */
      .navbar {
        text-align: center;
      }
    }
  </style>
</head>
<body>
  <div class="navbar">导航栏</div>
  <div class="content">
    <h1>响应式布局示例</h1>
    <p>这是页面的内容。</p>
  </div>
</body>
</html>

在上述示例中,我们使用了媒体查询来针对小屏幕设备(最大宽度为768px)调整导航栏的样式。在小屏幕上,导航栏的文本居中显示,以适应较小的视口。

通过设置 <meta> 标签中的 viewport 属性,我们告诉浏览器对页面进行响应式布局。width=device-width 表示将视口宽度设置为设备的宽度,initial-scale=1.0 表示初始缩放级别为 1.0。

当在不同的设备上打开上述示例页面时,可以看到导航栏在桌面和小屏幕设备上有不同的布局效果,以适应不同的屏幕尺寸。

这只是一个简单的示例,实际的响应式布局可能涉及更复杂的调整和适配,包括使用媒体查询和弹性布局来改变元素的大小、位置和显示方式,以适应不同的设备和屏幕布局

深拷贝和浅拷贝

深拷贝和浅拷贝是关于对象(包括数组)复制的两个概念。

浅拷贝在复制对象属性的时候,复制的是指针(引用),所以,修改目标对象的属性值会影响到原对象的对应属性值 obj。assign

深拷贝

这个函数使用递归的方式对对象进行深拷贝。对于每个属性,如果是基本类型或null,则直接复制;如果是数组,则创建一个新的数组,并递归深拷贝每个元素;如果是对象,则创建一个新的对象,并递归深拷贝每个属性。

function deepCopy(obj) {
  if (typeof obj !== 'object' || obj === null) {
    // 对于基本类型和null,直接返回
    return obj;
  }
​
  let copy;
  
  if (Array.isArray(obj)) {
    // 处理数组
    copy = [];
    for (let i = 0; i < obj.length; i++) {
      copy[i] = deepCopy(obj[i]);
    }
  } else {
    // 处理对象
    copy = {};
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        copy[key] = deepCopy(obj[key]);
      }
    }
  }
​
  return copy;
}

  1. 如何实现一个new

1 创建一个新的对象obj

2 将对象与构建函数通过原型链连接起来

3 将构建函数中的this绑定到新建的对象obj上

4 根据构建函数返回类型作判断,如果是原始值则被忽略,如果是返回对象,需要正常处理
如果构造函数有返回值并且返回值是一个对象,则返回该对象;否则返回新对象实例

举个例子:

function Person(name, age){
    this.name = name;
    this.age = age;
}
const person1 = new Person('Tom', 20)
console.log(person1)  // Person {name: "Tom", age: 20}
t.sayName() // 'Tom'


手动实现一下
function mynew(Func, ...args) {
    // 1.创建一个新对象
    const obj = {}
    // 2.新对象原型指向构造函数原型对象
    obj.__proto__ = Func.prototype
    // 3.将构建函数的this指向新对象
    let result = Func.apply(obj, args)
    // 4.根据返回值判断
    return result instanceof Object ? result : obj
}
  1. 怎么理解回流和重绘

  2. 前端如何做性能优化

  3. 跨域是什么?怎么解决?isonp方式是如何做的

以下是使用 JSONP 的具体实现步骤:

  1. 客户端发送 JSONP 请求:在客户端(例如浏览器中的 JavaScript)中创建一个 <script> 标签,其中的 src 属性指向目标服务器的接口,并在 URL 中包含一个回调函数名作为参数。

function handleResponse(data) {
  // 处理响应数据
}
​
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.head.appendChild(script);
  1. 服务器返回响应:服务器接收到请求后,将数据包装在回调函数中返回给客户端。回调函数名由客户端指定,它会作为参数出现在响应中。例如,服务器响应如下:

handleResponse({ message: 'Hello, JSONP!' });
  1. 客户端处理响应:由于服务器返回的是一个包裹在回调函数中的 JavaScript 代码,浏览器会将该代码当作脚本执行,从而触发客户端事先定义的回调函数。通过在客户端定义一个与服务器返回的回调函数名相同的函数,可以在回调函数中处理服务器返回的数据。

javascript

function handleResponse(data) {
  // 处理响应数据
  console.log(data.message); // 输出:Hello, JSONP!
}

需要注意的是,JSONP 的使用有一些限制和安全风险:

  • JSONP 只支持 GET 请求,不支持其他 HTTP 方法。

  • 由于 JSONP 是通过动态创建 <script> 标签来实现的,因此无法像使用 XMLHttpRequest 或 Fetch API 那样获取完整的响应对象,例如状态码、响应头等。

  • JSONP 要求服务器能够返回一个包装在回调函数中的 JavaScript 代码,这可能会导致安全问题,因为服务器端的代码可以被注入到客户端页面中。

  1. 事件循环说说,宏任务和微任务有哪些

事件循环(Event Loop)是 JavaScript 中处理异步操作的机制。它负责管理任务队列(Task Queue)中的任务,并按照特定的执行顺序将它们执行。

宏任务:setTimeout setInterval Ajax DOM事件 微任务:Promise

事件循环的执行顺序如下:

事件循环的执行顺序是先执行同步任务,然后处理微任务队列,再执行异步任务,接着处理宏任务队列,最后再次处理微任务队列,然后进入下一个循环。微任务具有高优先级,会在下一个宏任务之前执行,这意味着微任务队列中的任务会在下一个宏任务执行之前完成。

事件循环的基本流程如下:

  1. 执行同步任务: 从调用栈中取出一个同步任务执行,直到调用栈为空或遇到异步任务。

  2. 执行微任务(Microtasks): 在同步任务执行完毕后,会检查微任务队列(也称为 Promise 队列)。如果存在微任务,事件循环会依次执行微任务直到微任务队列为空。微任务通常包括 Promise 的回调函数、MutationObserverprocess.nextTick 等。

  3. 执行宏任务(Macrotasks): 如果微任务队列为空,事件循环会从宏任务队列中选择一个任务执行。宏任务包括定时器回调函数(setTimeoutsetInterval)、事件回调函数(如用户交互事件、网络请求、文件读写等)等。

  4. 更新渲染(Update rendering): 如果浏览器需要重绘或重新布局页面,会执行相应的渲染操作。

  5. 重复步骤: 重复以上步骤,不断处理任务直到所有任务完成。

需要注意的是,微任务优先级高于宏任务,即在执行微任务队列之前不会执行下一个宏任务。这意味着微任务可以在同一次事件循环中立即执行,而宏任务需要等待下一次事件循环。

  1. this指向问题

// 全局上下文
console.log(this); // 输出全局对象 (window 或 global)

// 函数调用
function sayHello() {
  console.log(this);
}

sayHello(); // 输出全局对象 (window 或 global)

const obj = {
  name: 'John',
  greet: function() {
    console.log(this.name);
  }
};

obj.greet(); // 输出 "John"

function Person(name) {
  this.name = name;
  this.greet = function() {
    console.log('Hello, ' + this.name);
  };
}

const person1 = new Person('Alice');
person1.greet(); // 输出 "Hello, Alice"

const greet = person1.greet;
greet(); // 输出 "Hello, undefined" (非严格模式下),或抛出错误 (严格模式下)

const arrowFunc = () => {
  console.log(this);
};

arrowFunc(); // 输出全局对象 (window 或 global)

在 JavaScript 中,this 关键字用于引用当前执行上下文中的对象。它的值取决于函数被调用的方式和上下文。

  1. 全局上下文:
    当在全局作用域中使用 this 时,它将指向全局对象(浏览器环境中为 window 对象,Node.js 环境中为 global 对象)。

  2. 函数调用:
    在函数内部,this 的指向取决于函数的调用方式:

    • 作为函数调用时,this 指向全局对象(非严格模式下),或者是 undefined(严格模式下)。
    • 作为对象方法调用时,this 指向调用该方法的对象。
    • 作为构造函数调用时,this 指向新创建的对象实例。
    • 使用 call()apply()bind() 方法显式地指定 this 的值。
  3. 箭头函数:
    箭头函数的 this 在定义时就被绑定,它的指向始终是定义时所在的上下文,而不是运行时的调用方式。

  1. 了解axios的原理吗?怎么实现的

  2. js有哪些数据类型

  3. 箭头函数和普通函数的区别

  • this 的绑定:

    • 普通函数:每个函数都有自己的 this 值,它在运行时根据调用方式进行绑定。在普通函数内部,this 的值取决于函数是如何被调用的。
    • 箭头函数:箭头函数没有自己的 this 值,而是继承其父作用域的 this 值。箭头函数内部的 this 始终指向定义时所在的上下文的 this 值。
  • arguments 对象:

    • 普通函数:普通函数内部可以访问到特殊的 arguments 对象,该对象包含了函数被调用时传递的参数列表。
    • 箭头函数:箭头函数没有自己的 arguments 对象。如果需要访问参数,可以使用剩余参数语法 ...args 或者使用普通函数来获取 arguments 对象。
  • 构造函数:

    • 普通函数:普通函数可以用作构造函数,通过 new 关键字创建实例对象。
    • 箭头函数:箭头函数不能用作构造函数,无法通过 new 关键字创建实例对象。
  1. 前端缓存

  2. https和http的区别,http缓存有哪些,为什么要减少http的请求,https为什么比http更安全

  3. 异步任务分为哪些

宏任务和微任务

  1. 前端性能优化问题

  2. 垂直居中的方式

​

1 使用Flexbox布局:。这种方法适用于父元素和子元素都是块级元素的情况,这将使容器内的所有子元素都垂直和水平居中。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2 使用绝对定位和transform属性, left: 50%; top: 50%会使子元素的左上角在父元素的中心位置;

.parent {
  position: relative;
}
​
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

3 使用绝对定位和margin属性

.parent {
  position: relative;
}
​
.child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

​

  1. 怎么理解回流和重绘

回流(Reflow)和重绘(Repaint)是浏览器渲染过程中的两个重要概念

回流是跟据元素的样式和结构,确定其在页面上位置的过程,当元素的大小和位置发生变化时,就回触发回流,

  • 添加或删除可见的DOM元素
  • 元素的位置发生变化
  • 元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
  • 内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代
  • 页面一开始渲染的时候(这避免不了)
  • 浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)

重绘,确定位置之后,跟据其样式,将元素绘制到屏幕上的过程。

  • 颜色的修改

  • 文本方向的修改

  • 阴影的修改

避免,

  • 尽量减少对样式的频繁修改,最好一次性修改多个样式,或者使用 CSS 类进行批量修改。
  • 避免频繁访问布局信息(如 offsetTop、offsetWidth 等),因为这会导致强制回流。
  • 使用 CSS3 的 transform 属性来进行复杂的动画效果,它可以在不引起回流的情况下改变元素的视觉呈现。
  • 使用分离布局和样式的原则,避免样式改变引起布局的变化。
  • 合理使用 CSS 布局技术,如 Flexbox 和 Grid,它们可以更高效地处理元素布局
  • 如果想设定元素的样式,通过改变元素的 class 类名 (尽可能在 DOM 树的最里层)
  1. 元素显示和隐藏的方法有哪些

  • CSS 的 display 属性

    • 显示元素:element.style.display = 'block';element.style.display = '';
    • 隐藏元素:element.style.display = 'none';
  • CSS 的 visibility 属性

    • 显示元素:element.style.visibility = 'visible';
    • 隐藏元素:element.style.visibility = 'hidden'
  1. 内存泄露是什么,怎么导致的

  2. promise介绍

  3. 数组去重的方法?至少说出2种

  4. vue的双向数据绑定的原理

  1. 数据劫持(Data Observation):
    Vue 使用了一种称为「数据劫持」的技术来追踪数据的变化。它通过使用 Object.defineProperty() 方法,将数据对象的属性转换为 getter 和 setter。当访问或修改属性时,Vue 能够捕获到这些操作,并触发相应的更新。

  2. 监听器(Watcher):
    在 Vue 中,每个数据属性都有一个对应的监听器对象。监听器会订阅数据的变化,并根据变化触发相应的更新操作。当数据发生变化时,监听器会通知相关的视图进行更新。

  3. 模板编译(Template Compilation):
    Vue 的模板编译过程会解析模板中的指令(如 v-model),并生成对应的更新函数。这些更新函数能够在数据发生变化时,更新视图的内容。

  4. 视图更新:
    当数据发生变化时,监听器会收到通知,并触发视图的更新操作。这样,当用户在视图中修改数据时,数据会自动更新,反之亦然。

  1. 虚拟dom的理解

虚拟 DOM 的优势在于它能够提供一种高效的方式来管理和更新界面,减少直接操作真实 DOM 的成本。通过比较虚拟 DOM 树的差异,可以最小化对真实 DOM 的操作,提高性能和用户体验。

  1. vue的自定义指令

  2. 为什么data属性是一个函数而不是一个对象

  3. 图片懒加载和预加载

  4. 如何清除浮动

伪元素

可以使用伪元素在浮动元素的父元素中插入一个额外的元素,并设置其样式为 clear: both;

<div class="clearfix">
  <div class="float-left">浮动元素1</div>
  <div class="float-left">浮动元素2</div>
</div>

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

overflow:hidden

  1. BFC

BFC(块级格式化上下文)是一种页面渲染的 CSS 布局概念。它是一种独立的渲染区域,其中的元素按照一定规则进行布局和渲染

BFC 主要用于解决以下问题:

  1. 清除浮动(Clear Float):当父元素包含浮动元素时,父元素的高度会塌陷,导致无法正确包裹浮动元素。通过创建一个 BFC,可以使父元素包含浮动元素的布局正常显示,不再塌陷。

例子:

<div class="parent">
  <div class="float-left">Float Left</div>
  <div class="float-right">Float Right</div>
</div>
​
.parent {
  overflow: hidden;
}
​
通过设置 overflow: hidden;,.parent 元素成为一个 BFC,它会包裹内部的浮动元素,防止元素的高度塌陷。
  1. 阻止边距重叠(Margin Collapse):在普通流中,相邻的两个元素的上下边距可能会发生重叠。但是,位于不同的 BFC 中的元素的边距不会重叠,这可以用于控制边距的表现。

  2. 自适应两栏布局:通过创建两个相邻的 BFC 容器,可以实现一种自适应的两栏布局,其中一个容器可以固定宽度,另一个容器会自动填充剩余空间。

  3. 避免浮动元素覆盖文字:当文字环绕在浮动元素周围时,文字可能会被浮动元素覆盖。通过创建一个 BFC 容器来包裹文字,可以避免文字被浮动元素覆盖。

如何设置一个bfc , 一般用overflow:hidden 和flex盒子

.bfc-container {
  overflow: hidden;
}
​
.bfc-container {
  display: inline-block;
}
​
.flex-container {
  display: flex;
}
​

  1. git svn

  2. webpack

  3. CSS如何画一个三角形

.triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #000;
}

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

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

相关文章

【Django】django.core.exceptions.AppRegistryNotReady: Apps aren‘t loaded yet.

其中django后台manage.py入口程序报错&#xff0c;检索很多问题解决方案&#xff0c;这里记录下个人问题原因 1.django启动异常问题详情 django.core.exceptions.AppRegistryNotReady: Apps aren’t loaded yet. 2.问题原因 Python第三方包安装版本不一致或缺少依赖包&…

cdo 修改 calendar 为标准的格式

使用ncl脚本时出现警告&#xff1a;day_of_year: illegal calendar proleptic_gregorian 其原因是读取的降水nc文件是我手动合并生成&#xff0c;所以时间的calendar不是很标准&#xff0c;数据信息如下所示&#xff0c;可以发现Calendar是proleptic_gregorian&#xff0c;这…

互联网盲盒小程序模式,入局市场的渠道选择

近年来&#xff0c;盲盒吸引了无数的消费者&#xff0c;还打造了“万物皆可盲盒”的市场&#xff0c;成为了当下拥有巨大发展前景的行业之一&#xff01;当然&#xff0c;盲盒市场除了吸引消费者外&#xff0c;还获得了众多商家和创业者的青睐。 盲盒作为一种娱乐消费方式&…

C++ | Leetcode C++题解之第42题接雨水

题目&#xff1a; 题解&#xff1a; class Solution { public:int trap(vector<int>& height) {int n height.size();if (n 0) {return 0;}vector<int> leftMax(n);leftMax[0] height[0];for (int i 1; i < n; i) {leftMax[i] max(leftMax[i - 1], he…

linux 守护进程的实现

文章目录 1. 守护进程及实现步骤2. 使用fork 方式创建守护进程3. 使用daemon 函数创建 1. 守护进程及实现步骤 特点&#xff1a; 长期运行&#xff1a;守护进程是一种生存期很长的一种进程&#xff0c;它们一般在系统启动时开始运行&#xff0c;除非强行终止&#xff0c;否则…

《QT实用小工具·三十八》QT炫酷的菜单控件

1、概述 源码放在文章末尾 非常飘逸的 Qt 菜单控件&#xff0c;带有各种动画效果&#xff0c;用起来也十分方便。 无限层级&#xff0c;响应键盘、鼠标单独操作&#xff0c;支持单快捷键。 允许添加自定义 widget、layout&#xff0c;当做特殊的 QDialog 使用。 项目demo演示…

Python写个二维码

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、进入官网下载二、下载一下三.输入代码 前言 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、进入官网下载 官网 pip insta…

Stable Diffusion WebUI 使用 LoRA 调整风格——详细教程

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 大家好&#xff0c;我是水滴~~ 本教程旨在深入探讨 LoRA 模型的奥秘&#xff0c;涵盖其基本概念、独特作用以及实操指南。我们将从下载和使用LoRA的步…

配线架与交换机:了解差异和最佳用途

什么是配线架&#xff0c;它与交换机有何不同&#xff1f; 配线架是一种具有多个插孔的设备或单元&#xff0c;用于方便管理电缆连接。 它充当静态交换机&#xff0c;允许轻松连接或断开网络设备&#xff0c;并为所有电缆连接提供集中位置。 另一方面&#xff0c;Switch 是一种…

基于深度学习的车牌识别

如果你认为车牌只是车子的‘名字’&#xff0c;那么是时候让你见识一下&#xff0c;当科技赋予它‘超能力’时会发生什么&#xff1f; 上效果图&#xff1b; 这就是车牌识别的力量&#xff0c;下面是主函数代码&#xff1a; # -*- coding: UTF-8 -*- import argparse import …

为底图发愁? 这里有一份清爽又百搭的底图绘制方法!

图纸不够清爽美观&#xff1f; 图纸表达混乱&#xff0c;重点不够醒目&#xff1f; 图纸的颜色太难调了&#xff0c;怎么调都不满意&#xff1f; ...... 俗话说&#xff0c;好的底图是图纸成功的关键&#xff01; 绝大部分的图纸问题&#xff0c;都和底图有关&#xff01; …

【C语言__指针01__复习篇11】

目录 前言 一、什么是指针 二、计算机中常见的单位 三、CPU是怎样找到一块内存空间的 四、如何得到变量的地址 五、指针变量 六、解引用指针变量的作用 七、指针变量的大小 八、指针变量类型的意义 8.1 指针的解引用 8.2 指针-整数 九、void*指针 十、const修饰变…

自己写的爬虫小案例

网址&#xff1a;aHR0cDovL2pzc2NqZ3B0Lmp4d3JkLmdvdi5jbi8/dXJsPS92aWV3L3dvcmtpbmdVbml0L3dvcmtpbmdVbml0Lmh0bWw 这串代码能够爬取勘察单位企业的详细信息。 import requests import time import csv f open(勘察单位公司信息.csv,w,encodingutf-8,newline) csv_writer …

文件上传漏洞-白名单检测

如何确认是否是白名单检测 上传一张图片与上传一个自己构造的后缀&#xff0c;如果只能上传图片不能上传其它后缀文件&#xff0c;说明是白名单检测。 绕过技巧 可以利用 00 截断的方式进行绕过&#xff0c;包括 %00 截断与 0x00 截断。除此之外如果网站存在文件包含漏洞&…

自动备份的小软件

自动备份的小软件 前几天有个小姐姐和我说&#xff0c;他的硬盘坏了&#xff0c;但是他有没有备份&#xff0c;所以我决定做一个自动备份的软件。 软件整体是使用pythonpyqt5做到。 github链接 软件截图 使用效果 使用方法 教程 流程图 优势 可以很大程度上解决数据丢失…

基于__torch_dispatch__机制的dump方法

基于__torch_dispatch__机制的dump方法 1.参考链接2.原理3.代码4.效果 之前拦截torch和torch.Tensor的办法,在处理backward时,不能看到aten算子的细节.以下基于__torch_dispatch__机制的方案更节约代码,且能看到调用栈 1.参考链接 [原理] (https://dev-discuss.pytorch.org/t…

【vue2】实现微信截图(复制图片)在项目内可粘贴

需求 后台管理在上传图片地方需要将复制的图片粘贴上传 一、添加事件 在原有上传组件的基础上添加 paste事件 二、方法 onPaste(e) {const items (e.clipboardData || window.clipboardData).items;let blob null;for (let i 0; i < items.length; i) {if (items[i].ty…

related_name和related_query_name属性

在Django模型继承中&#xff0c;假如在外键或多对多字段中使用了related_name属性或related_query_name属性&#xff0c;则必须为该字段提供一个独一无二的反向名字和查询名字。但是&#xff0c;这样在抽象基类中一般会引发问题&#xff0c;因为基类中的字段都被子类继承并且保…

WEB攻防-IIS中间件PUT漏洞

IIS6.0 server在web服务扩展中开启了WebDAV&#xff08;Web-based Distributed Authoring and Versioning&#xff09;。WebDAV是一种HTTP1.1的扩展协议。它扩展了HTTP 1.1&#xff0c;在GET、POST、HEAD等几个HTTP标准方法以外添加了一些新的方法&#xff0c;如PUT&#xff0c…

【js】解决自动生成颜色时相邻颜色视觉相似问题的技术方案

解决自动生成颜色时相邻颜色视觉相似问题的技术方案 在进行大规模颜色生成时&#xff0c;特别是在数据可视化、用户界面设计等应用领域&#xff0c;一个常见的挑战是确保相邻颜色在视觉上具有足够的区分度。本文介绍的方法通过结合黄金分割比与饱和度、亮度的周期性变化&#…