当前位置：首页 > news >正文

CSS基础-即学即用 -- 笔记1

news 来源：原创 2025/7/27 19:21:02

前言
CSS 基础
- 1. 层叠
- - 样式表来源
  - 理解优先级
  - 源码顺序
  - 经验法则
  - 继承
  - inherit 关键字
  - initial 关键字
- 2. 相对单位
- - em 和 rem
  - 响应式面板
  - 视口的相对单位
  - - 使用vw定义字号
    - 使用calc()定义字号
    - 自定义属性（即CSS变量）
- 3. 盒模型
- - 调整盒模型

前言

只需一分钟就能学会，却要用一辈子的时间去精通。

CSS 规则不难，容易上手，它是一种 Web 语言，与其它编程语言不同，它更像是绘画，你可以使用 CSS 绘制页面，而不用担心出任何错误或编译失败的提示。但是要精通 CSS，难在需要知道在何时做何事。

CSS 基础

CSS 其本质上就是声明一些规则，在各种条件下产生特定的效果。最基本内容包括：层叠、相对单位、盒模型等。

1. 层叠

CSS（cascading style sheet）里的 cascade 表示层叠。
如果对于同一元素应用了多个规则时，可能包含了冲突的声明，那么哪一个会生效呢？浏览器为解决这个问题会遵循一些规则来解决冲突，下面的示例中，规则规定了第二个声明（ID 选择器）生效，显示绿色：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {color: red;}#page-title {color: green;}.title {color: blue;}</style>
</head>
<body><header class="page-header"><h1 id="page-title" class="title">水果</h1><nav><ul id="main-nav" class="nav"><li><a href="/">首页</a></li><li><a href="/apple">苹果</a></li><li><a href="/banana">香蕉</a></li><li><a href="/orange" class="featured">橘子</a></li></ul></nav></header>
</body>
</html>

当声明冲突时，层叠会依据三种条件解决冲突：

样式表的来源：样式从哪来，包括自己写的样式和浏览器默认样式等
选择器的优先级：选择器根据重要性有优先级
源码顺序：样式的声明顺序

样式表来源

你自己写的样式表属于作者样式表，除此之外还有用户代理样式表，即浏览器默认样式。用户代理样式表优先级低，你的样式会覆盖它们。

用户代理样式在不同浏览器上稍有差异，但是大体上是相同的。

着重说明下 !important 声明，这是个例外，标记为重要的声明。此标记会被当作更高优先级的来源，优先级如下：

作者的 !important
作者的
用户代理

理解优先级

如果来源无法解决冲突声明，浏览器会通过检查优先级。浏览器的优先级分为两部分：HTML 的行内样式和选择器的样式。

行内样式
行内样式属于“带作用域的”声明，它会覆盖任何来自样式表或者<style>标签的样式。行内样式没有选择器，它们直接作用于所在的元素。

为了在样式表里覆盖行内声明，需要为声明添加 !important，这样能将它提升到一个更高优先级的来源。

选择器优先级
优先级的准确规则：

如果选择器的ID数量更多，则它会胜出（即它更明确）
如果ID数量一致，那么拥有最多类的选择器胜出
如果以上两次比较都一致，那么拥有最多标签名的选择器胜出。

怎么理解上面的规则，看示例，下面的优先级由低到高排列：

html body header h1 {color: blue;
}body header.page-header h1 {color: orange;
}.page-header .title {color: green;
}#page-title {color: red;
}

伪类选择器（如：hover）和属性选择器（如 [type=“input”]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响

优先级标记

一个常用的表示优先级的方式：数值形式，通常用逗号隔开。如，“1,2,2” 表示选择器由1个 ID、2个类、2个标签组成。优先级最高的 ID 列为第一位，然后是类、标签。例如，“1,0,0” 的优先级高于 “0,2,2” 甚至 “0,10,0”（不推荐），因为第一个数（ID）有最高优先级。

还有一种用4个数的标记，将最重要的位置用0或1来表示，代表是否是用行内样式添加的。此时，行内样式的优先级为“1,0,0,0”。它会覆盖通过选择器添加的样式，比如优先级为“0,1,2,0”（1个ID和2个类）的选择器。

优先级的思考
优先级容易发展为一种“军备竞赛”。在大型项目中这一点尤为突出。实践中，通常最好让优先级尽可能低，这样当需要覆盖一些样式时，才能有选择空间。

根据上面 html 内容，给出如下示例，我们要让 .featured 选择器生效：

/* 优先级 1,0,1 */
#main-nav a {background-color: blue;
}/* 方法1：添加 !important。这种方法简单也最快，但也很低级。虽然解决了当前问题，有可能会在以后带来更多问题。当给一些声明加上 !important时，就会先比较来源，再使用常规的优先级规则。最终会让一切回到起点：一旦引入一个 !important，就会带来更多的 !important */
.featured {background-color: orange !important;
}/* 方法2：将优先级提升到 1,1,0 */
#main-nav .featured {background-color: orange;
}/* 方法3：不提升第二个选择器的优先级，降低第一个  */
/*降低优先级为 0,1,1*/
.nav a {background-color: blue;
}
/*降低优先级为 0,2,0*/
.nav .featured {background-color: orange;
}

源码顺序

层叠的最后一个判断，是源码顺序。如果两个声明的来源和优先级相同，其中一个声明在样式表中出现较晚，或者位于页面较晚引入的样式表中，则该声明胜出。

经验法则

在选择器中不要使用 ID。就算只用一个 ID，也会大幅提升优先级。当需要覆盖这个选择器时，通常找不到另一个有意义的ID，于是就会复制原来的选择器，然后加上另一个类，让它区别于想要覆盖的选择器。
不要使用 !important。它比 ID 更难覆盖，一旦用了它，想要覆盖原先的声明，就需要再加上一个 !important，而且依然要处理优先级的问题。

这两条规则是很好的建议，但不必固守它们，因为也有例外。不要为了赢得优先级竞赛而习惯性地使用这两个方法。

建议尽量不要在 JavaScript 里使用行内样式。如果这样做了，就是在强迫使用该包的开发人员要么全盘接受包里的样式，要么给每个想修改的属性加上 !important。
正确的做法是在包里包含一个样式表。如果组件需要频繁修改样式，通常最好用 JavaScript 给元素添加或者移除类。这样用户就可以在使用这份样式表的同时，在不引入优先级竞赛的前提下，按照自己的喜好选择编辑其中的样式。

继承

如果一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值。继承是顺着 DOM 树向下传递的。

并不是所有的属性都能被继承。默认情况下，只有特定的一些属性能被继承。比如更文本相关的属性：color、font、line-height、white-space等，列表属性如：list-style、list-style-position、list-style-image等

inherit 关键字

有时，我们想用继承代替一个层叠值。这时候可以用 inherit 关键字。可以用它来覆盖另一个值，这样该元素就会继承其父元素的值。

继承有个好处，就是如果父元素样式改变，它的样式跟着一起改变。

initial 关键字

撤销作用于某个元素的样式，用 initial 关键字来实现。每一个CSS属性都有初始（默认）值。如果将 initial 值赋给某个属性，那么就会有效地将其重置为默认值，这种操作相当于硬复位了该值。

这么做的好处是简单高效。如果想删除一个元素的边框，设置 border: initial 即可。如果想让一个元素恢复到默认宽度，设置 width: initial 即可。

2. 相对单位

CSS 的像素单位（px）是绝对单位，即 10px 放在哪都一样大。其他单位，如 em 和 rem 是相对单位。相对单位的值会根据外部因素发生变化。如 2em 的具体值会根据它作用到的元素而变化。

相对单位有其独特的价值，只要我们掌握了控制其变化的方式，使用恰当，会让代码更简洁灵活，也更简单。

em 和 rem

em 是最常见的相对长度单位，适合基于特定的字号进行排版。1em等于当前元素的字号，其准确值取决于作用的元素。

.padded {font-size: 16px;padding: 1em
}

规则集指定了字号为16px，设置内边距的值为1em。浏览器将其乘以字号，最终渲染为16px。重要：浏览器会根据相对单位的值计算出绝对值，称作计算值（computed value）。

当设置padding、height、width、border-radius等属性时，使用em会很方便。这是因为当元素继承了不同的字号，或者用户改变了字体设置时，这些属性会跟着元素均匀地缩放。

谈到 font-size 属性时，em 表现得不太一样。之前提到过，当前元素的字号决定了 em。如果声明 font-size:1.2em，这个 font-size 是根据继承的字号来计算的。

em用在内边距、外边距以及元素大小上很好，但是用在字号上就会很复杂。但是，我们有更好的选择：rem。

在文档中，根节点是所有其他元素的祖先节点。根节点有一个伪类选择器（:root），可以用来选中它自己。这等价于类型选择器 html，但是html 的优先级相当于一个类名，而不是一个标签。

rem 是 root em 的缩写。rem 不是相对于当前元素，而是相对于根元素的单位。不管在文档的什么位置使用rem,1.2rem都会有相同的计算值：1.2乘以根元素的字号。

:root {font-size: 1em;
}ul {font-size: .8rem;
}

示例中，如果根元素的字号为浏览器默认的字号16px（根元素上的em是相对于浏览器默认值的）。无序列表的字号设置为0.8rem，计算值为12.8px。因为相对根元素，所以所有字号始终一致，就算是嵌套列表也一样。

与 em 相比，rem 降低了复杂性。实际上，rem 结合了 px 和 em 的优点，既保留了相对单位的优势，又简单易用。
但是，使用还得根据场景来定。拿不准的时候，用rem设置字号，用px设置边框，用em设置其他大部分属性。

响应式面板

我们可以根据屏幕尺寸，用媒体查询改变根元素的字号。这样就能够基于不同用户的屏幕尺寸，渲染出不同大小的面板。

媒体查询，即 @media 规则，可以指定某种屏幕尺寸或者媒体类型（比如，打印机或者屏幕）下的样式。这是响应式设计的关键部分。

:root {font-size: 0.75em;
}@media (min-width: 800px) {:root {font-size: 0.875em;}
}@media (min-width: 1200px) {:root {font-size: 1em;}
}

通过给页面根元素设置不同字号，我们响应式地重新定义了整个网页的 em和 rem。也就是说，即使不直接修改面板的样式，它也是响应式的。缩放浏览器窗口可以看到这些变化。

视口的相对单位

视口：浏览器窗口里网页可见部分的边框区域。它不包括浏览器的地址栏、工具栏、状态栏。

vh：视口高度的1/100
vw：视口宽度的1/100
vmin：视口宽、高中较小的一方的1/100（IE9中叫vm，而不是vmin）
vmax：视口宽、高中较大的一方的1/100（本书写作时IE和Edge均不支持vmax）[插图]。

如，50vw 等于视口宽度的一半，25vh等于视口高度的25%。vmin 取决于宽和高中较小的一方，这可以保证元素在屏幕方向变化时适应屏幕。在横屏时，vmin 取决于高度；在竖屏时，则取决于宽度。

视口相对长度非常适合展示一个填满屏幕的大图。我们可以将图片放在一个很长的容器里，然后设置图片的高度为100vh，让它等于视口的高度。

使用vw定义字号

相对视口单位有一个不起眼的用途，就是设置字号，它或许比用 vh 和 vw 设置元素的宽和高还要实用。

比如，我们设置 font-size: 2vw。即，在一个1200px的桌面显示器上，计算值为24px（1200的2%）。在一个768px宽的平板上，计算值约为15px（768的2%）。这样做的好处在于元素能够在这两种大小之间平滑地过渡，这意味着不会在某个断点突然改变。当视口大小改变时，元素会逐渐过渡。

但有一个问题，24px 在大屏上来说有可能太大了。更糟糕的是，在手机上可能会缩小到只有7.5px。如果能够保留这种缩放的能力，但是让极端情况缓和一些就更棒了。CSS 的 calc() 函数可以提供帮助。

使用calc()定义字号

calc() 函数内可以对两个及其以上的值进行基本运算。当要结合不同单位的值时，calc() 特别实用。支持的运算包括：加（+）、减（−）、乘（×）、除（÷）。加号和减号两边必须有空白。

示例：calc() 结合 em 和 vw 两种单位。删除之前样式表的基础字号（以及相关的媒体查询），换成如下代码：

:root {font-size: calc(0.5em + 1vw);
}

打开网页，慢慢缩放浏览器，字体会平滑地缩放。0.5em 保证了最小字号，1vw 则确保了字体会随着视口缩放。这段代码保证基础字号从手机里的11.75px一直过渡到1200px的浏览器窗口里的20px。可以按照自己的喜好调整这个值。

自定义属性（即CSS变量）

要定义一个自定义属性，只需要像其他CSS属性那样声明即可。看个例子：

:root {--main-font: Helvetica, Arial, sans-serif;
}p {font-family: var(--main-font);
}

这个代码清单定义了一个名叫 --main-font 的变量。将其值设置为一些常见的 sans-serif 字体。变量名前面必须有两个连字符（–），用来跟CSS 属性区分，剩下的部分可以随意命名。变量必须在一个声明块内声明。这里使用了：root选择器，因此该变量可以在整个网页使用。

变量声明本身什么也没做，我们使用时才能看到效果。自定义属性就像作用域变量一样，因为它的值会被后代元素继承。

首先还是在 :root 选择器的规则集中定义变量。这很重要，如此一来这些值就可以提供给根元素（整个网页）下的任何元素。当根元素的后代元素使用这个变量时，就会解析这里的值。

3. 盒模型

页面中的每一个标签，都可以看做是一个 “盒子”，通过盒子的视角，我们可以更方便的进行布局。

盒子模型：CSS 中规定每个盒子分别由：内容（content）、内边距（padding）、边框（border）、外边距（margin）构成。

计算公式：

盒子宽度 = 左边框 + 左 padding + 内容宽度 + 右 padding + 右边框
盒子高度 = 上边框 + 上 padding + 内容宽度 + 下 padding + 下边框

调整盒模型

CSS 中我们可以使用 box-sizing 属性来调整盒模型的行为。

box-sizing 的默认值为 content-box，这意味任何指定的宽或高都只会设置内容盒子的大小。
将 box-sizing 设置为 border-box 后，height 和width 属性会设置内容、内边距以及边框的大小总和。

示例，设置全局的 border-box：

*,
::before,
::after {box-sizing: border-box;
}

用通用选择器（＊）选中了页面上所有元素，并用两个选择器选中了网页的所有伪元素。将这段代码放到样式表开头已是普遍做法了。

但是，如果网页中使用了带样式的第三方组件而且没有考虑到使用者会修改盒模型时，就可能会因此破坏其中一些组件的布局。因为全局设置 border-box 时使用的通用选择器会选中第三方组件内的每个元素，修改盒模型可能会有问题，所以最终需要写另外的样式将组件内的元素恢复为 content-box。

下面示例，让全局修改盒模型为border-box更稳健：

:root {box-sizing: border-box;
}*,
::before,
::after {box-sizing: inherit;
}

盒模型通常不会被继承，但是使用 inherit 关键字可以强制继承。

开发过程中，建议将上面代码加到 CSS 中，因为从长远来看，这会省去很多麻烦。
但是，如果给已有的样式表加上上面代码后可能有问题，尤其是当你已基于默认的内容盒模型写了很多样式后。如果非要给已有项目加上这段代码，那么一定要彻底检查一遍看会不会有问题。

CSS基础-即学即用 -- 笔记1

目录前言CSS 基础1. 层叠样式表来源理解优先级源码顺序经验法则继承inherit 关键字initial 关键字 2. 相对单位em 和 rem响应式面板视口的相对单位使用vw定义字号使用calc()定义字号自定义属性（即CSS变量） 3. 盒模型调整盒模型前言只需一分钟就能学会…...

编程日记 2025/7/27 19:21:02

日志文件太大，如何分卷压缩便于传输

在IT系统维护和开发工作中，日志文件的作用举足轻重，它不仅记录了系统运行过程中的详细信息，还能帮助技术人员诊断问题、追踪事件和分析性能。然而，随着系统的长期运行，日志文件可能会迅速膨胀，特别是在高…...

编程日记 2025/7/26 16:31:55

【Django】设置让局域网内的人访问

操作步骤 1. 命令行窗口下查询【本机ip】 ipconfig2. Django项目的全局设置【settings.py】中进行如下设置 ALLOWED_HOSTS ["本机ip"]3. 启动Django项目：命令行下执行如下命令 python manage.py runserver 0.0.0.0:80004. 测试效果：浏览器…...

编程日记 2025/7/27 19:17:42

智慧教室电子班牌-智能管理系统源码，‌后端‌基于Spring Boot框架，前端‌使用Vue.js框架进行组件化开发

智慧班牌系统是一种集成了多种功能的电子班牌，包括校园信息发布、综合素质评价、考勤管理、家校互通、教务管理、考场管理和成绩分析等。它为班级和学校提供了一个多层次、多内容的信息发布平台，同时也为教师、家长和学生提供了一个安全、快捷、全面的互…...

编程日记 2025/7/26 16:31:52

[密码学实战]密评考试训练系统v1.0程序及密评参考题库（获取路径在文末）

[密码学实战]密评考试训练系统v1.0程序及密评参考题库引言：密评考试的重要性与挑战商用密码应用安全性评估（简称"密评"）作为我国密码领域的重要认证体系，已成为信息安全从业者的必备技能。根据国家密码管理局最新数据，截至2024年6月，全国仅有3000余人持有…...

编程日记 2025/7/26 16:31:50

Vue如何获取Dom

在Vue中获取DOM元素可以通过几种方法：1、使用模板引用（ref），2、使用事件绑定，3、使用生命周期钩子。这些方法各有优缺点，适用于不同的场景。本文将详细介绍这些方法的使用方式及其适用场景，帮助…...

编程日记 2025/7/27 19:16:00

AI大模型 —— 国产大模型 —— 华为大模型

有这么一句话，那就是AI大模型分两种，一种是大模型；另一种是华为大模型。如果从技术角度来分析，华为的技术不论是在软件还是硬件都比国外的大公司差距极大，甚至有些技术评论者认为华为的软硬件技术至少落后2.5代&#…...

编程日记 2025/7/26 16:31:46

LX4-数据手册相关

数据手册相关一如何获取数据手册 ST官网：www.st.com 中文社区网： https://www.stmcu.com.cn/Designresource/list/STM32F1/document/datasheet 淘宝的商品详情页二如何阅读数据手册芯片手册定义：由芯片制造商提供，详细…...

编程日记 2025/7/26 16:31:44

华为VRP系统知识总结及案例试题

目录 🧠 华为VRP系统优化整合笔记（完整版）一、VRP系统概述📌 什么是VRP（Versatile Routing Platform）？🚀 VRP系统发展历程二、设备文件系统与存储结构📂 常见文件类型&…...

编程日记 2025/7/26 16:31:43

深度解析云计算：概念、优势与分类全览

以下是对云计算概念、优点和分类更详细的介绍： 一、云计算的概念云计算是一种通过互联网提供计算服务的模式，它基于虚拟化、分布式计算、网络存储等一系列先进技术，将计算资源进行整合和管理，形成一个庞大的资源池。这些资源包…...

编程日记 2025/7/26 11:45:03

剑指offer经典题目（五）

目录栈相关二叉树相关栈相关题目一：定义栈的数据结构，请在该类型中实现一个能够得到栈中所含最小元素的 min 函数，输入操作时保证 pop、top 和 min 函数操作时，栈中一定有元素。OJ地址图示如下。主要思想：我们…...

编程日记 2025/7/26 16:31:39

Coze平台创建AI智能体的详细步骤指南

一、创建智能体的基础流程注册与登录访问Coze官网（www.coze.cn），使用邮箱或手机号注册账号并登录。创建智能体在控制台点击左侧“”按钮，选择“创建智能体”，输入名称（如“职场鼓励师”&…...

编程日记 2025/7/26 16:31:38

电商数据自动化采集方案：淘宝商品详情 API 接入与数据处理技巧

在电商行业高速发展的今天，数据已成为企业决策和竞争的核心要素。通过自动化采集淘宝商品详情数据，企业能够实时掌握市场动态、优化商品策略、提升用户体验。本文将详细介绍基于淘宝商品详情 API 的自动化采集方案，涵盖 API 接入流程、数据采…...

编程日记 2025/7/26 16:31:36

高并发内存池项目

高并发内存池项目一、项目介绍二、什么是内存池2.1池化技术2.2内存池2.3内存池主要解决的问题2.3.1外部碎片2.3.2内部碎片 2.4malloc的了解三、定长内存池的实现3.1 通过类型模板参数表示定长内存池3.2定长内存池的实现原理四、高并发内存池的框架设计4.1ThreadCache的实现4…...

编程日记 2025/7/26 16:31:34

你学会了些什么211201？--http基础知识

概念 HTTP–Hyper Text Transfer Protocol，超文本传输协议；是一种建立在TCP上的无状态连接（短连接）。整个基本的工作流程是：客户端发送一个HTTP请求（Request ），这个请求说明了客户端…...

编程日记 2025/7/26 16:31:32

储能集装箱电池簇安装支架结构设计（大纲）

储能集装箱电池簇安装支架结构设计第一章绪论 1.1 研究背景与意义储能技术在能源转型中的战略地位电池簇在储能系统中的核心作用支架结构对电池安全稳定运行的重要性研究电池簇安装支架的工程价值与应用前景 1.2 国内外研究现状国际先进储能集装箱支架设计技术概述国内…...

编程日记 2025/7/26 16:31:31

解决Chrome浏览器访问https提示“您的连接不是私密连接”的问题

如何绕过Chrome的“您的连接不是私密连接”证书警告页面在使用Chrome浏览器访问一些自签名或测试用的HTTPS网站时，常常会遇到这样一个拦截页面： “您的连接不是私密连接” 虽然这是Chrome出于安全考虑的设计，但对于开发者或测试人员来说&am…...

编程日记 2025/7/26 16:31:29

前端笔记-AJAX

什么是AJAX？ AJAX（Asynchronous JavaScript and XML）就是异步的JS和XML， 是一种无需刷新页面即可与服务器交换数据并更新部分网页内容的技术。它的核心是通过 JavaScript 在后台发送 HTTP 请求，接收服务器返回的…...

编程日记 2025/7/27 19:18:55

单片机可以用来做机器人吗？

不少同学心里都有个疑问：学了单片机到底能不能用来制作机器人呢？答案是毋庸置疑的，能！但具体该如何操作，又得掌握哪些知识呢？今天，咱们就用通俗易懂的话语，详细地为大家一步步剖析清楚。一、单片机 —— 机器人的 “智慧大脑” 单片机就如同机器人的大脑一般，通过编…...

编程日记 2025/7/27 19:20:18

VS Code + GitHub：高效开发工作流指南

目录一、安装 & 基本配置 1.下载 VS Code 2.安装推荐插件（打开侧边栏 Extensions） 3.设置中文界面（可选）二、使用 VS Code 操作 Git/GitHub 1.基本 Git 操作（不输命令行！） 2.连接 GitHub（第一次使用）三、克隆远程仓库到 VS Code 方法一（推荐）：方…...

编程日记 2025/7/26 16:31:24

Linux系统编程 day7、8 信号(周日划水了)

信号相关概念信号这章难就难在其抽象。信号共性：简单、不能携带大量数据、满足条件才发送。信号的特质：信号是软件层面上的“中断”，一旦信号产生，无论程序执行到什么位置，必须立即停止，处理信号&…...

编程日记 2025/7/26 16:31:23

.NET WPF 三维模型

文章目录 .NET WPF 三维模型1 Viewport3D1.1 3D 坐标系1.2 核心组件1.2.1 相机 (Camera)1.2.2 光源 (Light)1.2.3 3D 模型（Model3D） 1.3 模型纹理（Material）1.4 完整示例：创建坐标轴与立方体1.5 转换模型1.6 性能1.6.1…...

编程日记 2025/7/26 23:40:19

iOS 中的虚拟内存 (理解为什么需要虚拟内存)

什么叫“虚拟地址空间”？ 一句话：它是 CPU 看得见、App 以为自己独享，但实际上会被内核和硬件（MMU）动态翻译到真实物理内存的一整块“虚拟地图”。 1. 背景：为什么要“虚拟”？ 需求虚拟地址空…...

编程日记 2025/7/26 16:31:19

算法之动态规划

动态规划动态规划1. 核心思想2. 基本步骤3. 关键概念3.1 基本概念3.2 优化技巧 4. 常见应用场景5. 典型案例5.1 斐波那契数列5.2 背包问题5.2.1 0-1背包问题5.2.2 完全背包问题 5.3 最短路径——Floyd算法5.4 最长公共子序列（LCS）5.5 最长递增子序列&am…...

编程日记 2025/7/25 23:29:30

leetcode0130. 被围绕的区域- medium

1 题目：被围绕的区域官方标定难度：中给你一个 m x n 的矩阵 board ，由若干字符 ‘X’ 和 ‘O’ 组成，捕获所有被围绕的区域： 连接：一个单元格与水平或垂直方向上相邻的单元格连接。区域&#xff1a…...

编程日记 2025/7/26 16:31:16

衡石科技ChatBI--飞书数据问答机器人配置详解（附具体操作路径和截图）

先决条件需要在衡石系统认证方式中配置好飞书认证方式，具体步骤详见认证方式中关于飞书的部分。先完成这部分配置后，再进行以下步骤。飞书中创建机器人应用 1. 创建飞书应用在飞书企业自建应用管理中创建应用，设置logo&#xff…...

编程日记 2025/7/26 16:31:14

25.解决中医知识问答删除历史对话功能后端处理请求时抛出异常

ChatTest.vue:176 DELETE http://localhost:8080/api/chat/conversations/20 500 (Internal Server Error) deleteConversation ChatTest.vue:176 onClick ChatTest.vue:22 ChatTest.vue:185 删除失败 AxiosError {message: Request failed with status code 500, name: Axio…...

编程日记 2025/7/26 16:31:13

目录

前言