深入理解CSS变量：高级技巧和最佳实践

前言

CSS 变量是一项强大的功能，它可以帮助开发人员更好地组织和管理样式表。在本文中，我们将深入探讨 CSS 变量的高级技巧和最佳实践，通过学习如何使用变量作为计算值、媒体查询和动态更改等方面，你将能够更好地利用 CSS 变量的强大功能。

一、概念

CSS 变量（也称为自定义属性）是一种在 CSS 中定义和使用的值，可以在整个样式表中重复使用。它们提供了一种灵活的方式来存储和管理样式中的值，使得样式的修改更加简单和可维护。

二、基本用法

CSS 变量的基本用法包括定义变量、使用变量和修改变量的值。

1. 定义变量

在 CSS 中，使用–前缀来定义变量。变量的命名可以由字母、数字、破折号和下划线组成，但必须以字母开头。变量的定义通常放在选择器的规则集内，或者在根元素（:root）中定义，以便全局使用。例如：

:root {
  --primary-color: #ff0000;
  --font-size: 16px;
}

2. 使用变量

使用变量时，需要使用 var() 函数将变量包裹起来。变量可以在任何可以使用 CSS 属性值的地方使用，例如颜色、尺寸、边距等。例如：

.element {
  color: var(--primary-color);
  font-size: var(--font-size);
}

3. 修改变量的值

变量的值可以在 CSS 中动态修改，以实现样式的变化。可以通过JavaScript或使用伪类（:hover、:focus等）来修改变量的值。例如：

.element:hover {
  --primary-color: #00ff00;
}

或者使用 JavaScript 来修改变量的值：

document.documentElement.style.setProperty('--primary-color', '#00ff00');

三、命名规范

当我们在 CSS 中使用变量时，为了避免与现有的 CSS 属性冲突，我们可以使用自定义的 CSS 变量，并为它们选择适当的命名规范。以两个横线（--）开头的属性被视为 CSS 变量。

以下是一些常见的 CSS 变量命名规范：

  • 使用有意义的名称：为了增加代码的可读性和可维护性，我们应该选择具有描述性的名称来命名 CSS 变量。这样可以使其他开发人员更容易理解变量的用途和含义；
  • 使用小写字母和连字符：CSS 变量的名称应该使用小写字母，并使用连字符（-）作为单词之间的分隔符。例如，--primary-color；
  • 使用命名空间：为了避免与其他变量冲突，可以使用命名空间来对变量进行分组。例如，--button-primary-color，其中 button 是命名空间；
  • 避免使用缩写和简写：尽量避免使用缩写和简写的变量名称，因为这可能会导致代码的可读性降低。选择具有描述性的名称，以便其他开发人员能够轻松理解变量的含义；
  • 使用一致的命名约定：在整个项目中保持一致的命名约定是很重要的。选择一种命名风格，并在整个项目中坚持使用它，这样可以提高代码的一致性和可读性。

总之，CSS 变量的命名规范应该注重可读性、可维护性和一致性。通过选择有意义的名称、使用小写字母和连字符、使用命名空间以及避免缩写和简写，我们可以更好地组织和管理 CSS 变量。

四、变量值类型

在 CSS 中，CSS 变量的值可以是各种不同的类型。不同的类型在使用上也会有细微的差别。

如果变量值是一个字符串，可以与其他字符串拼接，例如：

<!DOCTYPE html>
<html>

<style>
  :root {
    --primary-content: 'hello';
  }


  .box:after {
    content: '标题 : ' var(--primary-content)
  }
</style>

<body>
  <div class="box"></div>
</body>

</html>
  • 实现效果

在这里插入图片描述

如果变量值是数值，则不能与数值单位直接连用，例如：

在下面的代码中，我们在 box2 盒子使用 calc() 函数来执行数学计算，将变量 --primary-num 的值乘以 1 像素（1px）。这样，就可以将数值与单位进行结合，以实现正确的样式效果。通过这种方式，我们可以将数值与单位进行拼接，确保样式的正确性。而且 calc() 函数可以执行更复杂的数学计算，例如加法、减法、乘法和除法等。

<!DOCTYPE html>
<html>

<style>
  :root {
    --primary-num: 40;
  }

  .box1 {
    background: cadetblue;
    padding-top: var(--primary-num)px;
  }

  .box2 {
    background: chocolate;
    padding-top: calc(var(--primary-num) * 1px);
  }
</style>

<body>
  <div class="box1">内容1</div>
  <div class="box2">内容2</div>
</body>

</html>
  • 实现效果

在这里插入图片描述

如果变量值带有单位，就不能写成字符串，例如：

在下面的代码中，我们在 box1 盒子将带有单位的变量值定义为字符串。这是无效的，因为 CSS 属性期望的是数值单位，而不是字符串。这样的定义会导致样式无效或产生错误。因此，当变量值带有单位时，应该将其定义为数值，而不是字符串。这样可以确保变量在应用于 CSS 属性时能够正确地与单位进行结合。

<!DOCTYPE html>
<html>

<style>
  :root {
    --border-radius-box1: '20px';
    --border-radius-box2: 20px;
  }

  .box1 {
    background: chocolate;
    border-radius: var(--border-radius-box1);
  }

  .box2 {
    background: cornflowerblue;
    border-radius: var(--border-radius-box2);
  }
</style>

<body>
  <div class="box1">内容1</div>
  <div class="box2">内容2</div>
</body>

</html>
  • 实现效果

在这里插入图片描述

五、如何理解理解 :root 和 var()

:root 伪类：

  • :root 伪类选择器匹配文档树的根元素，通常是 <html> 元素；
  • 在 :root 伪类中定义的 CSS 变量可以在整个文档中全局使用；
  • 通过在 :root 伪类中定义变量，我们可以为整个文档设置全局的 CSS 属性值；
  • 例如，我们可以使用 :root 伪类定义全局的颜色、字体大小、断点值等。

var() 函数：

  • var() 函数用于引用和使用 CSS 变量的值；
  • 它接受一个参数，即要引用的 CSS 变量的名称；
  • var() 函数可以在任何 CSS 属性的值中使用，包括字体大小、颜色、边距等；
  • 通过使用 var() 函数，我们可以根据需要在不同的元素和选择器中使用相同的 CSS 变量值，实现统一的样式管理；
  • 例如，我们可以使用 var(--primary-color) 来引用全局定义的 --primary-color 变量。

CSS 变量的基本用法就是这样。通过定义、使用和修改变量的值，可以实现样式的重用、动态变化和全局控制。这使得 CSS 开发更加灵活和可维护。下面为大家提供三个案例，涵盖了定义变量、使用变量和修改变量的值的示例的完整代码。

案例 1

在这个案例中，我们定义了两个变量 --primary-color 和 --font-size，并将其应用于 .element 元素的颜色和字体大小。当鼠标悬停在 .element 元素上时，--primary-color 变量的值将变为绿色，--font-size 变量的值将变为 26px。

<!DOCTYPE html>
<html>

<head>
  <style>
    :root {
      --primary-color: #f88604;
      --font-size: 22px;
    }

    .element {
      color: var(--primary-color);
      font-size: var(--font-size);
    }

    .element:hover {
      --primary-color: rgb(0, 104, 202);
    }
  </style>
</head>

<body>
  <div class="element">Hello, CSS Variables!</div>
</body>

</html>
  • 实现效果

在这里插入图片描述

案例 2

在这个案例中，我们使用 JavaScript 来监听窗口的大小变化，并根据窗口宽度动态修改 CSS 自定义属性的值。在 updateStyles 函数中，我们通过 window.getComputedStyle 方法获取了 --breakpoint 的值，并根据窗口宽度判断是否应用响应式样式。

<!DOCTYPE html>
<html>

<head>
  <style>
    :root {
      --breakpoint: 300px;
      --font-size: 16px;
      --primary-color: #ff0000;
    }

    .element {
      font-size: var(--font-size);
      color: var(--primary-color);
    }
  </style>
  <script>
    function updateStyles() {
      var element = document.querySelector('.element');
      var breakpoint = getComputedStyle(document.documentElement).getPropertyValue('--breakpoint');

      if (window.innerWidth <= parseInt(breakpoint)) {
        element.style.setProperty('--font-size', '14px');
        element.style.setProperty('--primary-color', '#00ff00');
      } else {
        element.style.setProperty('--font-size', '16px');
        element.style.setProperty('--primary-color', '#ff0000');
      }
    }

    window.addEventListener('resize', updateStyles);
    window.addEventListener('DOMContentLoaded', updateStyles);
  </script>
</head>

<body>
  <div class="element">Responsive Text</div>
</body>

</html>
  • 实现效果

在这里插入图片描述

案例 3

在这个案例中，我们定义了一个变量 --primary-color，并将其应用于 .element 元素的颜色。通过 JavaScript 中的 changeColor 函数，我们可以通过点击按钮来修改 --primary-color 变量的值，从而改变 .element 元素的颜色。

<!DOCTYPE html>
<html>

<head>
  <style>
    :root {
      --primary-color: orange;
    }

    .element {
      color: var(--primary-color);
    }
  </style>
  <script>
    function changeColor() {
      document.documentElement.style.setProperty('--primary-color', 'blue');
      // document.documentElement.style.setProperty('root变量', '更改的值')
    }
  </script>
</head>

<body>
  <div class="element">Click the button to change color</div>
  <button onclick="changeColor()">点击改变颜色</button>
</body>

</html>
  • 实现效果

在这里插入图片描述

案例 4

在这个案例中，通过使用 CSS 变量，我们可以动态地控制按钮的样式，实现了鼠标跟踪效果。
在代码中，我们定义了两个 CSS 变量：--x 和 --y。这两个变量分别表示鼠标在按钮上的横坐标和纵坐标。通过 JavaScript 中的 setProperty 方法，我们可以根据鼠标移动事件的位置，实时地更新这两个变量的值。在 SCSS 部分，我们使用这两个 CSS 变量来确定鼠标跟踪效果的位置。通过将 --x 和 --y 应用到伪元素 ::before 的 left 和 top 属性上，我们可以让伪元素跟随鼠标的位置而移动。此外，我们还使用了 CSS 变量 --size 来控制伪元素的大小。当鼠标悬停在按钮上时，通过改变 --size 的值，我们可以实现一个渐变背景的动画效果。

<template>
  <div class="track-btn" @mousemove="handleMouseMove">
    <span>使用 CSS 变量让你的按钮更炫酷</span>
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseMove(e) {
      const btnStyle = e.target.style;
      btnStyle.setProperty("--x", `${e.offsetX}px`);
      btnStyle.setProperty("--y", `${e.offsetY}px`);
    },
  },
};
</script>

<style lang="scss">
.track-btn {
  position: relative;
  width: 400px;
  height: 50px;
  background-color: rgb(102, 219, 255);
  cursor: pointer;
  line-height: 50px;
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  color: #fff;
  overflow: hidden;

  span {
    position: relative;
    pointer-events: none;
  }

  &::before {
    --size: 0;
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background-image: radial-gradient(
      circle closest-side,
      rgb(0, 215, 82),
      transparent
    );
    content: "";
    transform: translate3d(-50%, -50%, 0);
    transition: width 200ms ease, height 200ms ease;
  }

  &:hover::before {
    --size: 400px;
  }
}
</style>
  • 实现效果

在这里插入图片描述

六、变量作用域

CSS 变量的作用域是定义它们的选择器的范围。在选择器内定义的变量只能在该选择器内部使用，而在全局作用域内定义的变量则可以在整个文档中使用。

全局作用域：

  • 在 :root 伪类中定义的 CSS 变量具有全局作用域；
  • :root 伪类选择器匹配文档树的根元素，通常是 <html> 元素；
  • 在 :root 伪类中定义的变量可以在整个文档中全局使用。
<!DOCTYPE html>
<html>

<head>
  <style>
    :root {
      --bg-color: rgb(88, 88, 186);
      --color: #33ca63;
    }

    div {
      background-color: var(--bg-color);
      color: var(--color);
    }

    span {
      background-color: var(--bg-color);
      color: var(--color);
    }
  </style>
</head>

<body>
  <div>
    <p>我在div内部</p>
  </div>
  <span>我在div外部</span>
</body>

</html>
  • 实现效果

在这里插入图片描述

局部作用域：

  • 在选择器内部或元素内部定义的 CSS 变量具有局部作用域；
  • 这些变量只能在定义它们的选择器或元素内部使用；
  • 局部作用域的变量会覆盖全局作用域中同名的变量。
<!DOCTYPE html>
<html>

<head>
  <style>
    div {
      --bg-color: rgb(88, 88, 186);
      --color: #33ca63;
    }

    p {
      background-color: var(--bg-color);
      color: var(--color);
    }

    span {
      background-color: var(--bg-color);
      color: var(--color);
    }
  </style>
</head>

<body>
  <div>
    <p>我在div内部</p>
  </div>
  <span>我在div外部</span>
</body>

</html>
  • 实现效果

在这里插入图片描述

七、变量优先级

CSS 变量的优先级与其他 CSS 属性的优先级相同，遵循 CSS 层叠规则。下面是 CSS 属性优先级的一般顺序（从高到低）：

  • !important：使用 !important 声明的样式具有最高优先级，会覆盖其他所有样式；
  • 内联样式：直接在 HTML 元素上使用 style 属性定义的样式具有较高的优先级；
  • ID 选择器：使用 ID 选择器定义的样式具有较高的优先级；
  • 类选择器、属性选择器和伪类选择器：这些选择器定义的样式具有中等优先级；
  • 元素选择器和伪元素选择器：这些选择器定义的样式具有较低的优先级；
  • 继承样式：继承自父元素的样式具有最低优先级。

当涉及到 CSS 变量时，它们的优先级与其他选择器相同。如果在同一个元素上定义了多个相同的 CSS 变量，后面定义的变量会覆盖前面的变量。如果在不同的选择器中定义了相同的 CSS 变量，遵循选择器的优先级规则。例如，如果在内联样式中定义了一个 CSS 变量，它将具有较高的优先级，并且会覆盖其他选择器中定义的相同变量。同样，如果在 ID 选择器中定义了一个 CSS 变量，它将具有较高的优先级，并且会覆盖其他选择器中定义的相同变量。

<!DOCTYPE html>
<html>

<head>
  <style>
    :root {
      --primary-color: blue;
    }

    .container {
      --primary-color: red;
    }

    .box {
      background-color: var(--primary-color);
      width: 200px;
      height: 200px;
      margin: 20px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box"></div>
  </div>
</body>

</html>

在这个案例中，我们定义了一个名为 --primary-color 的 CSS 变量，并在 :root 伪类中设置为蓝色。然后，在 .container 类选择器中重新定义了相同的变量，并将其设置为红色。在 .box 类选择器中，我们使用 var() 函数来引用 --primary-color 变量，并将其作为背景颜色。由于 .container 类选择器具有较高的优先级，所以最终 .box 的背景颜色将是红色。

  • 实现效果

在这里插入图片描述

八、兼容性

CSS 变量在现代的浏览器中其实已经具有良好的兼容性了，但在一些旧版本的浏览器中可能存在一些限制。

浏览器兼容性
Chrome支持自 Chrome 49 版本及以上
Firefox支持自 Firefox 31 版本及以上
Safari支持自 Safari 9.1 版本及以上
Opera支持自 Opera 36 版本及以上
Edge支持自 Edge 15 版本及以上
Internet Explorer不支持 CSS 变量

九、使用 CSS 变量带来的提升

  • 可重用性和易维护性

    CSS 变量允许你定义一次样式，并在整个样式表中多次重用。这样可以减少代码的重复性，提高代码的可维护性。通过修改变量的值，可以轻松地更改整个样式的外观，而无需逐个修改每个具体的样式。

  • 动态性和灵活性

    CSS 变量可以在运行时动态修改，而无需修改样式表。这使得在不同的条件下应用不同的样式变得更加容易。例如，您可以根据用户的选择或主题切换来更改变量的值，从而实现动态的样式变化。

  • 响应式设计

    CSS 变量可以与媒体查询结合使用，实现响应式设计。通过在不同的媒体查询中定义不同的变量值，可以根据设备的屏幕尺寸和特性来调整样式。这使得网页可以适应不同的屏幕大小和设备类型，提供更好的用户体验。

  • 可读性和可维护性

    CSS 变量可以使用有意义的名称来定义，使样式表更易于理解和维护。相比于硬编码的数值或颜色，使用变量可以提高代码的可读性，并使样式的意图更加清晰。

  • 全局控制

    通过在根元素上定义 CSS 变量，可以实现全局的样式控制。这意味着你可以在整个网站中使用相同的变量，从而确保一致的外观和风格。如果需要更改样式，只需修改变量的值，而无需逐个修改每个具体的样式。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

机器视觉 AI 数据集制作

机器视觉 AI 数据集制作

工业中&#xff0c;机器视觉物体分拣时&#xff0c;需要制作&#xff0c;数据集&#xff0c;那么&#xff0c;一般情况下&#xff0c;可以选择几个物体的几张图片&#xff0c;或者视频&#xff0c;将待识别的物体的掩模扣取出来&#xff0c;随机的贴在 传送带背景中&#xff0c…
阅读更多...
【23真题】大题全原题的211！题源已定位!

【23真题】大题全原题的211！题源已定位!

今天分享的是23年长安大学814的信号与系统试题及解析。 本套试卷难度分析&#xff1a;22年长安大学814考研真题&#xff0c;我也发布过&#xff0c;若有需要&#xff0c;戳这里自取&#xff01;本套试题难度中等偏下&#xff0c;题量偏多&#xff0c;考察的知识点也是很常见的…
阅读更多...
华为OD机试 - 围棋的气（Java JS Python C）

华为OD机试 - 围棋的气（Java JS Python C）

题目描述 围棋棋盘由纵横各19条线垂直相交组成，棋盘上一共19 x 19 = 361 个交点，对弈双方一方执白棋，一方执黑棋，落子时只能将棋子置于交点上。 “气”是围棋中很重要的一个概念，某个棋子有几口气，是指其上下左右方向四个相邻的交叉点中，有几个交叉点没有棋子，由此可…
阅读更多...
Lazada测评怎么做？

Lazada测评怎么做？

国内电商行业的发展日趋激烈&#xff0c;卖家想要脱颖而出非常困难&#xff0c;许多卖家选择入驻跨境电商平台开店&#xff0c; 跨境电商平台吸引了许多卖家入驻&#xff0c;而最近有很多朋友在私信问我关于Lazada测评的一些事情 Lazada产品测评流程步骤 怎么测评 这个怎么测…
阅读更多...
特斯拉开源 Roadster 文件随便用；微软 Copilot AI 技术开放或不对大陆开放丨 RTE 开发者日报 Vol.92

特斯拉开源 Roadster 文件随便用；微软 Copilot AI 技术开放或不对大陆开放丨 RTE 开发者日报 Vol.92

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…
阅读更多...
空间统计分析

空间统计分析

一、实验名称&#xff1a; 空间统计分析 二、实验目的&#xff1a; 通过本实验练习&#xff0c;掌握空间统计分析的基本方法。 三、实验内容和要求&#xff1a; 实验内容&#xff1a; 利用ARCGIS软件相关分析工具及实验数据&#xff08;某城市各个社区的家庭平均年收入&a…
阅读更多...
自动驾驶学习笔记（十二）——定位技术

自动驾驶学习笔记（十二）——定位技术

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《Apollo Beta宣讲和线下沙龙》免费报名—>传送门 文章目录 前言 卫星定位 RTK定位 IMU定位 GNSS定…
阅读更多...
卸载软件最最最彻底的工具——Uninstall Tool

卸载软件最最最彻底的工具——Uninstall Tool

卸载软件最最最彻底的工具——Uninstall Tool Uninstall Tool 是一款功能强大的专业卸载工具。针对一些普通卸载不彻底的问题&#xff0c;它可以做到最优&#xff0c;比如Matlab等软件的卸载难的问题也可以较好地解决。 它比 Windows 自带的“添加/删除程序”功能快 3 倍&…
阅读更多...
MySQL数据库如何应对故障恢复与数据恢复回滚

MySQL数据库如何应对故障恢复与数据恢复回滚

一个最基本的数据库&#xff0c;应当可以做到以下几点 数据持久化&#xff0c;可以将数据保存到磁盘&#xff0c;服务重启数据依然存在。 可以按照某种关系存储数据&#xff0c;如果你用过IO流&#xff0c;那么你会发现整理数据也是一件复杂的事情。我是该追加写呢还是找到某条…
阅读更多...
英语语法：连词or, and, if, unless怎么用？

英语语法：连词or, and, if, unless怎么用？

连词or, and, if, unless怎么用&#xff1f;1. or conj. 或者&#xff0c;还是&#xff0c; 和&#xff0c; 否则用法&#xff1a;并列连词①当“或者&#xff0c;还是”讲时&#xff0c;用在选择疑问句中&#xff0c;是选择疑问句的标志例&#xff1a;Are you a teacher or a …
阅读更多...
NX二次开发UF_CURVE_create_arc_center_radius 函数介绍

NX二次开发UF_CURVE_create_arc_center_radius 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_create_arc_center_radius Defined in: uf_curve.h int UF_CURVE_create_arc_center_radius(tag_t center, double radius, tag_t help_point, UF_CURVE_limit_p_t limit_p…
阅读更多...
算法通关第十七关青铜挑战——原来贪心如此简单（什么是贪心思想and经典例题分析）

算法通关第十七关青铜挑战——原来贪心如此简单（什么是贪心思想and经典例题分析）

大家好&#xff0c;我是怒码少年小码。 一转眼&#xff0c;又到了11月末尾了&#xff0c;莫名感觉今年真的很快&#x1f602;。今天的主角是贪心。 贪心的思想非常不好解释&#xff0c;而且越使用权威的语言解释越难懂。而且做题的时候根据自己的理解可能直接做出来&#xff…
阅读更多...
HashMap详解(扩容机制、底层结构、适用场景)

HashMap详解(扩容机制、底层结构、适用场景)

1、特点 底层是链表数组&#xff0c;JDK1.8开始&#xff0c;当链表长度超过8时&#xff0c;会将链表转换为红黑树。 储存的是key-value类型数据。 key值不允许重复&#xff0c;key重复会被覆盖&#xff0c;value允许重复。 数据储存无序&#xff08;不记录存入的顺序&#x…
阅读更多...
html学习

html学习

1.框架标签 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body ><p align"center"><a href "http://www.baidu.com" target"aa">百度&l…
阅读更多...
操作指南 | 如何使用API3请求链下数据

操作指南 | 如何使用API3请求链下数据

API3是一种去中心化解决方案&#xff0c;用于向智能合约平台提供传统且可扩展的API服务&#xff0c;使开发者能够访问如喂价和QRNG等链下资源。 API3由DAO管理&#xff0c;致力于在智能合约功能中轻松访问各种有用数据。 构建者在Moonbeam上可以访问不同的API3服务&#xff1…
阅读更多...
机器学习（1）机器学习类型和机器学习的主要概念

机器学习（1）机器学习类型和机器学习的主要概念

0.前提 深度学习&#xff08;Deep Learing&#xff09;是机器学习&#xff08;Machine Learning&#xff09;领域中的一个新的研究方向&#xff0c;在如今的时代研究深度学习的大模型是十分热门的。我不知道有多少人有关注到最近openai的事件啊&#xff0c;说个比较让我惊讶的…
阅读更多...
注意力机制（Q,K,V）基本概念

注意力机制（Q,K,V）基本概念

文章目录 一、注意力提示1.1概念1.2生活中的注意力提示1.3注意力机制基本框架小结 二、注意力汇聚2.1概念2.2非参注意力汇聚2.2.1平均汇聚2.2.2Nadaraya-Waston核回归 2.3通用注意力汇聚公式2.4带参数注意力汇聚小结 三、注意力评分函数3.1概念3.2例子 四、遮蔽softmax三四小结…
阅读更多...
【数字化转型方法论读书笔记】-数据中台落地实施之法

【数字化转型方法论读书笔记】-数据中台落地实施之法

让数据中台真正落地是实现数字化转型的重中之重。企业做好数据治理、体系建设及人才配备等前期工作后&#xff0c;接下来要做的是数据中台实施落地的关键。 企业首先要掌握数据中台建设的三大核心要素&#xff1a;选对数据建设方式、厘清建设思路、避开数据中台建设误区&#…
阅读更多...
桐庐县数据资源管理局领导一行莅临美创科技并带来感谢信

桐庐县数据资源管理局领导一行莅临美创科技并带来感谢信

11月23日&#xff0c;浙江桐庐县数据资源管理局党组成员、副局长朱勃一行到访美创科技总部参观交流&#xff0c;并带来感谢信&#xff0c;对美创圆满完成护航亚运政务外网数据网站安全保障工作表示充分肯定。美创科技联合创始人、副总裁胡江涛等进行热情接待并开展交流座谈。 图…
阅读更多...
LeetCode Hot100 437.路径总和III

LeetCode Hot100 437.路径总和III

题目&#xff1a; 给定一个二叉树的根节点 root &#xff0c;和一个整数 targetSum &#xff0c;求该二叉树里节点值之和等于 targetSum 的 路径 的数目。 路径 不需要从根节点开始&#xff0c;也不需要在叶子节点结束&#xff0c;但是路径方向必须是向下的&#xff08;只能从…
阅读更多...
最新文章

Copyright @ 2022~2023