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

【CSS】CSS 使用全教程

news 来源：原创 2025/7/24 12:37:01

一个简单的小例子：

在这里插入图片描述
在经过CSS 样式润色后：

外部样式表 `<link>`

<link
  href="./path/to/stylesheet/style.css"
  rel="stylesheet"
  type="text/css"
>

内部样式表 `<style>`

<style>
  body {
    background-color: linen;
  }
</style>

内联样式 `style`

<h2 style="text-align: center;">
  居中文本
</h2>
<p style="color: blue; font-size: 18px;">
  蓝色，18像素文本
</p>

变量和计数器

counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;
:root {
  --bg-color: brown;
}
element {
  background-color: var(--bg-color);
}

查看: 动态内容

示例

组选择器

h1, h2 {
    color: red;
}

链选择器

h3.section-heading {
    color: blue;
}

属性选择器

div[attribute="SomeValue"] {
    background-color: red;
}

第一个子选择器

p:first-child {
    font-weight: bold;
}

无子选择器

.box:empty {
  background: lime;
  height: 80px;
  width: 80px;
}

选择器	说明
`*`	所有元素
`div`	所有 div 标签
`.classname`	具有类的所有元素
`#idname`	带 ID 的元素
`div,p`	所有 div 和段落
`#idname *`	#idname 中的所有元素

另见: 元素 / 类 / ID / 通配选择器

选择器	说明
`div.classname`	具有特定类名的 div
`div#idname`	具有特定 ID 的 div
`div p`	div 中的所有段落
`div > p`	父元素是 div 的 `P` 标签
`div + p`	div 之后的第一个同级 `P` 标签
`div ~ p`	div 之后所有的同级 `P` 标签

另见: 相邻兄弟 / 通用兄弟 / 子选择器

选择器	说明
`a[target]`	带有 target 属性 #
`a[target="_blank"]`	在新标签中打开 #
`a[href^="/index"]`	以 /index 开头 #
`[class\|="chair"]`	以chair开头 #
`[class*="chair"]`	包含chair #
`[title~="chair"]`	包含单词 chair #
`a[href$=".doc"]`	以 .doc 结尾 #
`[type="button"]`	指定类型 #

另见: 属性选择器

选择器	说明
`a:link`	链接正常 #
`a:active`	链接处于点击状态 #
`a:hover`	鼠标悬停链接 #
`a:visited`	访问链接 #

/* 未访问链接 */
a:link { color: blue; }        
/* 已访问链接 */
a:visited { color: purple; }   
/* 用户鼠标悬停 */
a:hover { background: yellow; }
/* 激活链接 */
a:active { color: red; }

选择器	说明
`p::after`	在 p 之后添加内容 #
`p::before`	在 p 之前添加内容 #
`p::first-letter`	p中的第一个字母 #
`p::first-line`	p 中的第一行 #
`::selection`	由用户选择 #
`::placeholder`	占位符属性 #
`:root`	文档根元素 #
`:target`	突出显示活动锚点 #
`div:empty`	没有子元素的元素 #
`p:lang(en)`	带有 en 语言属性的 P #
`:not(span)`	不是跨度的元素 #
`:host`	shadowDOM 中选择自定义元素 #
`::backdrop`	处于全屏模式的元素样式 #
`::marker`	`li` 项目符号或者数字 #
`::file-selector-button`	type="file" `input` 按钮 #

选择器	说明
`input:checked`	检查 `input` #
`input:disabled`	禁用 `input` #
`input:enabled`	启用的 `input` #
`input:default`	有默认值的元素 #
`input:blank`	空的输入框 #
`input:focus`	`input` 有焦点 #
`input:in-range`	范围内的值 #
`input:out-of-range`	`input` 值超出范围 #
`input:valid`	`input` 有效值 #
`input:invalid`	`input` 无效值 #
`input:optional`	没有必需的属性 #
`input:required`	带有必需属性的 `input` #
`input:read-only`	具有只读属性 #
`input:read-write`	没有只读属性 #
`input:indeterminate`	带有 indeterminate 状态 #

选择器	说明
`p:first-child`	第一个孩子 #
`p:last-child`	最后一个孩子 #
`p:first-of-type`	第一个 p 类型的元素 #
`p:last-of-type`	某种类型的最后一个 #
`p:nth-child(2)`	其父母的第二个孩子 #
`p:nth-child(3n42)`	Nth-child(an + b) 公式 #
`p:nth-last-child(2)`	后面的二孩 #
`p:nth-of-type(2)`	其父级的第二个 p #
`p:nth-last-of-type(2)`	...从后面 #
`p:only-of-type`	其父级的唯一性 #
`p:only-child`	其父母的唯一孩子 #
`:is(header, div) p`	可以选择的元素 #
`:where(header, div) p`	与 `:is` 相同 #
`a:has(> img)`	包含 `img` 元素的 `a` 元素 #
`::first-letter`	第一行的第一个字母 #
`::first-line`	第一行应用样式 #

属性	说明
`font-family:`	字体族名或通用字体族名 #
`font-size:`	字体的大小 #
`letter-spacing:`	文本字符的间距 #
`line-height:`	多行文本间距 #
`font-weight:`	粗细程度 #
`font-style:`	字体样式 #
`text-decoration:`	文本的修饰线外观 #
`text-align:`	相对它的块父元素对齐 #
`text-transform:`	指定文本大小写 #

另见: Font

速记

font: italic    400     14px    /     1.5        sans-serif
      ┈┈┬┈┈┈    ┈┬┈     ┈┬┈┈          ┈┬┈        ┈┬┈┈┈┈┈┈┈┈
       样式      粗细    大小(必需的)    行高        字体(必需的)

属性	说明
`background:`	(速记)
`background-color:`	查看: Colors
`background-image:`	一个或者多个背景图像
`background-position:`	背景图片设置初始位置
`background-size:`	背景图片大小
`background-clip:`	背景(图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面
`background-repeat:`	图像重复方式
`background-attachment:`	`scroll`/`fixed`/`local`

速记

background: #ff0   url(a.jpg)   left     top    /  100px auto   no-repeat   fixed;
            #abc   url(b.png)   center   center /  cover        repeat-x    local;
            ┈┬┈┈    ┈┬┈┈┈┈┈┈┈   ┈┬┈┈     ┈┬┈       ┈┈┬┈┈┈┈┈┈┈   ┈┈┬┈┈┈┈┈┈   ┈┈┬┈┈┈
            颜色     图片         位置x    位置x       图片大小     图像重复方式  位置是在视口内固定

示例

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background: url(img_man.jpg) no-repeat center;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%,
  rgba(13,232,230,1) 35%,
  rgba(0,212,255,1) 100%);

速记

animation:  bounce   300ms      linear     100ms    infinite   alternate-reverse  both                   reverse  
            ┈┬┈┈     ┈┬┈┈┈      ┈┬┈┈┈┈     ┈┈┬┈┈    ┈┈┈┬┈┈┈┈   ┈┈┬┈┈┈┈┈┈┈┈┈┈┈┈┈┈  ┈┈┬┈┈┈                 ┈┈┬┈┈┈
            动画名    动画时间     缓动函数    延迟     运行的次数   动画是否反向播放      如何将样式应用于其目标    是否运行或者暂停

属性	说明
`animation:`	(速记)
`animation-name:`	动画名 #
`animation-duration:`	动画周期的时长 #
`animation-timing-function:`	缓动函数 #
`animation-delay:`	延迟 #
`animation-iteration-count:`	运行的次数 #
`animation-direction:`	动画是否反向播放 #
`animation-fill-mode:`	如何将样式应用于其目标 #
`animation-play-state:`	是否运行或者暂停 #

另见: 动画(Animation)

示例

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

容器

.container {
  display: flex;
  display: inline-flex;
  
  flex-direction: row;            /* ltr - 行(左向右) ▶ */
  flex-direction: row-reverse;    /* rtl - 行(右向左) ◀ */
  flex-direction: column;         /* top-bottom ▼ */
  flex-direction: column-reverse; /* bottom-top ▲ */
  
  flex-wrap: nowrap;       /* 摆放到一行 */
  flex-wrap: wrap;         /* 被打断到多个行中 */
  
  align-items: flex-start; /* 垂直对齐 - 顶部 */
  align-items: flex-end;   /* 垂直对齐 - 底部 */
  align-items: center;     /* 垂直对齐 - 中间 */
  align-items: stretch;    /* 所有人都一样的高度 (默认) */
  
  justify-content: flex-start;    /* [◀◀◀        ] */
  justify-content: center;        /* [    ■■■    ] */
  justify-content: flex-end;      /* [        ▶▶▶] */
  justify-content: space-between; /* [◀    ■    ▶] */
  justify-content: space-around;  /* [ ■   ■   ■ ] */
  justify-content: space-evenly;  /* [  ■  ■  ■  ] */
}

子元素

.container > div {

  /* 这个: */
  flex: 1 0 auto;
  /* 相当于这个： */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;

  order: 1;

  align-self: flex-start;  /* left */
  margin-left: auto;       /* right */
}

justify-content

justify-content: flex-start | flex-end | center | space-between

flex-start：左对齐(默认值)

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆╭┈┈╮╭┈╮╭┈┈┈╮                     ┆
┆╰┈┈╯╰┈╯╰┈┈┈╯                     ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

flex-end：右对齐

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆                     ╭┈┈╮╭┈╮╭┈┈┈╮┆
┆                     ╰┈┈╯╰┈╯╰┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

center：居中

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆          ╭┈┈╮╭┈╮╭┈┈┈╮           ┆
┆          ╰┈┈╯╰┈╯╰┈┈┈╯           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

space-between：两端对齐，项目之间的间隔都相等

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆╭┈┈╮           ╭┈╮          ╭┈┈┈╮┆
┆╰┈┈╯           ╰┈╯          ╰┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆   ╭┈┈╮        ╭┈╮       ╭┈┈┈╮   ┆
┆   ╰┈┈╯        ╰┈╯       ╰┈┈┈╯   ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

上面示例，假设主轴为从左到右

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap：不换行(默认)

╭1╮╭2╮╭3╮╭4╮╭5╮╭6╮╭7╮╭8╮╭9╮╭10╮
╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈┈╯

wrap：换行，第一行在 上方

╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
╭8┈╮ ╭9┈╮ ╭10╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯

wrap-reverse：换行，第一行在 下方

╭8┈╮ ╭9┈╮ ╭10╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯
╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯

项目都排在一条线（又称"轴线"）上

flex-direction

flex-direction: row | row-reverse | column | column-reverse;

╭┈┈╮  ▲         ╭┈┈╮  ┆
╰┈┈╯  ┆         ╰┈┈╯  ┆
╭┈┈╮  ┆         ╭┈┈╮  ┆
╰┈┈╯  ┆         ╰┈┈╯  ┆     ┈┈┈┈┈┈┈┈┈┈┈▶    ◀┈┈┈┈┈┈┈┈┈┈┈
╭┈┈╮  ┆         ╭┈┈╮  ┆    ╭┈┈╮ ╭┈┈╮ ╭┈┈╮  ╭┈┈╮ ╭┈┈╮ ╭┈┈╮
╰┈┈╯  ┆         ╰┈┈╯  ▼    ╰┈┈╯ ╰┈┈╯ ╰┈┈╯  ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
┈┬┈┈┈┈┈┈        ┈┬┈┈┈┈┈┈    ┈┬┈┈┈┈┈┈┈┈┈┈┈   ┈┬┈┈┈┈┈┈┈┈┈┈┈ 
column-reverse  column       row             row-reverse

属性决定主轴的方向（即项目的排列方向）

align-items

align-items: flex-start | flex-end | center | baseline | stretch;

  ▶ flex-start(起点对齐)    ▶ flex-end(终点对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆  ┆                     ┆
┆ ┆  ┆ ┆  ┆ ╰┈┈╯ ┆  ┆ ┆  ┆      ╭┈┈╮           ┆
┆ ╰┈┈╯ ┆  ┆      ╰┈┈╯ ┆  ┆ ╭┈┈╮ ┆  ┆      ╭┈┈╮ ┆
┆      ╰┈┈╯           ┆  ┆ ┆  ┆ ┆  ┆ ╭┈┈╮ ┆  ┆ ┆
┆                     ┆  ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
  ▶ center(中点对齐)        ▶ stretch(占满整个容器的高度)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆      ╭┈┈╮           ┆  ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆
┆ ╭┈┈╮ ┆  ┆      ╭┈┈╮ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆ ┆  ┆ ┆  ┆ ╭┈┈╮ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆ ┆  ┆ ┆  ┆ ╰┈┈╯ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆ ╰┈┈╯ ┆  ┆      ╰┈┈╯ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆      ╰┈┈╯           ┆  ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
  ▶ baseline(第一行文字的基线对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  ╭┈┈┈┈┈┈╮               ╭┈┈┈┈┈┈╮             ┆
┆  ┆      ┆ ╭┈┈┈┈╮ ╭┈┈┈┈╮ ┆      ┆ ╭┈┈┈┈╮╭┈┈┈┈╮┆
┆  ┆ text ┆ ┆text┆ ┆text┆ ┆ text ┆ ┆text┆┆text┆┆
┆  ┆      ┆ ╰┈┈┈┈╯ ┆    ┆ ┆      ┆ ╰┈┈┈┈╯┆    ┆┆
┆  ╰┈┈┈┈┈┈╯        ╰┈┈┈┈╯ ╰┈┈┈┈┈┈╯       ╰┈┈┈┈╯┆
┆                                              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

 ▶ flex-start(起点对齐)     ▶ flex-end(终点对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆  ┆                      ┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆  ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
┆ ╭┈┈┈╮╭╮              ┆  ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
┆ ╰┈┈┈╯╰╯              ┆  ┆ ╭┈┈┈╮╭╮              ┆
┆                      ┆  ┆ ╰┈┈┈╯╰╯              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
 ▶ center(中点对齐)         ▶ stretch(满整个交叉轴)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆                      ┆  ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆  ┆ ┆  ┆┆ ┆┆   ┆┆┆┆    ┆ ┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆  ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
┆ ╭┈┈┈╮╭╮              ┆  ┆ ╭┈┈┈╮╭╮╭┈╮           ┆
┆ ╰┈┈┈╯╰╯              ┆  ┆ ┆   ┆┆┆┆ ┆           ┆
┆                      ┆  ┆ ╰┈┈┈╯╰╯╰┈╯           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
 ▶ space-between(两端对齐)  ▶ space-around(均匀分布项目)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ 
┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆  ┆                      ┆ 
┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆  ┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆ 
┆                      ┆  ┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆ 
┆                      ┆  ┆                      ┆ 
┆                      ┆  ┆ ╭┈┈╮                 ┆ 
┆ ╭┈┈╮                 ┆  ┆ ╰┈┈╯                 ┆ 
┆ ╰┈┈╯                 ┆  ┆                      ┆ 
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

order

.item {
  order: <integer>;
}

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ ╭1┈╮ ╭1┈┈╮ ╭1┈╮ ╭2┈╮ ╭3┈┈┈┈┈┈╮ ┆ ┆ ╭2┈┈┈┈╮ ┆
┆ ╰┈┈╯ ╰┈┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈┈┈┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ╭2┈┈┈┈╮ ┆
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈╯ ┆
┆ ╭-┈┈╮ ╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮   ┆ ┆ ╭99┈┈┈╮ ┆
┆ ┆-1 ┆ ┆ 1 ┆ ┆ 2      ┆ ┆ 5 ┆   ┆ ┆ ┆     ┆ ┆
┆ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯   ┆ ┆ ╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

属性 order 定义项目的排列顺序。数值越小，排列越靠前，默认为 0

flex-grow

.item {
  flex-grow: <number>; /* default 0 */
}

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈1┈┈╮╭┈┈2┈┈╮╭┈┈1┈┈╮ ┆
┆ ╰┈┈┈┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈1┈╮╭┈┈┈┈2┈┈┈┈╮╭┈1┈╮ ┆
┆ ╰┈┈┈╯╰┈┈┈┈┈┈┈┈┈╯╰┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

属性 flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

移动布局

.container {
  display: flex;
  flex-direction: column;
}
.container > .top {
  flex: 0 0 100px;
}
.container > .content {
  flex: 1 0 auto;
}

一个固定高度的顶部栏和一个动态高度的内容区域

Table-like 像表格

.container {
  display: flex;
}
/* 这里的“px”值只是建议的百分比 */
.container > .checkbox { flex: 1 0 20px; }
.container > .subject  { flex: 1 0 400px; }
.container > .date     { flex: 1 0 120px; }

这会创建具有不同宽度的列，但会根据情况相应地调整大小

变量

定义 CSS 变量

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

变量用法

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

另见: CSS Variable

计数器

/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Increment "my-counter" by 1 */
counter-increment: my-counter;

/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;

/* Reset "my-counter" to 0 */
counter-reset: my-counter;

另见: Counter set

使用计数器

body { counter-reset: section; }
h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}

ol {
  counter-reset: section;   
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}

counter()

返回一个代表计数器的当前值的字符串

<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
    counter(listCounter, upper-roman) "]";
}

显示

1. [1]==[I]
2. [2]==[II]
3. [3]==[III]

counters()

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
   content: counters(count, '.', upper-alpha) ') ';
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
}

嵌套计数器，返回表示指定计数器当前值的连接字符串

env()

<meta name="viewport" content="... viewport-fit=cover">

body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

用户代理定义的环境变量值插入你的 CSS 中

max()

从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值

width: max(10vw, 4em, 80px);

例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽

repeat() 轨道列表的重复片段

repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])

定义了一个长宽范围的闭区间

修改 input type="color" 样式

input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

CSS 重置

html {
  box-sizing: border-box;
}

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

有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子

使用 unset 而不是重置所有属性

使用 all 速记来指定元素的所有属性。将值设置为 unset 会将元素的属性更改为其初始值：

button {
  all: unset;
}

注意：IE11 不支持 all 和 unset 速记

超出显示省略号

p {
  overflow: hidden;/*超出部分隐藏*/
  /* 超出部分显示省略号 */
  text-overflow:ellipsis;
  /* 规定段落中的文本不进行换行 */
  white-space: nowrap;
  width: 250px;/*需要配合宽度来使用*/
}

使用图像作为光标

div {
  cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
  /* 表情符号作为光标 */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto;
}

将文本截断到特定的行数

.overflow-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

多行文本截断到特定的行数，末尾显示省略号 (...)

使用 :root 表示灵活类型

响应式布局中的字体大小应该能够根据每个视口进行调整，您可以使用 :root 根据视口高度和宽度计算字体大小

:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

您可以根据 :root 计算的值使用根 em 单位：

body {
  font: 1rem/1.6 sans-serif;
}

吸附滚动

.container {
  height: 250px;
  overflow-x: scroll;
  display: flex;
  scroll-snap-type: x mandatory;
  column-gap: 10px;
}
.child {
  flex: 0 0 66%;
  width: 250px;
  background-color: #663399;
  scroll-snap-align: center;
}

可用于 轮播图 效果

给 “默认” 链接定义样式

给 “默认” 链接定义样式：

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式

用 rem 调整全局大小；用 em 调整局部大小

在根元素设置基本字体大小后 (html { font-size: 100%; }), 使用 em 设置文本元素的字体大小:

h2 { 
  font-size: 2em;
}
p {
  font-size: 1em;
}

然后设置模块的字体大小为 rem:

article {
  font-size: 1.25rem;
}
aside .module {
  font-size: .9rem;
}

现在，每个模块变得独立，更容易、灵活的样式便于维护

隐藏没有静音、自动播放的影片

这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：

video[autoplay]:not([muted]) {
  display: none;
}

再次，我们利用了 :not() 的优点

为更好的移动体验，为表单元素设置字体大小

当触发 <select> 的下拉列表时，为了避免表单元素在移动浏览器（iOS Safari 和其它）上的缩放，加上font-size：

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

使用指针事件来控制鼠标事件

指针事件允许您指定鼠标如何与其触摸的元素进行交互。要禁用按钮上的默认指针事件，例如：

button:disabled {
  opacity: .5;
  pointer-events: none;
}

就这么简单

检查本地是否安装了字体

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank-Mono"),
    /* 否则，请下载它！ */
    url("//...a.server/DankMono.woff");
}

code {
  font-family: "Dank Mono",
        system-ui-monospace;
}

您可以在远程获取字体之前检查是否在本地安装了字体，这也是一个很好的性能提示

为表单元素设置 `:focus`

a:focus, button:focus, input:focus,
select:focus, textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置。使表单元素的焦点比浏览器的默认实现更加突出和一致

垂直居中任何东西

html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

...还有 CSS 网格：

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

图片对齐不变形

img {
  width: 200px;
  height: 200px;
  /** 确保图片按原始宽高比例进行缩放 */
  object-fit: cover;
  object-position: left top;
  transition: 1s;
}
img:hover {
  /** 指定图片显示的位置，结合鼠标移动+过渡动画 */
  object-position: right bottom;
}

多行截断，展示省略号

.clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html 文本超过 3 行将被截断，显示省略号...

<p class="clamp">
  展示多行文本，超过 3 行将被截断，显示省略号...
</p>

【CSS】CSS 使用全教程

CSS 使用全教程介绍 CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于描述 HTML 或 XML 文档的布局和外观，它允许开发者将文档的内容结构与样式表现分离，通过定义一系列的样式规则来控制网页…...

编程日记 2025/7/24 12:37:01

【Linux知识】RPM软件包安装命令行详细说明

文章目录概述安装软件包升级软件包卸载软件包查询软件包信息验证软件包从软件包中提取文件注意事项概述 rpm（Red Hat Package Manager）是红帽系 Linux 发行版（如 Red Hat、CentOS、Fedora 等）用于管理软件包的工具，…...

编程日记 2025/7/24 12:35:56

SpringBoot3.0不建议使用spring.factories，使用AutoConfiguration.imports新的自动配置方案

文章目录一、写在前面二、使用imports文件1、使用2、示例比对3、完整示例参考资料一、写在前面 spring.factories是一个位于META-INF/目录下的配置文件，它基于Java的SPI(Service Provider Interface)机制的变种实现。这个文件的主要功能是允许开发者声明接口的…...

编程日记 2025/7/21 6:01:00

c++项目-KV存储-模仿redis实现kv键值对存储的基本功能。

KV存储引擎的技术解析：数组、哈希与红黑树实现及其在网络I/O中的应用。内容概要：本文档深入介绍了基于数组、哈希表和红黑树的键值存储引擎的设计与实现。文档首先阐述了系统的总体架构与类图关系，之后分别对底层存储结构进行了详细解释&am…...

编程日记 2025/7/24 12:32:24

docker ssh远程连接

目录操作命令： 确保 SSH 配置允许 root 登录： docker提交： 操作命令： # 进入容器 docker exec -ti lbg04 /bin/bash# 更新包管理并安装 SSH 服务（Ubuntu/Debian 示例） apt-get update apt-get install…...

编程日记 2025/7/23 8:27:36

一、边缘节点推理优化 1.1 模型轻量化技术矩阵 1.2 TensorRT加速配置示例 # 使用TensorRT优化YOLOv8builder trt.Builder(TRT_LOGGER)network builder.create_network()parser trt.OnnxParser(network, TRT_LOGGER)with open("yolov8s.onnx", "rb") a…...

编程日记 2025/7/23 21:23:43

css基础-浮动

一、浮动是什么？ 比喻：就像泳池里的救生圈原始用途：让文字环绕图片（像杂志排版）意外发展：被用来做页面布局（像用救生圈搭浮桥） 二、浮动怎么产生的？ 场景还原&#…...

编程日记 2025/7/24 12:34:33

Linux TTY设备汇总

目录 1. ‌tty（终端设备统称） 2. ‌ptm（伪终端主设备）与pts（伪终端从设备） 3. ‌ttys（串行端口终端） 4. ‌ttyACM（USB CDC ACM设备） 5. ‌ttyGS（USB Gadget Serial设备）主要联系‌ ‌典型应用场景‌ TTY_CORE: drivers/tty/tty_io.c:tty_register_driver…...

编程日记 2025/7/24 12:34:32

Android studio组合教程--做出一个类似于QQ的登录页面

之前我们学过了html与Android的开发，以及各种组件的学习，这次我们做一个完整向的登录页面，作为一次大作业。注意里面的一图片可以自由发挥，但要注意文件路径保持准确，这里给出参考路径： 背景路径&…...

编程日记 2025/7/24 12:32:22

iPhone 16 Plus ：凉凉了

大屏就是生产力，这句话就像思想钢印一样，深入人心。但苹果用户是个例外，根据内行人的爆料，iPhone 16 Plus 彻底凉凉了，难怪它会是最后一代Plus。根据知名博主数码闲聊站透露，截止3 月 9 号，i…...

编程日记 2025/7/22 19:48:23

【MySQL报错】：Column count doesn’t match value count at row 1

MySQL报错：Column count doesn’t match value count at row 1 意思是存储的数据与数据库表的字段类型定义不相匹配. 由于类似 insert 语句中，前后列数不等造成的主要有3个易错点： 要传入表中的字段数和values后面的值的个数不相等。由于类…...

编程日记 2025/7/21 7:59:36

2025 polarctf春季个人挑战赛web方向wp

来个弹窗先用最基础的xss弹窗试一下 <script>alert("xss")</script>没有内容，猜测过滤了script，双写绕过一下 <scrscriptipt>alert("xss")</scscriptript>background 查看网页源代码查看一下js文件类…...

编程日记 2025/7/15 23:56:55

Midscene.js自然语言驱动的网页自动化全指南

一、概述网页自动化在数据抓取、UI 测试和业务流程优化中发挥着重要作用。然而，传统工具如 Selenium 和 Puppeteer 要求用户具备编程技能，编写复杂的选择器和脚本维护成本高昂。Midscene.js 通过自然语言接口革新了这一领域，用户只需描述任…...

编程日记 2025/7/23 17:20:07

PDF与Markdown的量子纠缠：一场由VLM导演的文档界奇幻秀

缘起：当格式界的"泰坦尼克号"撞上"黑客帝国" 某个月黑风高的夜晚，在"二进制酒吧"的霓虹灯下： PDF（西装革履地晃着威士忌）: “我的每一页都像瑞士手表般精密，连华尔街的秃鹫都为我倾倒！” Markdown（穿着带洞的拖鞋）: “得了吧老古董！…...

编程日记 2025/7/20 20:45:03

Spring Boot JSON序列化深度管控：忽略指定字段+Jackson扩展策略破解双向实体循环引用问题

一、JsonIgnore的核心原理与工作机制 1. 注解作用原理 JsonIgnore是Jackson库的核心注解之一，其工作原理基于 Jackson的AnnotationIntrospector机制。在序列化/反序列化过程中，Jackson会扫描Java对象的所有字段和方法上的注解。当检测到JsonIgnore时&a…...

编程日记 2025/7/21 10:23:49

msvcp140.dll是什么文件？修复丢失msvcp140.dll的方法指南

当计算机显示"msvcp140.dll未找到"的报错信息时，这实际反映了Windows系统运行机制中的一个关键环节出现断链。作为Microsoft Visual C可再发行组件包的核心动态链接库，msvcp140.dll承担着程序与系统资源之间的桥梁作用，特别是在处理…...

编程日记 2025/7/18 10:45:53

ES集群的部署

实验步骤实验目的： 验证ES集群的容错性、扩展性数据分布与查询性能优化。环境准备 1、准备两台服务器服务器 1、10.1.1.20 cpu 2核内存：4G 硬盘100G 2、10.1.1.21 cpu 2核内存：4G 硬盘100G 2、修改两台静态ip 3、关闭防…...

编程日记 2025/7/20 17:37:16

resetForm() 方法用于重置表单

resetForm() 方法是 Vue.js 中用于重置表单的一个常见操作。下面是对这段代码的详细解析： 1. 代码作用 resetForm() 方法的作用是重置表单，将表单中的所有输入字段恢复到初始状态（通常是清空或恢复到默认值）。 2. 代码解析 re…...

编程日记 2025/7/20 17:06:10

Java后端API限流秘籍：高并发的防护伞与实战指南

目录导航 📜 🛡️ 为什么需要API限流？🧠 主流限流算法大解析👩‍💻 阿里巴巴的限流实践📏 四大黄金定律🤼 限流策略组合拳🏆 限流场景实战💻 技术实现方案🌟 最佳实践分享📈 结语与展望📚 推荐阅读 1. 🛡️ 为什么需要API限流？在高并发环境中，未…...

编程日记 2025/7/18 21:12:17

团体协作项目总结Git

使用Git开放时候发现本地, 有些代码并没有被拉取到本地仓库, 又不想再commit一次, 这时候我就想到了 git commit --amend 合并提交 git commit --amend 修改git提交记录用法详解可以将本次提交记录合并到上一次合并提交 git commit --amendgit rebase -i master^^ // 假设我…...

编程日记 2025/7/21 16:08:18

mysql 入门

1.已经下载过却卸载不干净？注册表清理不到位？ 使用greek绿色版强力卸载，可以一键卸载注册表里的信息。 2.如何启动mysql服务？ 以管理员方式启动cmd 输入 net start mysql80 如何停止？ net stop mysql80 2.将mysql客…...

编程日记 2025/7/20 1:22:41

1.基于TCP的简单套接字服务器实现

目录 1. TCP通信流程 2. 服务器端的通信流程 2.1 创建用于监听的套接字 2.2 绑定本地IP地址和端口 2.3 设置监听 2.4 等待接受客户端的连接请求 2.5 与客户端进行通信 2.6 客户端连接服务器 3.代码实现 client.cpp server.cpp 运行方式在本文中，我们将…...

编程日记 2025/7/19 17:20:05

MantisBT在Windows10上安装部署详细步骤

MantisBT 是一款基于 Web 的开源缺陷跟踪系统，以下是在 Windows 10 上安装部署 MantisBT 的详细步骤： 1. 安装必要的环境 MantisBT 是一个基于 PHP 的 Web 应用程序，因此需要安装 Web 服务器（如 Apache）、PHP 和数据…...

编程日记 2025/7/24 4:02:00

zookeepernacoskafka之间的联系

一、ZooKeeper与Kafka的协同工作原理 1. 核心关系：Kafka对ZooKeeper的依赖在Kafka 2.8版本之前，ZooKeeper是Kafka集群的“大脑”，负责管理集群元数据、协调节点状态和故障恢复。两者的协同主要通过以下关键机制实现： Broker注册…...

编程日记 2025/7/14 13:35:08

【QT】布局器

参考博客：https://blog.csdn.net/Fdog_/article/details/107522283 目录布局管理器概念常见的布局管理器及特点🔵QHBoxLayout水平布局🔵QVBoxLayout垂直布局 🔵QGridLayout网格布局 🔵QFormLayout表单布局 QT 高级布…...

编程日记 2025/7/21 17:35:53

力扣45.跳跃游戏

45. 跳跃游戏 II - 力扣（LeetCode） 代码区： #include<vector> class Solution {public:int jump(vector<int>& nums) {int ans[10005] ;memset(ans,1e4,sizeof(ans));ans[0]0;for(int i0;i<nums.size();i){for(int j1;j…...

编程日记 2025/7/24 4:56:28

【蓝桥杯】真题路径（数论+dp）

思路求最小公倍数LCM问题很好求，这里看似是求图最短路径，实际上由于只有[i,i21]之间存在路径，所以用线性dp效率更高，当然用bfs，dijstra，floyed也可，毕竟是填空题。 code def gcd(a,b):if a …...

编程日记 2025/7/20 22:47:18

敏捷需求分析之INVEST原则

INVEST原则是什么 INVEST 是用户故事的六个核心标准，由敏捷教练 Bill Wake 提出，用于确保用户故事具备可执行性和价值导向性。 1. I - Independent（独立的）含义：用户故事应独立于其他故事，避免依赖关系。问题：若故事 A 必须等待故事 B 完成才能开发，会导致进度阻塞。…...

编程日记 2025/7/16 5:14:10

Apache Flink技术原理深入解析：任务执行流程全景图

前言本文隶属于专栏《大数据技术体系》，该专栏为笔者原创，引用请注明来源，不足和错误之处请在评论区帮忙指出，谢谢！本专栏目录结构和参考文献请见大数据技术体系思维导图 📌 引言 Apache Flink 作为一款高性能的分布式流处理引擎，其内部执行机制精妙而复杂。本文将…...

编程日记 2025/7/20 1:43:12

UE5小石子阴影在非常近距离才显示的问题

Unreal中采用LandscapeGrass生成的地形，在MovieRenderQueue中渲染时阴影显示距离有问题，在很近的时候才会有影子，怎么解决？ 地面上通过grass生成的小石子的阴影只能在很近的时候才能显示出来，需要如下调整 r.Shadow.R…...

编程日记 2025/7/21 14:07:48

WebAssembly实践，性能也有局限性

个人博客原文地址 WebAssembly（简称 wasm） 是一种旨在突破 Web 性能瓶颈的技术方案。它由 W3C 官方推动，并且得到了主流浏览器的广泛支持。它的核心思想是通过运行其他高性能编程语言（比如 C、C、Rust 等）来实现复杂功…...

编程日记 2025/7/19 8:24:12

第一天学爬虫

阅读提示：我今天才开始尝试爬虫，写的不好请见谅。一、准备工具 requests库：发送HTTP请求并获取网页内容。BeautifulSoup库：解析HTML页面并提取数据。pandas库：保存抓取到的数据到CSV文件中。二、爬取步骤发送请求…...

编程日记 2025/7/16 22:36:42

【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（11）

1.问题描述： 鸿蒙push右侧图表没有正常展示。解决方案： .jpg格式文件，头信息必须是这个“jpg：ffd8”。 2.问题描述： 安卓端App在开发者平台申请了Android应用的通知消息自分类权益，鸿蒙应用的自分类权…...

编程日记 2025/7/21 21:10:20

Spring WebSecurityCustomizer 的作用

Spring WebSecurityCustomizer 是 Spring Security 框架中用来自定义 Web 安全配置的一个接口。它的主要作用是在开发中我们能够精细的控制哪些请求会被 Spring Security 完全忽略，不进行任何安全检查和过滤。我们可以把它想象成是 Spring Security 大门上的一…...

编程日记 2025/7/19 8:18:28

uniapp动态循环表单校验失败：初始值校验

问题现象 💥 在实现动态增减的单价输入表单时（基于uv-form组件），遇到以下诡异现象： <uv-input>的v-model绑定初始值为数字类型时，required规则失效 ❌数字类型与字符串类型校验表现不一致 🔢技术栈背景 🛠️ 框架：Vue3 + uni-appUI库：uv-ui校验方案：计算属…...

编程日记 2025/7/21 5:42:41

线性代数核心概念与NumPy科学计算实战全解析

前言学习方法： 思维导图，梳理多记忆，函数名和功能，参数学会应用，不要钻牛角尖一、浅解线性代数 1.1标量标量是一个只有大小没有方向的量。在数学上，标量通常表示为一个普通的数字，如‌质量…...

编程日记 2025/7/23 11:40:23

如何理解 Apache Iceberg 与湖仓一体（Lakehouse）？

一、什么是湖仓一体（Lakehouse）？ 湖仓一体是一种融合了数据湖的灵活存储能力与数据仓库的高效分析功能的现代数据架构。它通过整合两者的优势，解决了传统架构的局限性，为企业数据处理提供了更全面的解决方案。数据湖…...

编程日记 2025/7/18 23:22:26

若依框架二次开发——若依集成 JSEncrypt 实现密码加密传输方式

文章目录一、问题场景二、相关技术介绍1. RSA 加密算法2. JSEncrypt三、实现步骤1. 前端加密处理2. 后端解密处理3. 登录逻辑处理四、测试流程1. 前端测试2. 后端测试3. 运行效果五、总结一、问题场景在 RuoYi 系统中，默认情况下，用户在登录时会将明文密码直接传输到服务器…...

编程日记 2025/7/23 20:29:02

Rust Web 开发新选择：探索 Hyperlane 轻量级 HTTP 服务器框架

Rust Web 开发新选择：探索 Hyperlane 轻量级 HTTP 服务器框架在 Web 开发领域，Rust 以其高性能和内存安全性逐渐受到关注。而在众多 Web 框架中，hyperlane 作为一款轻量级、高性能的 HTTP 服务器框架，正悄然成为 Rust 生态中的明…...

编程日记 2025/7/19 4:51:07

初识模版和 STL

前言今天简单和大家分享一下C重要的两个内容，经过之前的学习我们已经了解了C的大致语法，接下来就是C相关的库和一些操作了，他们能极大地缩小我们C语言阶段的代码量，让写代码变得轻松起来。 1.关于模版 <1>泛型编程我们学…...

编程日记 2025/7/22 5:26:42

加新题了，MySQL 8.0 OCP 认证考试题库更新

MySQL 8.0 OCP 认证考试题库更新 MySQL 8.0 Database Administrator 考试科目：1Z0-908 近期发现，MySQL OCP认证考试题库发生变化，出现了很多新题，对此，CUUG专门收集整理了最新版本的MySQL考试原题，并会给…...

编程日记 2025/7/23 10:23:11

26考研——树与二叉树_树、森林（5）

408答疑文章目录二、树、森林树的基本概念树的定义和特性树的定义树的特性基本术语树的基本术语和概念祖先、子孙、双亲、孩子、兄弟和堂兄弟结点的层次、度、深度和高度树的度和高度分支结点和叶结点有序树和无序树路径和路径长度森林的基本术语和概念森林的定义森林与树的…...

编程日记 2025/7/24 1:15:30

26考研——图_图的基本概念（6）

408答疑文章目录一、图的基本概念图的定义非空性非线性结构顶点和边的表示顶点边有向图 & 无向图有向图有向图 G 1 G_1 G1 的表示无向图无向图 G 2 G_2 G2 的表示简单图 & 多重图简单图多重图顶点的度、入度和出度顶点的度有向图的度路径、路径长度和回路…...

编程日记 2025/6/28 1:57:52

笔试面试01 c/c++

基础知识什么是数据结构？请简要描述常见的数据结构类型。数据结构是组织和存储数据的方式，以便于高效访问和修改。常见的数据结构包括： 数组：固定大小的线性数据结构，支持随机访问。链表：由节点组成的线…...

编程日记 2025/7/18 11:47:53

2025清华大学：DeepSeek教程全集（PDF+视频精讲，共10份）.zip

一、资料列表第一课：Deepseek基础入门第二课：DeepSeek赋能职场第三课：普通人如何抓住DeepSeek红利第四课：让科研像聊天一样简单第五课：DeepSeek与AI幻觉第六课：基于DeepSeek的AI音乐词曲的创造法第…...

编程日记 2025/7/17 1:48:14

消息队列(Kafka及RocketMQ等对比联系)

目录消息队列一、为什么使用消息队列？消息队列有什么优点/缺点？介绍下Kafka、ActiveMQ、RabbitMQ、RocketMQ有什么优点缺点，如何取舍？ 1.公司业务场景是什么，这个业务场景有什么挑战，如果不用MQ有什么麻…...

编程日记 2025/7/24 8:46:33

Go 语言 fmt 模块的完整方法详解及示例

以下是 Go 语言 fmt 模块的完整方法详解及示例，涵盖所有核心功能： 一、输出函数将数据写入标准输出、文件或字符串。 1. Print / Println / Printf 功能 Print: 写入标准输出，不换行。Println: 写入标准输出并换行。Printf: 格式化写入标…...

编程日记 2025/7/19 12:38:48

Centos 7 安装VNC服务

Centos 7 安装VNC服务 1. 安装 TigerVNC2. 设置 VNC 密码3. 创建并配置 x0vncserver 服务4. 启用并启动服务5. 检查服务状态6. 配置防火墙7. 连接 VNC问题1:出现无法安装可能是镜像源导致的。手动配置镜像源清除 YUM 缓存并重新加载 1. 安装 TigerVNC 确保已安装 TigerVNC 服务…...

编程日记 2025/7/19 13:55:21

3.25-3 request断言

一.request断言 if断言案例： import requests srequests.Session() url1"http://49.233.201.254:8080/cms/manage/loginJump.do" data1{userAccount:admin,loginPwd:123456} h1{"Content-Type":"application/x-www-form-urlencoded&…...

编程日记 2025/7/22 6:56:03

cmakelist中添加opencv

版本选择 qt的msvc，版本2019 opencv版本 4.5.3 配置了环境变量 x64下的v14中的bin 配置头文件 {"configurations": [{"name": "Win32","includePath": ["${workspaceFolder}","d:\\QT\\6.5.3\\msvc20…...

编程日记 2025/7/22 2:22:12

CSS 使用全教程

介绍

外部样式表 <link>

内部样式表 <style>

内联样式 style

添加 class 类

!important

选择器

文本颜色

背景

字体

定位

动画

注释

Flex 布局

Grid 布局

变量和计数器

CSS 选择器

示例

组选择器

链选择器

属性选择器

第一个子选择器

无子选择器

基础

组合器

属性选择器

用户操作伪类

伪类

输入伪类

结构伪类

CSS 字体

属性

速记

示例

大小写

@font-face

CSS 颜色

命名颜色

十六进制颜色

rgb() 颜色

HSL 颜色

其它

全局值

CSS 背景

属性

速记

示例

CSS 盒子模型

最大值/最小值

边距/补白

Box-sizing

能见度

Auto 关键字

溢出(Overflow)

CSS 动画

速记

属性

示例

Javascript 事件

CSS Flexbox

简单实例

容器

子元素

justify-content

flex-wrap

flex-direction

align-items

align-content

order

flex-grow

CSS Flexbox 技巧

垂直中心

垂直中心 (2)

重新排序

移动布局

Table-like 像表格

Vertical 垂直的

左和右

CSS Grid 网格布局

外部样式表 `<link>`

内部样式表 `<style>`

内联样式 `style`

`<textarea>`自动增加其高度

在用作间距的换行符上设置 `display: none`

给 `body` 添加行高