大厂进阶之CSS死磕牢记的7大知识点

本文主要讨论7大CSS知识点，个个都是金刚附体，干货满满：
1、移动端样式适配
2、回流和重绘
3、flex布局
4、BFC
5、CSS垂直居中方法
6、CSS两栏、三栏自适应布局
7、CSS单行、多行文本溢出省略号格式

一、如何做到移动端样式适配

1、媒体查询Media Queries–响应式设计

@media screen and (max-width: 600px) {/*在小屏幕上的样式*/
}
@media screen and (min-width: 601px) and (max-width: 1024px) {/*在中等屏幕上的样式*/
}
@media screen and (min-width: 1025px) {/*在大屏幕上的样式*/
}

2、弹性布局flex

使用弹性布局和网格布局可以更好的灵活布局，使页面元素可以根据屏幕大小自动调整位置

.container {display: flex;flex-wrap: wrap
}
.item {flex: 1;
}

3、移动端优先

先定义移动端样式，再使用媒体查询逐渐添加大屏上的样式，确保基本功能在小屏幕上也能正常工作。

/*移动端样式*/
body {font-size:14px;
}
/*大屏幕样式*/
@media screen and (max-width: 768px) {body {font-size: 16px;}
}

4、图片多媒体适配

  • 使用max-width: 100%确保图片和多媒体在小屏幕上不会溢出容器
  • 使用picture元素或srcset属性提供不同尺寸的图片
img {max-width : 100%;height: auto;
}

5、交互友好

使用合适的尺寸和间距，确保链接、按钮等可点击元素在触摸屏幕上易于点击。

a, button {padding: 10px;
}

二、回流和重绘

1、定义

回流一定会引起重绘，而重绘不一定会引起回流。频繁的回流和重绘会导致页面性能下降，影响用户体验。

  • 回流：布局引擎根据各种样式计算每个盒子在页面上的大小和位置
  • 重绘：当计算好盒模型位置、大小和其他属性后，浏览器会根据每个盒子特性进行绘制
    在这里插入图片描述
  • 解析Html生成Dom树，解析CSS，生成CSSDOM树
  • 将Dom树和CSSDOM树结合，生成渲染树（Render Tree）
  • Layout（回流）：根据渲染树进行回流，得到节点几何位置
  • Painting（重绘）：根据渲染树以及回流得到的几何位置，得到节点的绝对像素
  • Display：将像素发给GPU, 展示在页面上

2、触发时机

2.1 回流触发时机

  • 添加删除DOM元素
  • 元素位置改变
  • 元素尺寸改变
  • 页面一开始渲染时不可避免的回流
  • 浏览器窗口尺寸改变

2.2 重绘触发时机

  • 颜色修改
  • 文本方向改变
  • 阴影修改

3、浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此浏览器通过队列化修改并批量执行来优化重排过程。
浏览器会将修改操作放入队列中，直到达到一定阈值，才清空队列。

4、如何减少回流重绘

  • 如果想设定元素样式，通过改变元素的class类名
    比如下面的多次样式修改，每次样式修改都会触发回流重绘
const container = document.getElementById('container');
container.style.width = '100px';
container.style.height = '100px';
container.style.color = 'red';

我们修改的方法就是将多次的样式修改放到class内，一次性添加

<style>.basic {width: 100px;height: 100px;color: red;}
</style>
<stript>const container = document.getElementById('container');container.classList.add('basic')
</stript>
  • 复杂的动画，使用position设置为fixed或者absolute，尽可能使元素脱离文档流，从而减少对其他元素的影响
  • 避免使用table布局，table中每个元素大小以及内容改动，都会导致整个table重新计算
  • 避免使用css的js表达式
  • 使用css3硬件加速，可以使transform、opacity、filters这些动画不会引起回流重绘

三、flex布局

flex弹性布局

  • 采用flex布局的元素，称为flex容易container
  • 所有子元素成为容器成员，称为container的item

1、使用场景

  • 等高的多列布局
  • 水平和垂直居中
  • 自适应布局
  • 等间距分布：使用flexbox的justify-content和align-items属性，在容器中创建等间距布局
  • 响应式布局

2、属性

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

2.1 flex-direction

定义主轴上排列方向

  • row: 从左到右 默认属性
  • column: 从上到下
  • row-reserve:从右到左
  • column-reserve: 从下到上
    在这里插入图片描述

2.2 flex-wrap

容器内是否换行

  • wrap: 换行
  • no-wrap: 不换行 默认属性
  • wrap-reserve: 换行且第一行在下面
    默认情况下就是no-wrap: 不换行，但是不会让元素超出容器，元素会弹性伸缩：
    在这里插入图片描述
    如果每个元素设置了min-height和min-width, 默认和nowrap就会超过容器：
    在这里插入图片描述

3、flex-flow

这个属性是flex-direction和flex-wrap的属性简写形式，默认是row nowrap

.box {flex-flow: <flex-direction> || <flex-wrap>
}

4、justify-content

定义主轴上对齐方式

  • flex-start：左对齐 默认属性
  • flex-end：右对齐
  • center：居中
  • space-between：两端对齐，item之间间隔相等
  • space-around：两个项目两侧间隔相等
    在这里插入图片描述

5、aligh-items

定义交叉轴上（y轴）对齐方式

  • stretch：如果没设置高度或设为auto，将占满整个容器 默认属性
  • flex-start：y轴开始位置对齐
  • flex-end：y轴终点对齐
  • center：y轴中间对齐
  • baseline：项目第一行文字的基线对齐
    在这里插入图片描述

3、item属性

以下6个属性设置在项目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

3.1 order

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

.item {order: <integer>;
}

在这里插入图片描述

3.2 flex-grow属性

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

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

在这里插入图片描述
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3.3 flex-shrink属性

flex-shrink等比缩小
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {flex-shrink: <number>; /* default 1 */
}

在这里插入图片描述

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

3.4 flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
如果flex-basis设置值为0%，表示项目的初始大小为 0，然后根据flex-grow和flex-shrink来确定最终大小。

3.5 flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

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

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex:1代表什么？

  • flex: 1 = flex: 1 1 0%
  • flex: 2 = flex: 2 1 0%
  • flex: auto = flex: 1 1 auto
  • flex: none = flex: 0 0 auto

在 CSS 中，flex: 1是一个用于弹性布局（Flexbox）的属性值组合。它由三个部分组成：flex-grow、flex-shrink和flex-basis。

  1. flex-grow：

    • 定义了弹性项目的增长因子。当弹性容器有剩余空间时，具有flex-grow值大于 0 的项目会按比例扩展以填充剩余空间。
    • flex: 1中的flex-grow值为 1，表示当有剩余空间时，该项目会与其他设置了flex-grow为正整数的项目一起，按比例增长来占据剩余空间。

  2. flex-shrink：

    • 定义了弹性项目的收缩因子。当弹性容器空间不足时，项目会根据flex-shrink的值按比例收缩。
    • flex: 1中的flex-shrink默认值为 1，表示当空间不足时，该项目会与其他项目一起按比例收缩以适应容器。

  3. flex-basis：

    • 定义了弹性项目在分配空间之前的初始大小。
    • flex: 1中的flex-basis默认值为0%，表示项目的初始大小为 0，然后根据flex-grow和flex-shrink来确定最终大小。

例如，假设有一个弹性容器包含三个项目，其中两个项目设置了flex: 1，另一个项目宽度固定为 100px。当容器宽度足够大时，两个设置了flex: 1的项目会平分剩余空间；当容器宽度变小时，它们会根据比例收缩以适应容器。

以下是一个代码示例：

<!DOCTYPE html>
<html lang="en"><head><style>.container {display: flex;}.item1,.item2 {flex: 1;background-color: lightblue;height: 50px;}.item3 {width: 100px;background-color: lightgreen;height: 50px;}</style>
</head><body><div class="container"><div class="item1"></div><div class="item2"></div><div class="item3"></div></div>
</body></html>

在这个例子中，.container是一个弹性容器，.item1和.item2设置了flex: 1，它们会根据容器的大小自动调整宽度，而.item3有固定的宽度 100px。

flex:1 与 flex:auto 的区别？

这俩的区别就在于flex-basis=0%和flex-basis=auto的区别

  • flex-basis = 0% 代表flex-grow和grow-shrink收缩时不用考虑元素尺寸
  • flex-basis = auto 收缩时需要将元素本身尺寸考虑进去

3.6 align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

四、BFC

1、什么是BFC

BFC是Block Formatting Context, 即块级作用域上下文，有自己的渲染规则：

  • 内部盒子在垂直方向一个接一个放置
  • 两个相邻盒子的垂直外边距相遇时，会发生外边距合并（margin collapsing）现象，但在 BFC 中，这种合并只会发生在同一个 BFC 内部的盒子之间
  • BFC 的区域不会与浮动元素重叠
  • 计算 BFC 的高度时，浮动元素也会参与计算
  • 每个元素的外边距与包含块的左边界接触（从左到右），即使浮动元素也是如此

2、触发条件

  • 根元素，即html元素
  • 浮动元素，float为left、right
  • overflow值不为visible，为auto、scroll、hidden
  • display值为inline-block, table-cell, table-caption, table, inline-table, flex, inline-flex, grid, inline-grid
  • position值为absolute或fixed

3、应用场景

BFC（Block Formatting Context，块级格式化上下文）有以下一些应用场景及代码实例：

3.1 防止 margin 重叠

  1. 问题描述：

    • 在默认情况下，垂直方向上相邻的块级元素的外边距（margin）会发生重叠。这可能导致布局不符合预期，尤其是当你希望两个元素之间的间距是两个元素的外边距之和时。

  2. 解决方案：

    • 将其中一个元素包裹在一个创建了 BFC 的容器中，这样可以防止外边距重叠。

  3. 代码实例：

    <style>.box1 {height: 50px;width: 100px;background-color: lightblue;margin-bottom: 20px;}.box2 {height: 50px;width: 100px;background-color: lightgreen;margin-top: 30px;}.bfc-container {overflow: hidden; /* 创建 BFC */}
</style>
<div class="box1"></div>
<div class="bfc-container"><div class="box2"></div>
</div>

在这个例子中，.box1和.box2原本会发生外边距重叠，导致它们之间的间距只有 30px（取两个外边距中的较大值）。但是，将.box2包裹在一个创建了 BFC 的.bfc-container中后，它们之间的间距就变成了两个外边距之和，即 50px。

3.2 清除浮动

  1. 问题描述：

    • 当一个父元素内部的子元素设置了浮动（float）属性时，父元素的高度可能会塌陷，即父元素的高度不会自动包含浮动的子元素。

  2. 解决方案：

    • 可以通过在父元素上创建 BFC 来解决这个问题，让父元素的高度能够自动包含浮动的子元素。

  3. 代码实例：

    <style>.parent {border: 1px solid black;}.float-child {float: left;width: 50px;height: 50px;background-color: lightblue;}.bfc-parent {overflow: hidden; /* 创建 BFC */border: 1px solid red;}
</style>
<div class="parent"><div class="float-child"></div><div class="float-child"></div>
</div>
<div class="bfc-parent"><div class="float-child"></div><div class="float-child"></div>
</div>

在这个例子中，第一个.parent元素没有创建 BFC，所以它的高度为 0，边框不会显示出高度。而第二个.bfc-parent元素通过设置overflow: hidden创建了一个 BFC，它的高度会自动包含内部的浮动子元素的高度，边框会显示出正确的高度。

3.3 避免元素被浮动元素覆盖

  1. 问题描述：

    • 当一个元素设置了浮动后，它可能会覆盖后面的非浮动元素。

  2. 解决方案：

    • 可以将非浮动元素包裹在一个创建了 BFC 的容器中，这样可以避免被浮动元素覆盖。

  3. 代码实例：

    <style>.float-img {float: left;width: 100px;height: 100px;background-color: lightgray;}.bfc-container {overflow: hidden; /* 创建 BFC */}.text {background-color: lightyellow;}
</style>
<div><div class="float-img"></div><div class="bfc-container"><p class="text">This is some text that won't overlap with the floated elementbecause it's in a BFC.</p></div>
</div>

在这个例子中，.float-img是一个浮动的元素。.bfc-container创建了一个 BFC，内部的文本内容.text不会与浮动的图片重叠，而是在 BFC 的区域内正常显示。

五、CSS 垂直居中方法

1、使用 flex 布局

  1. 对于单个元素在父容器中垂直居中
    <style>
.parent {display: flex;align-items: center;height: 200px;
}
.child {width: 100px;height: 50px;background-color: lightblue;
}
</style>
<div class="parent"><div class="child"></div>
</div>
    通过设置父元素为 flex 容器，并使用align-items: center属性来实现子元素在垂直方向上的居中。
  2. 对于多个元素在父容器中垂直居中
    <style>
.parent {display: flex;flex-direction: column;justify-content: center;height: 200px;
}
.child1,
.child2 {width: 100px;height: 50px;background-color: lightblue;margin: 10px;
}
</style>
<div class="parent"><div class="child1"></div><div class="child2"></div>
</div>
    设置父元素为 flex 容器，flex-direction: column使子元素垂直排列，再使用justify-content: center实现子元素整体在垂直方向上的居中。

2、使用 grid 布局

  1. 单个元素垂直居中
    <style>
.parent {display: grid;align-items: center;height: 200px;
}
.child {width: 100px;height: 50px;background-color: lightblue;
}
</style>
<div class="parent"><div class="child"></div>
</div>
    类似 flex 布局，设置父元素为 grid 容器，通过align-items: center实现子元素垂直居中。

3、使用绝对定位和负边距

  1. 已知子元素高度时
    <style>
.parent {position: relative;height: 200px;
}
.child {position: absolute;top: 50%;height: 50px;margin-top: -25px;background-color: lightblue;
}
</style>
<div class="parent"><div class="child"></div>
</div>
    首先将子元素设置为绝对定位，通过top: 50%将子元素的顶部移动到父元素的垂直中间位置，然后再使用负的margin-top值，其值为子元素高度的一半，将子元素向上移动自身高度的一半，从而实现垂直居中。

4、使用 line-height 和 vertical-align

  1. 对于单行文本
    <style>
.parent {height: 200px;line-height: 200px;text-align: center;
}
.child {display: inline-block;vertical-align: middle;background-color: lightblue;
}
</style>
<div class="parent"><div class="child">单行文本垂直居中</div>
</div>
    设置父元素的line-height与父元素的高度相等，使文本在垂直方向上占据整个父元素的高度。然后将子元素设置为inline-block并使用vertical-align: middle使其在父元素中垂直居中。
  2. 对于多行文本（需配合伪元素）
    <style>
.parent {height: 200px;display: table-cell;vertical-align: middle;text-align: center;
}
.child {display: inline-block;background-color: lightblue;
}
</style>
<div class="parent"><div class="child">多行文本垂直居中<br>多行文本垂直居中</div>
</div>
    将父元素设置为table-cell，并使用vertical-align: middle实现垂直居中。子元素设置为inline-block以便在父元素中水平居中显示。

5、使用 transform 属性

  1. 已知子元素高度时
    <style>
.parent {position: relative;height: 200px;
}
.child {position: absolute;top: 50%;transform: translateY(-50%);background-color: lightblue;
}
</style>
<div class="parent"><div class="child"></div>
</div>
    同样先将子元素设置为绝对定位并通过top: 50%移动到父元素垂直中间位置，然后使用transform: translateY(-50%)将子元素向上移动自身高度的一半，实现垂直居中。

六、CSS 实现两栏布局（右侧自适应）和三栏布局（中间自适应）

1. 两栏布局（右侧自适应）

1.1 使用浮动（Float）

<style>
.left-column {width: 200px;float: left;background-color: lightblue;}
.right-column {background-color: lightgreen;overflow: hidden;}
</style>
<div class="left-column">Left column with fixed width.</div>
<div class="right-column">Right column adapts to remaining space.</div>
  • 左侧栏设置固定宽度并向左浮动。
  • 右侧栏通过设置overflow: hidden来清除左侧栏的浮动影响，从而实现右侧栏自适应剩余空间。

1.2 使用 Flex 布局

<style>
.container {display: flex;}
.left-column {width: 200px;background-color: lightblue;}
.right-column {flex: 1;background-color: lightgreen;}
</style>
<div class="container"><div class="left-column">Left column with fixed width.</div><div class="right-column">Right column adapts to remaining space.</div>
</div>
  • 将容器设置为 flex 布局。
  • 左侧栏设置固定宽度。
  • 右侧栏设置flex: 1，使其自动填充剩余空间，实现自适应。

2. 三栏布局（中间自适应）

2.1 使用浮动（Float）

<style>
.left-column {width: 200px;float: left;background-color: lightblue;}
.right-column {width: 150px;float: right;background-color: lightpink;}
.middle-column {background-color: lightgreen;overflow: hidden;}
</style>
<div class="left-column">Left column.</div>
<div class="middle-column">Middle column adapts to remaining space.</div>
<div class="right-column">Right column.</div>
  • 左侧栏和右侧栏分别设置固定宽度并向左和向右浮动。
  • 中间栏通过设置overflow: hidden来清除左右两侧栏的浮动影响，实现中间栏自适应剩余空间。

2.2 使用 Flex 布局

<style>
.container {display: flex;}
.left-column {width: 200px;background-color: lightblue;}
.right-column {width: 150px;background-color: lightpink;}
.middle-column {flex: 1;background-color: lightgreen;}
</style>
<div class="container"><div class="left-column">Left column.</div><div class="middle-column">Middle column adapts to remaining space.</div><div class="right-column">Right column.</div>
</div>
  • 将容器设置为 flex 布局。
  • 左侧栏和右侧栏分别设置固定宽度。
  • 中间栏设置flex: 1，使其自动填充剩余空间，实现自适应。

2.3 使用 Grid 布局

<style>
.container {display: grid;grid-template-columns: 200px auto 150px;background-color: lightgray;}
.left-column {background-color: lightblue;}
.middle-column {background-color: lightgreen;}
.right-column {background-color: lightpink;}
</style>
<div class="container"><div class="left-column">Left column.</div><div class="middle-column">Middle column adapts to remaining space.</div><div class="right-column">Right column.</div>
</div>
  • 将容器设置为 grid 布局，并使用grid-template-columns定义三栏的宽度，中间栏设置为auto实现自适应。

七、CSS 实现单行、多行文本溢出省略样式

1. 单行文本溢出省略

1.1 使用 CSS 属性实现

<style>
.single-line-text {width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>
<div class="single-line-text">This is a single line text that may overflow and should be ellipsized.</div>
  • 设置元素宽度为固定值（如 200px）。
  • white-space: nowrap确保文本不换行。
  • overflow: hidden隐藏超出部分。
  • text-overflow: ellipsis在文本溢出时显示省略号。

2. 多行文本溢出省略

2.1 使用伪元素实现

<style>
.multiline-text {position: relative;line-height: 20px;height: 40px;overflow: hidden;
}
.multiline-text::after {content: "...";position: absolute;bottom: 0;right: 0;padding-left: 5px;background: linear-gradient(to right, transparent, white);
}
</style>
<div class="multiline-text">This is a multiline text that may overflow and should be ellipsized after two lines.</div>
  • 设置元素宽度为固定值（如 200px）。
  • display: -webkit-box和-webkit-box-orient: vertical将元素设置为弹性盒子并垂直排列。
  • -webkit-line-clamp: 2限制文本显示为两行。
  • overflow: hidden隐藏超出部分。
  • 使用伪元素::after在文本末尾添加省略号，并通过background: linear-gradient(to right, transparent, white)创建渐变背景，使省略号看起来更自然。

注意：多行文本溢出省略的实现方式在不同浏览器中的兼容性可能有所不同，上述代码中的-webkit-前缀是针对 WebKit 内核浏览器的，其他浏览器可能需要不同的前缀或不支持此特性。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/1553306.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

CloudCompare插件编写

CloudCompare插件编写

预置环境&#xff1a;Windows10GitCMake3.23.3VS2019Qt5.14.2 编译CloudCompare工程 首先克隆CloudCompare工程&#xff0c;注意必须加上--recursive否则无法下载完整代码编译会失败&#xff1a; git clone --recursive https://github.com/CloudCompare/CloudCompare.git这…
阅读更多...
鸢尾花书实践和知识记录[编程1-11二维和三维可视化]

鸢尾花书实践和知识记录[编程1-11二维和三维可视化]

作者空间 文章目录 思维导图函数使用 二维可视化方案平面散点图散点图的示例代码1&#xff1a;绘制鸢尾花的散点图代码2Plotly绘制散点图 数据类型和绘图工具的对应 平面等高线代码3生成等高线网格数据 plotly.express关键的绘图函数 Plotly的另一个模块代码4 Plotly生成的 热图…
阅读更多...
李宏毅深度学习-梯度下降和Normalization归一化

李宏毅深度学习-梯度下降和Normalization归一化

Gradient Descent梯度下降 ▽ -> 梯度gradient -> vector向量 -> 下图中的红色箭头&#xff08;loss等高线的法线方向&#xff09; Tip1: Tuning your learning rates Adaptive Learning Rates自适应 通常lr会越来越小 Adaptive Learning Rates中每个参数都给它不同…
阅读更多...
如何使用MethodChannel通信

如何使用MethodChannel通信

文章目录 1 概念介绍2 实现方法3 经验总结我们在上一章回中介绍了Visibility组件相关的内容，本章回中将介绍Flutter与原生平台通信相关的内容.闲话休提，让我们一起Talk Flutter吧。 1 概念介绍 在移动开发领域以Android和IOS SDK开发出的应用程序叫原生开发，开发同一个程序…
阅读更多...
Redis: Sentinel工作原理和故障迁移流程

Redis: Sentinel工作原理和故障迁移流程

Sentinel 哨兵几个核心概念 1 ) 定时任务 Sentinel 它是如何工作的&#xff0c;是如何感知到其他的 Sentinel 节点以及 Master/Slave节点的就是通过它的一系列定时任务来做到的&#xff0c;它内部有三个定时任务 第一个就是每一秒每个 Sentinel 对其他 Sentinel 和 Redis 节点…
阅读更多...
【Canvas与徽章】金圈蓝底国庆75周年徽章

【Canvas与徽章】金圈蓝底国庆75周年徽章

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>金边黑盾75周年</title><style type"text/css"&g…
阅读更多...
万知：告别繁琐，轻松办公

万知：告别繁琐，轻松办公

零一万物这位科技创新的弄潮儿&#xff0c;带着它的最新杰作——万知&#xff0c;闪亮登场。这不仅仅是一个产品&#xff0c;它是对传统工作方式的一次轻松挑战。作为一款一站式AI问答、阅读和创作平台&#xff0c;万知旨在为用户提供高效、便捷的工作体验。万知通过集成多种智…
阅读更多...
Suricata：开源网络分析和威胁检测

Suricata：开源网络分析和威胁检测

Suricata 是一款高性能、开源网络分析和威胁检测软件&#xff0c;被大多数私人和公共组织使用&#xff0c;并被主要供应商嵌入以保护他们的资产。 Suricata 功能 Suricata 提供全面的网络安全监控 (NSM) 功能&#xff0c;包括记录 HTTP 请求、捕获和存储 TLS 证书以及从网络流…
阅读更多...
关于Vben Admin多标签页面缓存不生效的问题

关于Vben Admin多标签页面缓存不生效的问题

情况说明 笔者在接手一个基于Vben Admin框架改造的vue3后台管理项目&#xff0c;客户要求在切换头部Tab页面时&#xff0c;不要刷新清空已经填写的表单页面或者表格。 然而&#xff0c;笔者根据Vben Admin的官方文档来配置多标签页面缓存后&#xff0c;页面每次切换后&#x…
阅读更多...
光通信——FTTx

光通信——FTTx

目录 FTTH模式 FTTO模式 FTTR模式 FTTB/CLAN/xDSL模式 FTTCabxDSL模式 根据接入光纤到用户的距离分类&#xff0c;PON可应用于光纤到交接箱&#xff08;FTTCab&#xff09;、光纤到大楼/路边&#xff08;FTTB/C&#xff09;、光纤到办公室&#xff08;FTTO&#xff0…
阅读更多...
Tiny-universe手戳大模型TinyRAG--task4

Tiny-universe手戳大模型TinyRAG--task4

TinyRAG 这个模型是基于RAG的一个简化版本&#xff0c;我们称之为Tiny-RAG。Tiny-RAG是一个基于RAG的简化版本&#xff0c;它只包含了RAG的核心功能&#xff0c;即Retrieval和Generation。Tiny-RAG的目的是为了帮助大家更好的理解RAG模型的原理和实现。 1. RAG 介绍 LLM会产…
阅读更多...
一文彻底搞懂多模态 - 多模态理解+视觉大模型+多模态检索

一文彻底搞懂多模态 - 多模态理解+视觉大模型+多模态检索

文章目录 技术交流多模态理解一、图像描述1. 基于编码器-解码器的方法2. 基于注意力机制的方法3. 基于生成对抗网络的方法 二、视频描述三、视觉问答 视觉大模型一、通用图像理解模型二、通用图像生成模型 多模态检索一、单模态检索二、多模态检索三、跨模态检索 最近这一两周看…
阅读更多...
自闭症寄宿学校：为孩子发掘多重才能

自闭症寄宿学校：为孩子发掘多重才能

在教育的广阔天地里&#xff0c;每一片土壤都孕育着不同的生命&#xff0c;每一颗种子都蕴含着无限的可能。对于自闭症儿童而言&#xff0c;他们的世界或许更加独特与复杂&#xff0c;但同样充满了未被发掘的潜能与才华。在广州&#xff0c;星贝育园自闭症儿童寄宿制学校正以满…
阅读更多...
OpenGL笔记十九之相机系统

OpenGL笔记十九之相机系统

OpenGL笔记十九之相机系统 —— 2024-10-02 晚上 文章目录 OpenGL笔记十九之相机系统1.运行1.1.游戏相机1.2.轨迹球相机 2.游戏相机与轨迹球相机切换3.博主笔记本要运行需要更改的文件更改1:28_OpenGL_CameraSystem/application/Application.cpp更改2:28_OpenGL_CameraSystem/a…
阅读更多...
MySQL 中如何优化 DISTINCT 查询

MySQL 中如何优化 DISTINCT 查询

一、引言 在 MySQL 数据库中&#xff0c;DISTINCT关键字用于查询结果集中去除重复的行。然而&#xff0c;使用DISTINCT可能会导致查询性能下降&#xff0c;特别是在处理大量数据时。本文将介绍一些优化 MySQL 中DISTINCT查询的方法。 二、理解 DISTINCT 查询的性能影响 &…
阅读更多...
NOI Linux 2.0 使用指南 Code Blocks 手把手教会你

NOI Linux 2.0 使用指南 Code Blocks 手把手教会你

安装 NOI Linux 2.0 的镜像可以从 NOI 官网下载。(NOI Linux 2.0发布&#xff0c;将于9月1日起正式启用&#xff01;) 可以采用 Virtual Box 或者 VMWare 来安装虚拟机&#xff08;不建议安装实体机&#xff0c;如果想要尝试 Linux 环境&#xff0c;推荐使用 WSL 2.0&#xf…
阅读更多...
十六字心传

十六字心传

中国文化传统中著名的“十六字心传”&#xff1a;“人心惟危&#xff0c;道心惟微&#xff1b;惟精惟一&#xff0c;允执厥中。 ”语出于《虞书大禹谟》。 人心与道心&#xff1a;人的人欲与天理的区别&#xff1b;所谓“人心惟危”&#xff0c;即是说人们的那种物欲情欲&…
阅读更多...
ubuntu 18.04 cuda 11.01 gpgpu-sim 裸机编译

ubuntu 18.04 cuda 11.01 gpgpu-sim 裸机编译

1&#xff0c;环境 ubuntu 18.04 x86_64 cuda 11.01 gpgpu-sim master commit 90ec3399763d7c8512cfe7dc193473086c38ca38 2&#xff0c;预备环境 一个比较新的 ubuntu 18.04&#xff0c;为了迎合 cuda 11.01 的版本需求 安装如下软件&#xff1a; sudo apt-get instal…
阅读更多...
Vue3 proxy跨域代理

Vue3 proxy跨域代理

一、跨域问题 假设vue项目的运行地址为&#xff1a;http://localhost:5173&#xff0c;此时我们想要调用后端服务的rest api&#xff0c;而后端接口暴露的地址为&#xff1a;https://192.168.1.1:8080/user。 可以发现前端服务与后端服务的域名是不同的&#xff0c;默认情况下…
阅读更多...
MySQL 中变量的使用指南

MySQL 中变量的使用指南

一、引言 在 MySQL 数据库中&#xff0c;变量可以帮助我们更灵活地处理数据和执行查询。变量可以存储各种类型的值&#xff0c;并且可以在 SQL 语句中进行引用和操作。本文将介绍如何在 MySQL 中使用变量&#xff0c;包括用户定义变量和系统变量&#xff0c;并分享一些实际案例…
阅读更多...
最新文章

Copyright @ 2022~2023