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

【前端知识】常用CSS样式举例

news 文章来源：https://blog.csdn.net/wendao76/article/details/145417615 2025/4/20 18:50:55

文章目录

    • 一、Flex盒子布局
      • 1. Flexbox 的基本概念
      • 2. Flex 容器的属性
        • 2.1 `display`
        • 2.2 `flex-direction`
        • 2.3 `flex-wrap`
        • 2.4 `justify-content`
        • 2.5 `align-items`
        • 2.6 `align-content`
      • 3. Flex 项目的属性
        • 3.1 `order`
        • 3.2 `flex-grow`
        • 3.3 `flex-shrink`
        • 3.4 `flex-basis`
        • 3.5 `flex`
        • 3.6 `align-self`
      • 4. 示例
      • 5. 总结
    • 二、Position位置
      • 1. `static`（默认值）
      • 2. `relative`
      • 3. `absolute`
      • 4. `fixed`
      • 5. `sticky`
      • 总结
      • 注意事项
    • 三、Padding和Margin空白
    • 1. **`padding`（内边距）**
      • 属性值
      • 单独设置某个方向的内边距
      • 示例
    • 2. **`margin`（外边距）**
      • 属性值
      • 单独设置某个方向的外边距
      • 特殊值
      • 示例
    • 3. **`padding` 和 `margin` 的区别**
    • 4. **盒子模型（Box Model）**
      • 示例
    • 5. **注意事项**
    • 四、文字样式
    • 1. **字体相关属性**
      • 1.1 `font-family`
      • 1.2 `font-size`
      • 1.3 `font-weight`
      • 1.4 `font-style`
      • 1.5 `font-variant`
      • 1.6 `font`（简写属性）
    • 2. **文字颜色**
      • 2.1 `color`
    • 3. **文字对齐与装饰**
      • 3.1 `text-align`
      • 3.2 `text-decoration`
      • 3.3 `text-transform`
    • 4. **文字间距**
      • 4.1 `letter-spacing`
      • 4.2 `word-spacing`
      • 4.3 `line-height`
    • 5. **其他文字样式**
      • 5.1 `text-shadow`
      • 5.2 `white-space`
    • 五、伪类和伪元素
      • 一、伪类（Pseudo-classes）
        • 常见的伪类包括：
      • 二、伪元素（Pseudo-elements）
        • 常见的伪元素包括：
      • 三、伪类与伪元素的区别
    • 六、动画相关样式
      • 一、`transition`属性
      • 二、`transform`属性
      • 三、`@keyframes`规则
      • 四、`animation`属性
    • 七、待补充

一、Flex盒子布局

CSS Flexbox（弹性盒子布局）是一种用于页面布局的一维布局模型，旨在更高效地分配容器内的空间和对齐项目。它特别适合处理不同屏幕尺寸和设备上的布局问题。

1. Flexbox 的基本概念

Flexbox 布局涉及两个主要概念：

  • Flex 容器（Flex Container）：应用 display: flex 或 display: inline-flex 的元素，其子元素成为 Flex 项目。
  • Flex 项目（Flex Items）：Flex 容器的直接子元素。

2. Flex 容器的属性

2.1 display

定义容器为 Flex 容器：

.container {display: flex; /* 或 inline-flex */
}
2.2 flex-direction

定义主轴方向（即项目的排列方向）：

.container {flex-direction: row | row-reverse | column | column-reverse;
}
  • row（默认）：水平排列，从左到右。
  • row-reverse：水平排列，从右到左。
  • column：垂直排列，从上到下。
  • column-reverse：垂直排列，从下到上。
2.3 flex-wrap

定义项目是否换行：

.container {flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap（默认）：不换行。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
2.4 justify-content

定义项目在主轴上的对齐方式：

.container {justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start（默认）：左对齐。
  • flex-end：右对齐。
  • center：居中对齐。
  • space-between：两端对齐，项目之间的间隔相等。
  • space-around：每个项目两侧的间隔相等。
  • space-evenly：项目之间的间隔相等。
2.5 align-items

定义项目在交叉轴上的对齐方式：

.container {align-items: flex-start | flex-end | center | baseline | stretch;
}
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：居中对齐。
  • baseline：基线对齐。
  • stretch（默认）：拉伸以填充容器。
2.6 align-content

定义多根轴线的对齐方式（适用于多行 Flex 容器）：

.container {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：居中对齐。
  • space-between：两端对齐，轴线之间的间隔相等。
  • space-around：每根轴线两侧的间隔相等。
  • stretch（默认）：轴线拉伸以填充容器。

3. Flex 项目的属性

3.1 order

定义项目的排列顺序：

.item {order: <integer>; /* 默认值为 0 */
}

数值越小，排列越靠前。

3.2 flex-grow

定义项目的放大比例：

.item {flex-grow: <number>; /* 默认值为 0 */
}

如果所有项目的 flex-grow 都为 1，它们将等分剩余空间。如果一个项目的 flex-grow 为 2，它将占据更多空间。

3.3 flex-shrink

定义项目的缩小比例：

.item {flex-shrink: <number>; /* 默认值为 1 */
}

如果空间不足，项目将缩小。值为 0 时，项目不缩小。

3.4 flex-basis

定义项目在分配多余空间之前的主轴尺寸：

.item {flex-basis: <length> | auto; /* 默认值为 auto */
}

可以设置为固定长度（如 200px）或 auto。

3.5 flex

flex-grow、flex-shrink 和 flex-basis 的简写：

.item {flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

默认值为 0 1 auto。

3.6 align-self

定义单个项目在交叉轴上的对齐方式，覆盖 align-items：

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
  • auto（默认）：继承容器的 align-items。
  • 其他值与 align-items 相同。

4. 示例

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div>
</div>

.container {display: flex;flex-direction: row;justify-content: space-between;align-items: center;height: 200px;border: 1px solid #000;
}.item {flex: 1;margin: 10px;background-color: lightblue;text-align: center;line-height: 100px;
}

5. 总结

Flexbox 提供了一种灵活的方式来布局和对齐项目，特别适合响应式设计。通过掌握 Flex 容器和 Flex 项目的属性，可以轻松实现复杂的布局需求。

二、Position位置

CSS 中的 position 属性用于控制元素的定位方式。它有五个主要值：static、relative、absolute、fixed 和 sticky。每个值决定了元素在文档中的定位行为。

1. static（默认值）

  • 描述：元素按照正常的文档流进行排列，top、right、bottom、left 和 z-index 属性无效。
  • 示例：
    div {position: static;
}

2. relative

  • 描述：元素相对于其正常位置进行定位。可以使用 top、right、bottom 和 left 属性调整位置，但不会影响其他元素的布局。
  • 示例：
    div {position: relative;top: 10px;left: 20px;
}

3. absolute

  • 描述：元素相对于最近的已定位（非 static）祖先元素进行定位。如果没有这样的祖先元素，则相对于初始包含块（通常是 <html> 元素）。元素会脱离文档流，不占据空间。
  • 示例：
    div {position: absolute;top: 50px;left: 100px;
}

4. fixed

  • 描述：元素相对于视口进行定位，即使页面滚动，元素也会固定在指定位置。常用于创建固定导航栏或页脚。
  • 示例：
    div {position: fixed;bottom: 0;right: 0;
}

5. sticky

  • 描述：元素根据用户的滚动行为在 relative 和 fixed 之间切换。当元素在视口中时，表现为 relative；当元素滚动到指定位置时，表现为 fixed。
  • 示例：
    div {position: sticky;top: 0;
}

总结

  • static：默认定位，元素按正常文档流排列。
  • relative：相对自身正常位置定位。
  • absolute：相对最近的已定位祖先元素定位。
  • fixed：相对视口定位，固定不动。
  • sticky：根据滚动行为在 relative 和 fixed 之间切换。

注意事项

  • 使用 absolute 或 fixed 定位时，元素会脱离文档流，可能影响其他元素的布局。
  • sticky 定位需要指定 top、right、bottom 或 left 中的一个或多个值，否则行为与 relative 相同。

通过合理使用 position 属性，可以实现复杂的布局效果。

三、Padding和Margin空白

padding 和 margin 是 CSS 中用于控制元素内外边距的两个重要属性。它们分别用于调整元素内容与边框之间的距离（padding）以及元素与其他元素之间的距离（margin）。

1. padding（内边距）

padding 是元素内容与边框之间的空间。它位于元素的内容区域和边框之间，背景颜色或背景图片会覆盖 padding 区域。

属性值

  • 单个值：设置所有四个方向的内边距。
    padding: 10px; /* 上下左右均为 10px */
  • 两个值：第一个值设置上下内边距，第二个值设置左右内边距。
    padding: 10px 20px; /* 上下 10px，左右 20px */
  • 三个值：第一个值设置上内边距，第二个值设置左右内边距，第三个值设置下内边距。
    padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */
  • 四个值：分别设置上、右、下、左的内边距（顺时针方向）。
    padding: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */

单独设置某个方向的内边距

  • padding-top：上内边距
  • padding-right：右内边距
  • padding-bottom：下内边距
  • padding-left：左内边距

示例

div {padding: 20px 30px; /* 上下 20px，左右 30px */background-color: lightblue;
}

2. margin（外边距）

margin 是元素与其他元素之间的空间。它位于元素边框之外，背景颜色或背景图片不会覆盖 margin 区域。

属性值

  • 单个值：设置所有四个方向的外边距。
    margin: 10px; /* 上下左右均为 10px */
  • 两个值：第一个值设置上下外边距，第二个值设置左右外边距。
    margin: 10px 20px; /* 上下 10px，左右 20px */
  • 三个值：第一个值设置上外边距，第二个值设置左右外边距，第三个值设置下外边距。
    margin: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */
  • 四个值：分别设置上、右、下、左的外边距（顺时针方向）。
    margin: 10px 20px 30px 40px; /* 上 10px，右 20px，下 30px，左 40px */

单独设置某个方向的外边距

  • margin-top：上外边距
  • margin-right：右外边距
  • margin-bottom：下外边距
  • margin-left：左外边距

特殊值

  • auto：常用于水平居中。
    margin: 0 auto; /* 上下 0，左右自动（水平居中） */
  • 0：取消外边距。
  • 负值：允许元素与其他元素重叠。
    margin-top: -10px; /* 向上移动 10px */

示例

div {margin: 20px 30px; /* 上下 20px，左右 30px */background-color: lightgreen;
}

3. padding 和 margin 的区别

特性padding（内边距）margin（外边距）
位置内容与边框之间边框与其他元素之间
背景覆盖背景颜色或图片会覆盖 padding 区域背景颜色或图片不会覆盖 margin 区域
影响尺寸增加 padding 会增加元素的实际尺寸margin 不会影响元素的实际尺寸
负值不支持负值支持负值
默认值通常为 0通常为 0，但某些元素有默认外边距

4. 盒子模型（Box Model）

padding 和 margin 是盒子模型的重要组成部分。盒子模型包括：

  • 内容区域（Content）：元素的实际内容。
  • 内边距（Padding）：内容与边框之间的空间。
  • 边框（Border）：围绕内容和内边距的边框。
  • 外边距（Margin）：边框与其他元素之间的空间。

示例

div {width: 200px;height: 100px;padding: 20px;border: 5px solid black;margin: 30px;
}
  • 元素的总宽度 = width + padding + border + margin = 200px + 40px (20px*2) + 10px (5px*2) + 60px (30px*2) = 310px。

5. 注意事项

  • 外边距折叠（Margin Collapse）：当两个垂直相邻的元素都有外边距时，它们的外边距会合并为一个较大的外边距。
  • box-sizing 属性：默认情况下，padding 和 border 会增加元素的总尺寸。可以通过 box-sizing: border-box 让 padding 和 border 包含在元素尺寸内。
    div {box-sizing: border-box;width: 200px;padding: 20px; /* 不会增加元素的总宽度 */
}

通过合理使用 padding 和 margin，可以更好地控制元素的布局和间距，提升页面的视觉效果和用户体验。

四、文字样式

CSS 提供了丰富的属性来控制文字的样式，包括字体、大小、颜色、对齐方式、间距等。以下是常用的文字相关样式及其详细说明：

1. 字体相关属性

1.1 font-family

  • 作用：设置文字的字体。
  • 语法：
    font-family: "字体名称", 备用字体, 通用字体;
  • 示例：
    p {font-family: "Arial", "Helvetica", sans-serif;
}
    • 如果用户设备上没有 Arial 字体，则会尝试使用 Helvetica，最后使用通用的 sans-serif 字体。

1.2 font-size

  • 作用：设置文字的大小。
  • 语法：
    font-size: 值;
  • 常用单位：
    • px：像素（绝对单位）。
    • em：相对于父元素字体大小的倍数。
    • rem：相对于根元素（<html>）字体大小的倍数。
    • %：相对于父元素字体大小的百分比。
  • 示例：
    p {font-size: 16px;
}

1.3 font-weight

  • 作用：设置文字的粗细。
  • 语法：
    font-weight: 值;
  • 常用值：
    • normal：正常（默认值）。
    • bold：加粗。
    • bolder：更粗。
    • lighter：更细。
    • 数字值：100 到 900（400 相当于 normal，700 相当于 bold）。
  • 示例：
    p {font-weight: bold;
}

1.4 font-style

  • 作用：设置文字的样式。
  • 语法：
    font-style: 值;
  • 常用值：
    • normal：正常（默认值）。
    • italic：斜体。
    • oblique：倾斜（类似于斜体）。
  • 示例：
    p {font-style: italic;
}

1.5 font-variant

  • 作用：设置小型大写字母。
  • 语法：
    font-variant: 值;
  • 常用值：
    • normal：正常（默认值）。
    • small-caps：小型大写字母。
  • 示例：
    p {font-variant: small-caps;
}

1.6 font（简写属性）

  • 作用：简写形式设置字体样式。
  • 语法：
    font: font-style font-variant font-weight font-size/line-height font-family;
  • 示例：
    p {font: italic small-caps bold 16px/1.5 "Arial", sans-serif;
}

2. 文字颜色

2.1 color

  • 作用：设置文字的颜色。
  • 语法：
    color: 颜色值;
  • 颜色值：
    • 颜色名称：如 red、blue。
    • 十六进制值：如 #ff0000。
    • RGB/RGBA：如 rgb(255, 0, 0) 或 rgba(255, 0, 0, 0.5)。
    • HSL/HSLA：如 hsl(0, 100%, 50%) 或 hsla(0, 100%, 50%, 0.5)。
  • 示例：
    p {color: #333;
}

3. 文字对齐与装饰

3.1 text-align

  • 作用：设置文字的水平对齐方式。
  • 语法：
    text-align: 值;
  • 常用值：
    • left：左对齐（默认值）。
    • right：右对齐。
    • center：居中对齐。
    • justify：两端对齐。
  • 示例：
    p {text-align: center;
}

3.2 text-decoration

  • 作用：设置文字的装饰线。
  • 语法：
    text-decoration: 值;
  • 常用值：
    • none：无装饰（默认值）。
    • underline：下划线。
    • overline：上划线。
    • line-through：删除线。
    • underline overline：组合使用。
  • 示例：
    p {text-decoration: underline;
}

3.3 text-transform

  • 作用：设置文字的大小写转换。
  • 语法：
    text-transform: 值;
  • 常用值：
    • none：无转换（默认值）。
    • uppercase：全部大写。
    • lowercase：全部小写。
    • capitalize：首字母大写。
  • 示例：
    p {text-transform: uppercase;
}

4. 文字间距

4.1 letter-spacing

  • 作用：设置字符之间的间距。
  • 语法：
    letter-spacing: 值;
  • 常用单位：px、em。
  • 示例：
    p {letter-spacing: 2px;
}

4.2 word-spacing

  • 作用：设置单词之间的间距。
  • 语法：
    word-spacing: 值;
  • 常用单位：px、em。
  • 示例：
    p {word-spacing: 5px;
}

4.3 line-height

  • 作用：设置行高（行间距）。
  • 语法：
    line-height: 值;
  • 常用值：
    • 无单位数字：相对于当前字体大小的倍数。
    • 固定值：如 20px。
  • 示例：
    p {line-height: 1.5;
}

5. 其他文字样式

5.1 text-shadow

  • 作用：为文字添加阴影效果。
  • 语法：
    text-shadow: 水平偏移 垂直偏移 模糊半径 颜色;
  • 示例：
    p {text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

5.2 white-space

  • 作用：控制空白符的处理方式。
  • 语法：
    white-space: 值;
  • 常用值：
    • normal：合并空白符，自动换行（默认值）。
    • nowrap：合并空白符，不换行。
    • pre：保留空白符，不换行。
    • pre-wrap：保留空白符，自动换行。
    • pre-line：合并空白符，自动换行。
  • 示例：
    p {white-space: nowrap;
}

通过合理使用这些文字样式属性，可以轻松实现丰富的文字效果，提升页面的可读性和美观性。

五、伪类和伪元素

CSS中的伪类和伪元素是两种用于选择特定元素或元素部分并为其应用样式的重要机制。以下是关于CSS伪类和伪元素的详细说明：

一、伪类（Pseudo-classes）

伪类用于选择文档的特定状态或位置的元素。它们以冒号（:）开头，后面跟伪类名称。伪类不对应于任何实际的DOM元素，而是基于元素的当前状态或位置来选择元素。

常见的伪类包括：

  1. 用户交互伪类：

    • :hover：当用户将鼠标悬停在元素上时应用样式。
    • :active：当元素被激活时（如被点击）应用样式。
    • :focus：当元素获得焦点时应用样式。

  2. 结构性伪类：

    • :first-child：选择属于其父元素的第一个子元素的每个元素。
    • :last-child：选择属于其父元素的最后一个子元素的每个元素。
    • :nth-child(n)：选择属于其父元素的第n个子元素的每个元素，n可以是数字、关键字（even、odd）或表达式（如2n+1）。
    • :only-child：选择属于其父元素的唯一子元素的每个元素。
    • :empty：选择没有子元素（包括文本节点）的元素。
    • :root：选择文档的根元素，通常是<html>元素。

  3. 否定伪类：

    • :not(selector)：选择不匹配给定选择器的元素。

  4. 表单伪类：

    • :checked：匹配每个当前被选中的<input>元素。
    • :disabled：匹配每个当前被禁用的<input>元素。
    • :enabled：匹配每个当前被启用的<input>元素。
    • :indeterminate：匹配每个处于不确定状态的<input>元素。
    • :valid 和 :invalid：分别匹配有效和无效的表单元素。

  5. 其他伪类：

    • :link 和 :visited：分别匹配未访问和已访问的链接。
    • :target：匹配当前URL片段标识符的目标元素。
    • :scope：匹配当前样式作用域内的元素。
    • :dir(ltr|rtl)：选择具有特定书写方向的元素。

二、伪元素（Pseudo-elements）

伪元素用于选择元素的一部分内容，并为这部分内容设置样式。伪元素在文档树中并不真正存在，但可以被样式化。在CSS3中，伪元素使用双冒号（::）语法来区分它们与伪类。

常见的伪元素包括：

  1. ::before：在元素内容的前面插入生成的内容。通常与content属性一起使用来指定要插入的内容。

  2. ::after：在元素内容的后面插入生成的内容。同样与content属性一起使用。

  3. ::first-line：用于选择块级元素的首行文本，并为它设置样式。

  4. ::first-letter：用于选择块级元素的首字母，并为它设置样式。

  5. ::selection：用于匹配用户高亮（选中）的部分，并为它设置样式。需要注意的是，::selection伪元素只能用于设置一些有限的CSS属性，如color、background等。

  6. ::placeholder：用于匹配<input>或<textarea>元素的占位符文本，并为它设置样式。

三、伪类与伪元素的区别

  • 作用对象：伪类用于选择元素的特定状态或位置，而伪元素用于选择元素的一部分内容。
  • 语法：伪类以单冒号（:）开头，而伪元素在CSS3中以双冒号（::）开头（尽管在CSS2.1及更早版本中，伪元素也使用单冒号）。
  • 功能：伪类基于元素的当前状态或位置来选择元素，而伪元素则插入或选择元素的一部分内容来进行样式化。

综上所述，CSS伪类和伪元素提供了强大的选择机制，使得开发者能够为文档的特定部分或状态应用样式，从而实现更丰富的视觉效果和用户体验。

六、动画相关样式

CSS动画相关样式主要包括transition属性、transform属性、@keyframes规则以及animation属性。以下是对这些动画相关样式的详细说明：

一、transition属性

transition属性用于实现元素的渐变动画，它允许元素在某些CSS属性发生变化时，以平滑过渡的方式展现这些变化。

  • 语法：transition: property duration timing-function delay;

  • 参数：

    • property：指定需要进行过渡的CSS属性，如width、height、background-color等。
    • duration：过渡动画的持续时间，即动画从开始到结束所需的时间。
    • timing-function：缓动函数，用于指定动画的速度曲线。常见的值有ease、ease-in、ease-out、ease-in-out、linear等。
    • delay：动画开始前的延迟时间。

二、transform属性

transform属性用于对元素进行2D或3D转换，包括旋转、缩放、倾斜和移动等操作。

  • 旋转（rotate）：transform: rotate(angle);。其中angle为旋转角度，正数表示顺时针旋转，负数表示逆时针旋转。
  • 缩放（scale）：transform: scale(x, y);。其中x和y分别为水平和垂直方向的缩放比例。如果只指定一个值，则两个方向使用相同的缩放比例。
  • 倾斜（skew）：transform: skew(x-angle, y-angle);。其中x-angle和y-angle分别为水平和垂直方向的倾斜角度。
  • 移动（translate）：transform: translate(x, y);。其中x和y分别为水平和垂直方向的移动距离。也可以使用百分比形式，相对于元素自身的宽高进行平移。

此外，transform属性还支持3D转换，如rotateX、rotateY、rotateZ进行3D旋转，以及scale3d、translate3d进行3D缩放和移动。

三、@keyframes规则

@keyframes规则用于定义动画序列中的关键帧样式。通过指定动画开始、结束以及中间点的样式，可以创建复杂的动画效果。

  • 语法：@keyframes animation-name { keyframe-selector { css-styles; } }

  • 参数：

    • animation-name：关键帧列表的名字，要保证全局且唯一。
    • keyframe-selector：关键帧选择器，用于选择触发关键帧的时间点。通常使用百分比来指定，如0%表示动画开始时，100%表示动画结束时。也可以使用from和to来分别代替0%和100%。
    • css-styles：关键帧改变的样式。

四、animation属性

animation属性用于将关键帧动画应用到元素上，并指定动画的一些行为和细节。

  • 语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;

  • 参数：

    • name：指定由@keyframes描述的关键帧名称。
    • duration：设置动画一个周期的时长。
    • timing-function：缓动函数，用于指定动画在关键帧之间的速度曲线。
    • delay：设置动画开始前的延迟时间。
    • iteration-count：动画播放的次数，可以使用infinite表示无限次循环。
    • direction：动画播放的方向。常见的值有normal（正常播放）、reverse（反向播放）、alternate（正反交替播放）和alternate-reverse（反正交替播放）。
    • fill-mode：指定动画执行前后如何为目标元素应用样式。常见的值有none（默认值，动画前后不应用关键帧样式）、forwards（动画结束后保留最后一帧的样式）、backwards（动画开始前应用第一帧的样式）和both（同时具有forwards和backwards的特点）。
    • play-state：动画播放的状态，可以是paused（暂停）或running（播放）。

综上所述，CSS动画相关样式提供了丰富的功能，允许开发者创建各种复杂的动画效果。通过合理使用这些样式，可以为网页增添生动的视觉效果，提升用户体验。

七、待补充

相关文章：

【前端知识】常用CSS样式举例

文章目录 一、Flex盒子布局1. Flexbox 的基本概念2. Flex 容器的属性2.1 display2.2 flex-direction2.3 flex-wrap2.4 justify-content2.5 align-items2.6 align-content 3. Flex 项目的属性3.1 order3.2 flex-grow3.3 flex-shrink3.4 flex-basis3.5 flex3.6 align-self 4. 示例…...

编程日记 2025/2/3 6:42:14

硕成C语言1笔记

硕成C语言1笔记 这一节内容主要讲了进制转换 进制转换&#xff1a;十进制转其他进制用短除法&#xff0c;最后逆序输出十六进制的15表示的是F&#xff0c;255的十六进制是&#xff1a;FF其他进制转十进制&#xff1a;按权展开&#xff0c;从n的0次方开始&#xff0c;一直到最…...

编程日记 2025/2/3 6:40:06

[SAP ABAP] Debug Skill

SAP ABAP Debug相关资料 [SAP ABAP] DEBUG ABAP程序中的循环语句 [SAP ABAP] 静态断点的使用 [SAP ABAP] 在ABAP Debugger调试器中设置断点 [SAP ABAP] SE11 / SE16N 修改标准表(慎用)...

编程日记 2025/2/3 6:38:00

理解 InnoDB 如何处理崩溃恢复

在数据库领域&#xff0c;数据的一致性与可靠性至关重要。InnoDB 存储引擎的崩溃恢复机制是保障数据安全的核心&#xff0c;其中 Doublewrite Buffer 和 Redo Log 发挥着关键作用。下面&#xff0c;我们将详细探讨 InnoDB 从写入到崩溃恢复的全过程。 一、写入流程 修改页面&…...

编程日记 2025/2/3 6:36:58

UE5 蓝图学习计划 - Day 8：触发器与交互事件

在游戏开发中&#xff0c;触发器&#xff08;Trigger&#xff09; 和 交互事件&#xff08;Interaction Events&#xff09; 是实现游戏动态交互的关键。例如&#xff0c;当角色接近一扇门时&#xff0c;它可以自动打开&#xff0c;或者当玩家进入特定区域时&#xff0c;游戏触…...

编程日记 2025/2/3 6:34:56

根据接口规范封装网络请求和全局状态管理

封装通用页面接口网络请求 axios &#xff08;request&#xff09;封装见&#xff1a;https://blog.csdn.net/XiugongHao/article/details/143449863 /*** 封装通用页面的增删改查接口*/ export function postPageListData(pageName: string, queryInfo: any) {return request.…...

编程日记 2025/2/3 6:32:54

Unet 改进：在encoder和decoder间加入TransformerBlock

目录 1. TransformerBlock 2. Unet 改进 3. 完整代码 Tips：融入模块后的网络经过测试，可以直接使用，设置好输入和输出的图片维度即可 1. TransformerBlock TransformerBlock是Transformer模型架构的基本组件，广泛应用于机器翻译、文本摘要和情感分析等自然语言处理任务…...

编程日记 2025/2/3 6:30:49

work-stealing算法 ForkJoinPool

专栏系列文章地址&#xff1a;https://blog.csdn.net/qq_26437925/article/details/145290162 本文目标&#xff1a; 重点是通过例子程序理解work-stealing算法原理 目录 work-stealing算法算法原理和优缺点介绍使用场景work-stealing例子代码 ForkJoinPoolnew ForkJoinPool(…...

编程日记 2025/2/3 6:29:45

DeepSeek Janus-Pro：多模态AI模型的突破与创新

近年来&#xff0c;人工智能领域取得了显著的进展&#xff0c;尤其是在多模态模型&#xff08;Multimodal Models&#xff09;方面。多模态模型能够同时处理和理解文本、图像等多种类型的数据&#xff0c;极大地扩展了AI的应用场景。DeepSeek(DeepSeek-V3 深度剖析&#xff1a;…...

编程日记 2025/2/3 6:28:43

STM32-时钟树

STM32-时钟树 时钟 时钟...

编程日记 2025/2/3 6:26:36

hot100_21. 合并两个有序链表

将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4] 示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#xff1a;[…...

编程日记 2025/2/3 6:25:34

代码讲解系列-CV（一）——CV基础框架

文章目录 一、环境配置IDE选择一套完整复现安装自定义cuda算子 二、Linux基础文件和目录操作查看显卡状态压缩和解压 三、常用工具和pipeline远程文件工具版本管理代码辅助工具 随手记录下一个晚课 一、环境配置 pytorch是AI框架用的很多&#xff0c;或者 其他是国内的框架 an…...

编程日记 2025/2/3 6:24:33

C++ Primer 标准库类型string

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…...

编程日记 2025/2/3 6:21:28

计算机网络安全与运维的关键 —— 常用端口全解析

目录 前言 常见端口分类及用途 20 端口&#xff08;FTP 数据传输&#xff09; 21 端口&#xff08;FTP 消息控制&#xff09; 22 端口&#xff08;SSH&#xff09; 23 端口&#xff08;Telnet&#xff09; 25 端口&#xff08;SMTP&#xff09; 53 端口&#xff08;DNS&…...

编程日记 2025/2/3 6:19:25

Vue.js 的介绍与组件开发初步

Vue.js 的介绍与组件开发初步 Vue.js 的介绍与组件开发初步引言第一部分&#xff1a;Vue.js 基础入门1.1 什么是 Vue.js&#xff1f;1.2 搭建 Vue.js 开发环境安装 Node.js 和 npm安装 Vue CLI创建新项目运行示例 1.3 第一个 Vue.js 示例 第二部分&#xff1a;Vue.js 组件开发基…...

编程日记 2025/2/3 6:16:21

【仿12306项目】通过加“锁”，解决高并发抢票的超卖问题

文章目录 一. 测试工具二. 超卖现象演示三. 原因分析四. 解决办法方法一&#xff1a;加synchronized锁1. 单个服务节点情况2. 增加服务器节点&#xff0c;分布式环境synchronized失效演示 方法二&#xff1a;使用Redis分布式锁锁解决超卖问题1. 添加Redis分布式锁2. 结果 方法三…...

编程日记 2025/2/3 6:14:19

wow-agent---task4 MetaGPT初体验

先说坑&#xff1a; 1.使用git clone模式安装metagpt 2.模型尽量使用在线模型或本地高参数模型。 这里使用python3.10.11调试成功 一&#xff0c;安装 安装 | MetaGPT&#xff0c;参考这里的以开发模型进行安装 git clone https://github.com/geekan/MetaGPT.git cd /you…...

编程日记 2025/2/3 6:11:07

MVANet——小范围内捕捉高分辨率细节而在大范围内不损失精度的强大的背景消除模型

一、概述 前景提取&#xff08;背景去除&#xff09;是现代计算机视觉的关键挑战之一&#xff0c;在各种应用中的重要性与日俱增。在图像编辑和视频制作中有效地去除背景不仅能提高美学价值&#xff0c;还能提高工作流程的效率。在要求精确度的领域&#xff0c;如医学图像分析…...

编程日记 2025/2/3 6:10:04

94，【2】buuctf web [安洵杯 2019]easy_serialize_php

进入靶场 可以查看源代码 <?php // 从 GET 请求中获取名为 f 的参数值&#xff0c;并赋值给变量 $function // 符号用于抑制可能出现的错误信息 $function $_GET[f];// 定义一个名为 filter 的函数&#xff0c;用于过滤字符串中的敏感词汇 function filter($img) {// 定义…...

编程日记 2025/2/3 6:09:03

LabVIEW如何有效地进行数据采集？

数据采集&#xff08;DAQ&#xff09;是许多工程项目中的核心环节&#xff0c;无论是测试、监控还是控制系统&#xff0c;准确、高效的数据采集都是至关重要的。LabVIEW作为一个图形化编程环境&#xff0c;提供了丰富的功能来实现数据采集&#xff0c;确保数据的实时性与可靠性…...

编程日记 2025/2/3 6:08:00

6 [新一代Github投毒针对网络安全人员钓鱼]

0x01 前言 在Github上APT组织“海莲花”发布存在后门的提权BOF&#xff0c;通过该项目针对网络安全从业人员进行钓鱼。不过其实早在几年前就已经有人对Visual Studio项目恶意利用进行过研究&#xff0c;所以投毒的手法也不算是新的技术。但这次国内有大量的安全从业者转发该钓…...

编程日记 2025/2/3 6:05:57

《Origin画百图》之脊线图

1.数据准备&#xff1a;将数据设置为y 2.选择绘图>统计图>脊线图 3.生成基础图形&#xff0c;并不好看&#xff0c;接下来对图形属性进行设置 4.双击图形>选择图案>颜色选择按点>Y值 5.这里发现颜色有色阶&#xff0c;过度并不平滑&#xff0c;需要对色阶进行更…...

编程日记 2025/2/3 6:04:56

linux 函数 sem_init （） 信号量、sem_destroy（）

&#xff08;1&#xff09; &#xff08;2&#xff09; 代码举例&#xff1a; #include <stdio.h> #include <stdlib.h> #include <pthread.h> #include <semaphore.h> #include <unistd.h>sem_t semaphore;void* thread_function(void* arg) …...

编程日记 2025/2/3 6:02:54

Kafka架构

引言 Kafka 凭借其独树一帜的分区架构&#xff0c;在消息中间件领域展现出了卓越的性能表现。其分区架构不仅赋予了 Kafka 强大的并行计算能力&#xff0c;使其能够高效处理海量数据&#xff0c;还显著提升了系统的容灾能力&#xff0c;确保在复杂的运行环境中始终保持稳定可靠…...

编程日记 2025/2/3 5:59:51

刷题记录 动态规划-2: 509. 斐波那契数

题目&#xff1a;509. 斐波那契数 难度&#xff1a;简单 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a; F(0) 0&#xff0c;F(1) 1 F(n…...

编程日记 2025/2/3 5:58:48

RDP协议详解

以下内容包含对 RDP&#xff08;Remote Desktop Protocol&#xff0c;远程桌面协议&#xff09;及其开源实现 FreeRDP 的较为系统、深入的讲解&#xff0c;涵盖协议概要、历史沿革、核心原理、安全机制、安装与使用方法、扩展与未来发展趋势等方面&#xff0c; --- ## 一、引…...

编程日记 2025/2/3 5:54:43

设计模式的艺术-观察者模式

行为型模式的名称、定义、学习难度和使用频率如下表所示&#xff1a; 1.如何理解观察者模式 一个对象的状态或行为的变化将导致其他对象的状态或行为也发生改变&#xff0c;它们之间将产生联动&#xff0c;正所谓“触一而牵百发”。为了更好地描述对象之间存在的这种一对多&…...

编程日记 2025/2/3 5:53:38

【C语言设计模式学习笔记1】面向接口编程/简单工厂模式/多态

面向接口编程可以提供更高级的抽象&#xff0c;实现的时候&#xff0c;外部不需要知道内部的具体实现&#xff0c;最简单的是使用简单工厂模式来进行实现&#xff0c;比如一个Sensor具有多种表示形式&#xff0c;这时候可以在给Sensor结构体添加一个enum类型的type&#xff0c;…...

编程日记 2025/2/3 5:52:36

Baklib如何优化企业知识管理提升团队协作与创新能力分析

内容概要 在现代企业中&#xff0c;知识管理已经成为提升竞争力的关键因素之一。Baklib作为一种全面的知识管理解决方案&#xff0c;致力于帮助企业高效整合和运用内部及外部知识资源。它通过建立统一的知识管理框架&#xff0c;打破了部门之间的信息壁垒&#xff0c;实现了跨…...

编程日记 2025/2/3 5:50:32

Dubbo view

1、 说说Dubbo核心的配置有哪些&#xff1f; 答&#xff1a; 配置 配置说明 dubbo:service 服务配置 dubbo:reference 引用配置 dubbo:protocol 协议配置 dubbo:application 应用配置 dubbo:module 模块配置 dubbo:registry 注册中心配置 dubbo:monitor 监控中心配置 dubbo:pr…...

编程日记 2025/2/3 5:49:27