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

二、CSS笔记

news 2026/2/8 14:42:44

（一）css概述

1、定义

CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

2、要点

怎么找到标签
怎么操作标签对象（element）

3、css的四种引入方式

3.1 行内式

在标签的style属性中设定CSS样式。这种方式不需要再找标签对象，但没有体现出CSS样式分离的优势，不推荐使用。
<p style="background-color: rebeccapurple">hello yuan</p>

3.2 嵌入式：

将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：
<head><style>p{background-color: #2b99ff;}</style>
</head>

3.3 链接式

通过html语言规范将一个.css文件引入到HTML文件中：
<head><link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>

3.4 导入式

将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：
<style type="text/css">@import"mystyle.css";   // 此处要注意.css文件的路径
</style>　

3.5 推荐方式

导入式固有的一个缺陷：会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。
链接式会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
推荐链接式。

（二）css选择器

css的选择器（Selector），指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素，是写css代码的第一个要点，找标签

1、基础选择器

1.1 通用选择器*

一个星号*，匹配任何元素，如：
* { margin:0; padding:0; }  // 设置所有标签外边距和内边距为0像素

1.2 标签选择器E

直接匹配标签本身，如：
p { color:green; }  // 设置所有<p>标签的字体颜色是green

1.3 class选择器.info或E.info

匹配所有class属性中包含info的元素，可与标签选择器配合使用，如：
.info { background-color:#ff0; }  // 设置class属性包含info的标签背景颜色是#ff0
div.info { background-color:#ff0; }  // 设置class属性包含info的<div>标签背景颜色是#ff0

1.4 id选择器#info

匹配id属性等于info的元素，因为标签的id是唯一标识的，所以只会匹配符合的那一个标签，如：
#info { background-color:#ff0; }  // 设置id为info的标签背景颜色是#ff0

2、组合选择器

2.1 多元素选择器E,F

同时匹配所有E元素和F元素，E和F之间用逗号分隔，如：
div,p { color:#f00; }  // 设置所有<div>标签和<p>标签的字体颜色是#f00

2.2 后代元素选择器E F

匹配所有属于E元素后代的F元素（嵌套在E标签里的F标签，不论多少层），E和F之间用空格分隔，如：
li a { font-weight:bold;}  // 设置所有<li>标签的所有子孙<a>标签的字体加粗

2.3 子元素选择器E>F

匹配所有E元素的子元素F（只能是紧挨着嵌套的一层），如：
div > p { color:#f00; }  // 设置所有<div>标签的所有子标签<p>元素的字体颜色是#f00

2.4 毗邻元素选择器E+F

匹配所有紧随E元素之后的同级元素F，如：
div + p { color:#f00; }  // 设置所有紧随在<div>标签之后的<p>标签的字体颜色是#f00

3、属性选择器（主要用1和2，其他了解即可）

3.1 E[att]

匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。），如：
p[title] { color:#f00; }  // 设置所有具有title属性（不论何值）的<p>标签字体颜色为#f00
[title] { color:#f00; }  // 设置所有具有title属性（不论何值）的标签字体颜色为#f00

3.2 E[att=val]

匹配所有att属性等于“val”的E元素，如：

p[title="game"] { color:#f00; }  // 设置所有title属性="game"的<p>标签字体颜色为#f00
[title="game"] { color:#f00; }  // 设置所有title属性="game"的标签字体颜色为#f00

3.3 E[att~=val]

匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素，如：

p[title~="game"] { color:#f00; }  // 设置所有title属性有多个值，其中一个值="game"的<p>标签字体颜色为#f00
[title~="game"] { color:#f00; }  // 设置所有title属性有多个值，其中一个值="game"的标签字体颜色为#f00

3.4 E[att^=val]

匹配属性值以指定值开头的每个元素，如：

p[title^="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"开头的<p>标签字体颜色为#f00
[title^="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"开头的标签字体颜色为#f00

3.5 E[attr$=val]

匹配属性值以指定值结尾的每个元素，如：

p[title$="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"结尾的<p>标签字体颜色为#f00
[title$="ga"] { color:#f00; }  // 设置所有title属性的值以"ga"结尾的标签字体颜色为#f00

3.6 E[attr*=val]

匹配属性值中包含指定值的每个元素，如：

p[title*="ga"] { color:#f00; }  // 设置所有title属性的值包含"ga"的<p>标签字体颜色为#f00
[title*="ga"] { color:#f00; }  // 设置所有title属性的值包含"ga"的标签字体颜色为#f00

4、伪类(Pseudo-classes)

CSS伪类是用来选择元素的特定状态或位置的选择器。
以冒号(:)开头，用于向特定元素在特定状态下应用样式。
伪类的作用是根据元素的状态或位置来改变其样式，这些状态可能包括用户交互（如鼠标悬停、点击）或元素自身的状态（如已访问链接、禁用表单元素）。
伪类通常与元素选择器结合使用，以选择元素的特定状态，如a:hover用于选择鼠标悬停时的链接。
格式: 标签:伪类名称{ css代码; }

4.1 anchor（锚点）伪类

又称为链接伪类，主要用于选择和样式化HTML中的<a>标签，控制链接的显示效果，这些伪类根据锚点的不同状态来应用特定的样式。以下是常见的锚点伪类：

‌:link‌：

选择所有尚未访问过的链接（即默认状态下的链接）。
用于定义了链接的常规状态
示例：a:link { color: blue; } 会将所有未访问的链接文本设置为蓝色。

‌:visited‌：

选择所有已经访问过的链接。
用于阅读文章，能清楚的判断已经访问过的链接。
示例：a:visited { color: purple; } 会将所有已访问的链接文本设置为紫色。
出于隐私考虑，现代浏览器对:visited伪类能应用的样式有所限制，通常只能改变颜色。

‌:hover‌：

选择鼠标悬停时的链接。
用于产生视觉效果。
示例：a:hover { text-decoration: underline; } 会在鼠标悬停时给链接添加下划线。

‌:active‌：

选择被用户激活（通常是点击）时的链接。
用于表现鼠标按下时的链接状态。
示例：a:active { color: red; } 会在链接被点击时将其文本颜色改为红色。

‌:focus‌：

选择获得焦点的链接（通常通过键盘（Tab）导航或点击获得）。
常用于添加表单元素的样式
示例：a:focus { outline: 2px dashed #000; } 会在链接获得焦点时给其添加一个黑色的外框虚线轮廓，焦点消失后消失。

这些伪类可以按照特定的顺序来编写（也称为“Love-Hate”顺序）：:link -> :visited -> :hover -> :active。这个顺序是基于用户与链接交互的自然流程，从未访问到访问，再到悬停和激活。按照这个顺序编写样式规则可以确保它们按照预期的方式覆盖和应用。
<head lang='zh-CN'>
<style type="text/css">a:link {color: blue;text-decoration: none;}a:visited {color: purple;}a:hover {text-decoration: underline;}a:active {color: red;}a:focus {outline: 2px dashed #000;}// 补充：可以悬浮一个区域更改另一个区域的样式，如：.outer:hover .right{color: red}
</style>
</head>
<body><div class="outer"><a href="#">hello-world</a><a class="right" href="#">go-on</a></div>
</body>
</html>

4.2 其它伪类

动态伪类（如:hover、:active和:focus）不仅限于链接元素，还可以应用于任何HTML元素。在表单中，这些动态伪类可以用来增强用户交互体验，例如当用户将鼠标悬停在按钮上时改变按钮的样式，或者当输入框获得焦点时改变其边框颜色。
结构伪类（如:first-child、:last-child、:nth-child、:nth-of-type(n)、:only-child‌、:only-of-type‌等）则用于选择具有特定结构关系的元素，与anchor伪类不同，它们不依赖于元素的状态，而是基于元素在文档树中的位置。

‌否定伪类:not(selector)‌：选择不匹配指定选择器的元素。例如，:not(.class)选择没有.class类的元素。

UI元素状态伪类:checked‌：选择被选中的表单元素（例如，复选框或单选按钮）。

UI元素状态伪类:disabled‌：选择被禁用的表单元素。

:empty‌：选择没有任何子元素（包括文本节点）的元素。

:target‌：选择当前活动的锚点目标元素。常用于制作页面内跳转。

:valid‌ 和 ‌:invalid‌：分别用于选择通过验证和未通过验证的表单元素（如<input>元素）。

5、伪元素Pseudo-elements

概念与用途：
用来在元素的内容前面或后面插入额外的内容的选择器。
它们以双冒号(::)开头（尽管在CSS2中伪元素也可以使用单冒号，但为了区分伪类和伪元素，CSS3规范推荐使用双冒号），用于向元素的特定部分应用样式。
伪元素的作用是在元素的内容前面或后面插入文档树之外的内容，并对其进行样式修饰，虽然用户可以看到这些伪元素生成的内容，但它们实际上并不存在于DOM树中。
常见的伪元素包括::before、::after、::first-letter、::first-line等

使用方式‌：在元素选择器后添加双冒号和伪元素名称，如p::before用于在段落内容前插入额外内容。

5.1 before after伪元素

:before和:after是CSS中的伪元素（在CSS3中更推荐使用双冒号形式::before和::after来表示伪元素，以与伪类区分开）
它们允许你在一个元素的内容之前或之后插入内容。这些插入的内容不会出现在DOM中，而是通过CSS生成的，通常用于添加装饰性内容，如图标、引号或其他视觉效果。

（1）基本用法

:before：在选定元素的内容之前插入内容。
:after：在选定元素的内容之后插入内容。
这两个伪元素必须与content属性一起使用，以定义要插入的内容，否则它们不会生效。
content属性可以包含字符串、图像或其他可用CSS生成的内容。
不改变DOM结构‌：虽然:before和:after可以在视觉上添加内容，但这些内容不会出现在DOM中，因此不会改变文档的实际内容。
可以像对待普通元素一样对:before和:after伪元素应用样式和行为，包括设置宽度、高度、背景、边框等。
兼容性‌：虽然:before和:after在大多数现代浏览器中都得到了很好的支持，但使用双冒号形式::before和::after可以提高代码的清晰度和兼容性，因为双冒号形式是CSS3的推荐写法。

（2）示例

p::before {content: "《";color: blue;
}p::after {content: "》";color: blue;
}
// 上面的CSS代码会在每个<p>元素的内容之前插入一个蓝色的“《”，在其内容之后插入一个蓝色的“》”

（3）应用场景

添加装饰性内容‌：如图标、引号、分隔符等。
‌清除浮动‌：通过:after伪元素和clear属性来清除浮动元素对父元素高度的影响。
‌创建自定义列表样式‌：在列表项前或后插入自定义样式。

（4）注意事项

虽然:before和:after伪元素非常强大且灵活，但它们应该被用于添加装饰性内容，而不是有实际意义的内容，因为用户无法复制或与之交互这些通过CSS生成的内容。

（三）css优先级和继承

1、优先级Specificity

CSS样式在浏览器中被解析的先后顺序，决定当多个样式规则应用于同一个HTML元素时，哪个样式规则最终会被应用的机制。
优先级由选择器的类型决定，并且可以通过特定的计算方法来量化。

1.1 计分规则

CSS优先级由四个部分组成，按照优先级从高到低排列如下：

‌内联样式（Inline Styles）‌：

优先级最高，直接写在HTML元素的style属性中。
计算分数：1000分。

‌ID选择器（ID Selectors）‌：

优先级次之，使用#符号标识。
计算分数：100分。

‌类选择器、伪类选择器、属性选择器（Class Selectors, Pseudo-Class Selectors, Attribute Selectors）‌：

优先级再次之，分别使用.、:和[]标识。
计算分数：10分。

‌元素选择器、伪元素选择器（Element Selectors, Pseudo-Element Selectors）‌：

优先级最低，使用HTML元素名称标识。
计算分数：1分。

1.2 优先级算法

每个CSS选择器都有一个特定的优先级分数，这个分数由选择器的类型决定，参看1.1计分规则；
当存在多个选择器组合时，分数累加；
总分越高，优先级越高；
特殊权重：!important，使一个样式的优先级高于其他任何非内联样式的优先级，但低于内联样式的优先级。
如果!important声明冲突，则比较优先权。
优先级相同，按照代码顺序，后定义的样式覆盖前面的。
由继承而得到的样式没有specificity的计算，它低于一切其它规则，比如全局选择符*定义的规则。
使用!important虽然可以强制某一条样式规则生效，但应尽量避免滥用，因为它会破坏CSS的层叠特性，导致样式难以维护。

1.3 应用技巧

合理组合选择器‌：当需要覆盖某个样式时，可以通过组合多个选择器来提高优先级。
‌避免过度复杂的选择器‌：虽然可以通过组合选择器来达到较高的优先级，但也会使得选择器变得过于复杂，不利于维护。
‌使用源顺序作为最后的手段‌：当两个选择器具有相同的优先级时，源顺序（即样式表的出现顺序）决定了哪一个规则将被应用，后面的会覆盖前面的，因为CSS的层叠顺序决定了样式的应用方式‌ 。

1.4 示例

<head lang="en"><style>#p{color: rebeccapurple;}.p{color: #2459a2;}p{color: yellow;}</style>
</head>
<body><p id="p" class="p" style="color: deeppink">hello yuan</p> <!--最终显示颜色：deeppink-->
</body>

1.5 注意事项

在实际开发中，合理利用优先级规则可以帮助我们更好地组织和管理样式表。
使用浏览器的开发者工具来检查元素的实际样式，可以帮助诊断样式未按预期显示的原因。

2、css继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
例如一个BODY定义了的颜色值也会应用到段落的文本中。
简单来说，父标签的样式会被内嵌的子孙标签所继承，除非子元素显式地设置了不同的值。
即使父元素的权重很高，子元素通过继承得到的权重也是0，任何显示申明的规则都可以覆盖其继承样式。这是因为继承的权重在CSS的优先级计算中是不被考虑的‌。
实际开发中，可以利用CSS的继承特性来简化样式表的编写，避免在多个子元素上重复设置相同的样式属性。
同时，也需要注意非继承属性的使用，确保在需要时显式地为子元素设置这些属性‌。

2.1 常见继承属性

字体（font）系列属性、文本（text）系列属性、颜色（color）属性、可见性（visibility）属性、光标（cursor）属性等。这些属性在父元素上设置后，子元素通常会继承相同的值‌

2.2 常见非继承属性

一些属性是不会被继承的，常见的非继承属性包括布局相关属性，如宽度（width）、高度（height）、边框（border）、外边距（margin）、内边距（padding）、背景（background）和显示类型（display）等。这些属性在父元素上设置后，子元素不会继承相同的值，除非子元素显式地设置了这些属性‌

（四）CSS的单位

在CSS中，单位用于指定元素的大小、间距、字体大小等属性。这些单位可以分为绝对单位、相对单位和自动（auto）三种类型。

1、绝对单位

绝对单位表示一个固定的值，在不同设备和环境下保持固定，不会因屏幕大小或分辨率以及浏览器设置而改变。常见的绝对单位包括：

‌px（像素）‌：

最常用的绝对单位，基于屏幕的分辨率。一个像素通常对应于屏幕上的一个点。
由于不同设备和屏幕的像素密度不同，相同的像素值在不同设备上可能会呈现不同的物理尺寸。

‌in（英寸）‌：

基于实际物理长度，1英寸等于2.54厘米。

‌cm（厘米）‌：

基于实际物理长度。

‌mm（毫米）‌：

基于实际物理长度。

‌pt（点）‌：

通常用于打印样式，1点等于1/72英寸。

2、相对单位

相对单位是基于其他元素的大小或视口（viewport）的大小来定义的，因此它们会根据父元素或视口的大小而改变，使得布局更加灵活和响应式，因为它们能够根据屏幕尺寸或用户设置自动调整元素的大小。常见的相对单位包括：
‌%（百分比）‌：

相对于父元素的大小。例如，如果父元素的宽度是200px，而子元素的宽度设置为50%，那么子元素的宽度就是100px。

‌em‌：

相对于当前元素的字体大小。例如，如果元素的字体大小为16px，那么1em就等于16px。
‌rem‌：
相对于根元素（<html>）的字体大小（很多浏览器的默认值是16px）的倍数。
使用场景：
响应式设计：通过简单地改变根元素的字体大小来调整整个页面的布局，而不需要逐个修改每个元素的 padding、margin 或其他长度属性，这使得布局更加灵活和响应式

‌一致性‌：使用 rem 可以确保在整个页面中，不同元素之间的间距保持一致性，特别是当你想要在不同的屏幕尺寸或设备上保持一致的视觉效果时。

可访问性‌：当用户通过浏览器设置改变字体大小时，使用 rem 单位的布局会自动调整以适应新的字体大小，满足可访问性需求。
/* 设置所有段落元素的内边距为 1rem */
p {padding: 1rem;
}/* 设置特定类的内边距 */
.my-class {padding: 1rem;
}
/*在上述示例中，无论是段落元素还是具有特定类的元素，它们的内边距都将被设置为 1rem。这意味着，如果根元素的字体大小是 16px，那么这些元素的内边距将是 16px。如果根元素的字体大小改变，那么这些元素的内边距也会相应地改变
*/
‌vw和vh（视口宽度和高度）‌：
相对于视口（视口是用户网页的可视区域，它随着窗口的缩放而改变）宽度（Viewport Width）和高度（Viewport Height）的1%。
例如，1vw等于视口宽度的1%，1vh等于视口高度的1%，100vw等于当前视口的完整宽度，100vh 等于当前视口的完整高度。
使用场景：

全屏布局‌：当你想要创建一个占据整个浏览器窗口高度的元素时，可以使用 height: 100vh;。这对于创建全屏背景、全屏图像或全屏视频等效果特别有用。

响应式设计‌：虽然 vh 单位本身不是响应式的（因为它基于视口大小，而不是基于元素或父容器的大小），但你可以结合媒体查询来使用它，以在不同的屏幕尺寸下调整元素的高度。

创建垂直滚动效果‌：如果你有一个内容区，你希望它在垂直方向上滚动，并且这个区域的高度应该与视口高度相匹配，那么你可以使用 height: 100vh; 来设置这个区域的高度。

注意事项：
视口变化‌：当浏览器窗口的大小改变时，使用 vh 单位设置的高度也会相应地改变。这意味着，如果你的布局依赖于特定的视口高度，你需要确保在视口大小变化时，布局仍然能够保持可用和美观。
兼容性‌：虽然现代浏览器都支持 vw和vh 单位，但在一些较旧的浏览器或某些特定的浏览器环境中（如某些移动设备的浏览器），可能不支持或支持不完全。因此，在使用 vw或vh 单位时，最好进行跨浏览器测试。
内边距、边框和外边距‌：记得 height 属性只设置内容区的高度。如果你想要包括内边距、边框或外边距在内的总高度与视口高度相匹配，你可能需要使用 box-sizing 属性来调整元素的盒模型。
示例：
示例
/* 设置全屏背景 */
.full-screen-background {height: 100vh;background-color: #333; /* 示例背景颜色 */
}/* 创建垂直滚动的内容区 */
.content-area {height: 100vh;overflow-y: auto; /* 允许垂直滚动 */
}
‌vmin‌ 和 ‌vmax‌：

分别基于视口的最小和最大边。1vmin等于视口最小边的1%，1vmax等于视口最大边的1%。

3、自动auto

auto不是一个具体的单位，而是一个特殊的关键字，用于让浏览器自动计算元素的大小或位置，例如：

使用width: auto;可以让浏览器根据内容的大小自动调整元素的宽度；
margin: auto;可以用于水平居中对齐块级元素。

4、适用场景

在实际开发中，选择合适的单位取决于具体的需求和上下文。
绝对单位适用于需要精确控制元素大小的情况；
相对单位则更适合创建响应式布局；
自动（auto）则提供了一种让浏览器自动处理布局细节的方法，从而简化了开发过程。

（五）CSS的常用属性

1、颜色属性color

值的表示方法：

颜色的英文单词，如：<div style="color:blueviolet">ppppp</div>
颜色的十六进制代码，如：<div style="color:#ffee33">ppppp</div>
用红、绿、蓝三种颜色的十进制调合表示，rgb(0~255，0~255， 0~255)，如：<div style="color:rgb(255,0,0)">ppppp</div>
用红、绿、蓝三种颜色的十进制调合表示+透明度，rgba(0~255，0~255， 0~255，0~1)，如：<div style="color:rgba(255,0,0,0.5)">ppppp</div>

各种表示方法的颜色表，可以参照：https://blog.csdn.net/2301_78888169/article/details/143754235

2、字体属性font

字体大小：font-size，可用像素px/百分比%/较大larger或较小smaller表示: 20px/50%/larger(smaller)
字体类型：font-family:'Lucida Bright'
字体粗细：font-weight，用数字100到100以及lighter/bold/border表示
斜体：font-style: inherit/italic/normal/oblique

3、背景属性background

背景颜色：background-color: cornflowerblue（值参考8.1颜色属性）
背景图片：background-image: url('图片路径');（图片尺寸不会变化，如果小于背景区域，则空白部分会复制图片平铺满）
背景图片是否平铺：background-repeat: no-repeat;(repeat:平铺满，repeat-x横向平铺，repeat-y纵向平铺，no-repeat不平铺)
背景位置：background-position: right top（或20px 20px）;(横向位置：left center right)(纵向位置：top center bottom)（与左部横向距离：20px）（与顶部纵向距离ÿ

二、CSS笔记

（一）css概述 1、定义 CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。 2、要点怎么找到标签怎么操作标签对象（element） 3、css的四种引入方式 3.1 行内式在标签的style属性中设定CSS样式。这种方…...

编程日记 2025/2/5 2:26:53

Alibaba开发规范_异常日志之日志规约：最佳实践与常见陷阱

文章目录引言1. 使用SLF4J日志门面规则解释代码示例正例反例 2. 日志文件的保存时间规则解释 3. 日志文件的命名规范规则解释代码示例正例反例 4. 使用占位符进行日志拼接规则解释代码示例正例反例 5. 日志级别的开关判断规则解释代码示例正例反例 6. 避免重复打印日志规则解释…...

编程日记 2025/2/5 2:24:50

使用istio实现权重路由

istio概述 **概述：**Istio 是一个开源的服务网格（Service Mesh）解决方案，主要用于管理、保护和监控微服务架构中的服务通信。它为微服务提供了基础设施层的控制功能，不需要更改应用程序的代码，从而解决服…...

编程日记 2025/2/5 2:23:45

M. Triangle Construction

题目链接：Problem - 1906M - Codeforces 题目大意：给一个 n 边形， 每一个边上有a[ i ] 个点， 在此多边形上求可以连的三角形有多少个， 每个点只能用一次。输入： 第一行是一个整数 N ( 3 ≤ N ≤ 200000…...

编程日记 2025/2/5 2:22:41

每天学点小知识之设计模式的艺术-策略模式

行为型模式的名称、定义、学习难度和使用频率如下表所示： 1.如何理解模板方法模式模板方法模式是结构最简单的行为型设计模式，在其结构中只存在父类与子类之间的继承关系。通过使用模板方法模式，可以将一些复杂流程的实现步骤封装在一系列基…...

编程日记 2025/2/5 2:21:40

机试题——到邻国目标城市的最短距离

题目描述 A国与B国是相邻的两个国家，每个国家都有很多城市。国家内部有很多连接城市的公路，国家之间也有很多跨国公路，连接两个国家的边界城市。两个国家一共有N个城市，编号从1到N，一共有M条公路，包括国内…...

编程日记 2025/2/5 2:17:35

Python + Tkinter + pyttsx3实现的桌面版英语学习工具

Python Tkinter pyttsx3实现的桌面版英语学习工具在多行文本框输入英文句子，双击其中的英文单词，给出英文读音和中文含义和音标。本程序查询本地词典数据。通过菜单栏"文件"->"打开词典编辑器"进入编辑界面。词典数据存储…...

编程日记 2025/2/5 2:16:34

【Vite + Vue + Ts 项目三个 tsconfig 文件】

Vite Vue Ts 项目三个 tsconfig 文件为什么 Vite Vue Ts 项目会有三个 tsconfig 文件？首先我们先了解什么是 tsconfig.json ? 为什么 Vite Vue Ts 项目会有三个 tsconfig 文件？ 在使用 Vite 创建 vue-ts 模板的项目时，会发现除了 ts…...

编程日记 2025/2/5 2:15:33

AI时代IT行业职业方向规划大纲

一、引言 AI时代的颠覆性影响 ChatGPT、Midjourney等生成式AI对传统工作模式的冲击案例：AI编程助手（GitHub Copilot）改变开发者工作流程核心问题：IT从业者如何避免被AI替代，并找到新机遇？ 二、AI时代…...

编程日记 2025/2/5 2:14:32

Mac M1 Comfyui 使用MMAudio遇到的问题解决？

问题1: AssertionError: Torch not compiled with CUDA enabled？ 解决办法：修改代码以 CPU 运行第一步：找到 /ComfyUI/custom_nodes/ComfyUI-MMAudio/mmaudio/ext/autoencoder/vae.py文件中的下面这两行代码 self.data_mean nn.Buffer(t…...

编程日记 2025/2/5 2:12:29

大语言模型深度研究功能：人类认知与创新的新范式

在人工智能迅猛发展的今天，大语言模型（LLM）的深度研究功能正在成为重塑人类认知方式的关键力量。这一突破性技术不仅带来了工具层面的革新，更深刻地触及了人类认知能力的本质。本文将从认知科学的角度出发，探讨LLM如何…...

编程日记 2025/2/5 2:10:27

[SAP ABAP] 性能优化

1.数据库编程OPEN SQL方面优化 1.避免使用SELECT *，只查询需要的字段即可尽量使用SELECT f1 f2 ... (具体字段) 来代替 SELECT * 写法 2. 如果确定只查询一条数据时，使用 SELECT SINGLE... 或者是 SELECT ...UP TO 1 ROWS ... 使用语法 UP TO n ROWS 来…...

编程日记 2025/2/5 2:01:16

并行计算、分布式计算与云计算：概念剖析与对比研究（表格对比）

什么是并行计算？什么是分布计算？什么是云计算？我们如何更好理解这3个概念，我们采用概念之间的区别和联系的方式来理解，做到切实理解，深刻体会。 1、并行计算与分布式计算并行计算、分布式计算都属于高性…...

编程日记 2025/2/5 1:54:08

ASP.NET Core Filter

目录什么是Filter？ Exception Filter 实现注意 ActionFilter 注意案例：自动启用事务的筛选器事务的使用 TransactionScopeFilter的使用什么是Filter？ 切面编程机制，在ASP.NET Core特定的位置执行我们自定义的代码。…...

编程日记 2025/2/5 1:51:04

doris：删除操作概述

在 Apache Doris 中，删除操作（Delete）是一项关键功能，用于管理和清理数据，以满足用户在大规模数据分析场景中的灵活性需求。 Doris 提供了丰富多样的删除功能支持，包括：DELETE 语句、删除标记&…...

编程日记 2025/2/5 1:50:01

【思维导图】redis

学习计划：将目前已经学的知识点串成一个思维导图。在往后的学习过程中，不断往思维导图里补充，形成自己整个知识体系。对于思维导图里的每个技术知识，自己用简洁的话概括出来， 训练自己的表达能力。...

编程日记 2025/2/5 1:46:46

申博经验贴

1. 所谓申博，最重要的就是定制的海投分成两个部分 1. 定制要根据每个教授去写不同的，一定不要泛泛的去写，一定要非常非常的具体，要引起教授的兴趣。每个教授每天都会收到几十封邮件，所以要足够的引起教授的注意&a…...

编程日记 2025/2/5 1:45:45

设置前端跨域配置示例： builder.Services.AddCors(option > {option.AddDefaultPolicy(policy > {policy.WithOrigins(originUrls).AllowAnyMethod().AllowAnyHeader().AllowCredentials();});});var app builder.Build();app.UseCors(); 【客户端缓存】接…...

编程日记 2025/2/5 1:42:42

YOLOV11-1：YoloV11-安装和CLI方式训练模型

YoloV11-安装和CLI方式训练模型 1.安装和运行1.1安装的基础环境1.2安装yolo相关组件1.3命令行方式使用1.3.1 训练1.3.2 预测本文介绍yoloV11的安装和命令行接口 1.安装和运行 1.1安装的基础环境 GPU环境，其中CUDA是12.4版本 1.2安装yolo相关组件 # 克隆github…...

编程日记 2025/2/5 1:39:35

自学习记录-编程语言的特点（持续记录）

我学习的顺序是C -> python -> C -> Java。在讲到某项语言的特点是，可能会时不时穿插其他语言的特点。 Java 1 注解Annotation Python中也有类似的Decorators。以下为AI学习了解到的： Java的Annotation是一种元数据（metadata)&a…...

编程日记 2025/2/5 1:37:31

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞！！！ 抽象现代智能交通系统 （ITS） 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 （…...

编程新知 2026/2/8 5:22:04

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句，它能够让用户直接在浏览器内练习SQL的语法，不需要安装任何软件。链接如下： sqliteviz 注意： 在转写SQL语法时，关键字之间有一个特定的顺序，这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

Linux云原生安全：零信任架构与机密计算

Linux云原生安全：零信任架构与机密计算构建坚不可摧的云原生防御体系引言：云原生安全的范式革命随着云原生技术的普及，安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测，到2025年，零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

C# 类和继承(抽象类)

抽象类抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。不能创建抽象类的实例。抽象类使用abstract修饰符声明。抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2026/1/29 16:25:24

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...

编程新知 2026/2/1 3:12:03

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

网站指纹识别

网站指纹识别网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...

编程新知 2026/2/2 17:06:29

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径卸载应用 adb uninstall 应用包名查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30

解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用

在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...

编程新知 2026/2/3 15:45:51

Python 训练营打卡 Day 47

注意力热力图可视化在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16