【前端知识】常用CSS样式举例
文章目录
- 一、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元素，而是基于元素的当前状态或位置来选择元素。
常见的伪类包括：
-
用户交互伪类：
:hover：当用户将鼠标悬停在元素上时应用样式。:active：当元素被激活时（如被点击）应用样式。:focus：当元素获得焦点时应用样式。
-
结构性伪类：
:first-child：选择属于其父元素的第一个子元素的每个元素。:last-child：选择属于其父元素的最后一个子元素的每个元素。:nth-child(n)：选择属于其父元素的第n个子元素的每个元素，n可以是数字、关键字（even、odd）或表达式（如2n+1）。:only-child：选择属于其父元素的唯一子元素的每个元素。:empty：选择没有子元素（包括文本节点）的元素。:root：选择文档的根元素，通常是<html>元素。
-
否定伪类：
:not(selector)：选择不匹配给定选择器的元素。
-
表单伪类：
:checked：匹配每个当前被选中的<input>元素。:disabled：匹配每个当前被禁用的<input>元素。:enabled：匹配每个当前被启用的<input>元素。:indeterminate：匹配每个处于不确定状态的<input>元素。:valid和:invalid：分别匹配有效和无效的表单元素。
-
其他伪类：
:link和:visited：分别匹配未访问和已访问的链接。:target：匹配当前URL片段标识符的目标元素。:scope：匹配当前样式作用域内的元素。:dir(ltr|rtl)：选择具有特定书写方向的元素。
二、伪元素（Pseudo-elements）
伪元素用于选择元素的一部分内容，并为这部分内容设置样式。伪元素在文档树中并不真正存在，但可以被样式化。在CSS3中，伪元素使用双冒号（::）语法来区分它们与伪类。
常见的伪元素包括：
-
::before：在元素内容的前面插入生成的内容。通常与content属性一起使用来指定要插入的内容。 -
::after：在元素内容的后面插入生成的内容。同样与content属性一起使用。 -
::first-line：用于选择块级元素的首行文本，并为它设置样式。 -
::first-letter：用于选择块级元素的首字母，并为它设置样式。 -
::selection：用于匹配用户高亮（选中）的部分，并为它设置样式。需要注意的是，::selection伪元素只能用于设置一些有限的CSS属性，如color、background等。 -
::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. 示例…...
硕成C语言1笔记
硕成C语言1笔记 这一节内容主要讲了进制转换 进制转换：十进制转其他进制用短除法，最后逆序输出十六进制的15表示的是F，255的十六进制是：FF其他进制转十进制：按权展开，从n的0次方开始，一直到最…...
[SAP ABAP] Debug Skill
SAP ABAP Debug相关资料 [SAP ABAP] DEBUG ABAP程序中的循环语句 [SAP ABAP] 静态断点的使用 [SAP ABAP] 在ABAP Debugger调试器中设置断点 [SAP ABAP] SE11 / SE16N 修改标准表(慎用)...
理解 InnoDB 如何处理崩溃恢复
在数据库领域，数据的一致性与可靠性至关重要。InnoDB 存储引擎的崩溃恢复机制是保障数据安全的核心，其中 Doublewrite Buffer 和 Redo Log 发挥着关键作用。下面，我们将详细探讨 InnoDB 从写入到崩溃恢复的全过程。 一、写入流程 修改页面&…...
UE5 蓝图学习计划 - Day 8：触发器与交互事件
在游戏开发中，触发器（Trigger） 和 交互事件（Interaction Events） 是实现游戏动态交互的关键。例如，当角色接近一扇门时，它可以自动打开，或者当玩家进入特定区域时，游戏触…...
根据接口规范封装网络请求和全局状态管理
封装通用页面接口网络请求 axios （request）封装见：https://blog.csdn.net/XiugongHao/article/details/143449863 /*** 封装通用页面的增删改查接口*/ export function postPageListData(pageName: string, queryInfo: any) {return request.…...
Unet 改进：在encoder和decoder间加入TransformerBlock
目录 1. TransformerBlock 2. Unet 改进 3. 完整代码 Tips：融入模块后的网络经过测试，可以直接使用，设置好输入和输出的图片维度即可 1. TransformerBlock TransformerBlock是Transformer模型架构的基本组件，广泛应用于机器翻译、文本摘要和情感分析等自然语言处理任务…...
work-stealing算法 ForkJoinPool
专栏系列文章地址：https://blog.csdn.net/qq_26437925/article/details/145290162 本文目标： 重点是通过例子程序理解work-stealing算法原理 目录 work-stealing算法算法原理和优缺点介绍使用场景work-stealing例子代码 ForkJoinPoolnew ForkJoinPool(…...
DeepSeek Janus-Pro：多模态AI模型的突破与创新
近年来，人工智能领域取得了显著的进展，尤其是在多模态模型（Multimodal Models）方面。多模态模型能够同时处理和理解文本、图像等多种类型的数据，极大地扩展了AI的应用场景。DeepSeek(DeepSeek-V3 深度剖析：…...
STM32-时钟树
STM32-时钟树 时钟 时钟...
hot100_21. 合并两个有序链表
将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1： 输入：l1 [1,2,4], l2 [1,3,4] 输出：[1,1,2,3,4,4] 示例 2： 输入：l1 [], l2 [] 输出：[…...
代码讲解系列-CV（一）——CV基础框架
文章目录 一、环境配置IDE选择一套完整复现安装自定义cuda算子 二、Linux基础文件和目录操作查看显卡状态压缩和解压 三、常用工具和pipeline远程文件工具版本管理代码辅助工具 随手记录下一个晚课 一、环境配置 pytorch是AI框架用的很多，或者 其他是国内的框架 an…...
C++ Primer 标准库类型string
欢迎阅读我的 【CPrimer】专栏 专栏简介：本专栏主要面向C初学者，解释C的一些基本概念和基础语言特性，涉及C标准库的用法，面向对象特性，泛型特性高级用法。通过使用标准库中定义的抽象设施，使你更加适应高级…...
计算机网络安全与运维的关键 —— 常用端口全解析
目录 前言 常见端口分类及用途 20 端口（FTP 数据传输） 21 端口（FTP 消息控制） 22 端口（SSH） 23 端口（Telnet） 25 端口（SMTP） 53 端口（DNS&…...
Vue.js 的介绍与组件开发初步
Vue.js 的介绍与组件开发初步 Vue.js 的介绍与组件开发初步引言第一部分：Vue.js 基础入门1.1 什么是 Vue.js？1.2 搭建 Vue.js 开发环境安装 Node.js 和 npm安装 Vue CLI创建新项目运行示例 1.3 第一个 Vue.js 示例 第二部分：Vue.js 组件开发基…...
【仿12306项目】通过加“锁”，解决高并发抢票的超卖问题
文章目录 一. 测试工具二. 超卖现象演示三. 原因分析四. 解决办法方法一：加synchronized锁1. 单个服务节点情况2. 增加服务器节点，分布式环境synchronized失效演示 方法二：使用Redis分布式锁锁解决超卖问题1. 添加Redis分布式锁2. 结果 方法三…...
wow-agent---task4 MetaGPT初体验
先说坑： 1.使用git clone模式安装metagpt 2.模型尽量使用在线模型或本地高参数模型。 这里使用python3.10.11调试成功 一，安装 安装 | MetaGPT，参考这里的以开发模型进行安装 git clone https://github.com/geekan/MetaGPT.git cd /you…...
MVANet——小范围内捕捉高分辨率细节而在大范围内不损失精度的强大的背景消除模型
一、概述 前景提取（背景去除）是现代计算机视觉的关键挑战之一，在各种应用中的重要性与日俱增。在图像编辑和视频制作中有效地去除背景不仅能提高美学价值，还能提高工作流程的效率。在要求精确度的领域，如医学图像分析…...
94，【2】buuctf web [安洵杯 2019]easy_serialize_php
进入靶场 可以查看源代码 <?php // 从 GET 请求中获取名为 f 的参数值，并赋值给变量 $function // 符号用于抑制可能出现的错误信息 $function $_GET[f];// 定义一个名为 filter 的函数，用于过滤字符串中的敏感词汇 function filter($img) {// 定义…...
LabVIEW如何有效地进行数据采集？
数据采集（DAQ）是许多工程项目中的核心环节，无论是测试、监控还是控制系统，准确、高效的数据采集都是至关重要的。LabVIEW作为一个图形化编程环境，提供了丰富的功能来实现数据采集，确保数据的实时性与可靠性…...
铭豹扩展坞 USB转网口 突然无法识别解决方法
当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
《基于Apache Flink的流处理》笔记
思维导图 1-3 章 4-7章 8-11 章 参考资料 源码： https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...
多模态大语言模型arxiv论文略读（108）
CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)
漏洞概览 漏洞名称：Apache Flink REST API 任意文件读取漏洞CVE编号：CVE-2020-17519CVSS评分：7.5影响版本：Apache Flink 1.11.0、1.11.1、1.11.2修复版本：≥ 1.11.3 或 ≥ 1.12.0漏洞类型：路径遍历&#x…...
基于Java+MySQL实现（GUI）客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息，对客户进行统一管理，可以把所有客户信息录入系统，进行维护和统计功能。可通过文件的方式保存相关录入数据，对…...