CSS基础知识01

news2024/11/19 17:26:53

一、定义

CSS（Cascading Style Sheets，层叠样式表）是一种样式表语言，用于描述HTML文档的呈现和美化内容。

二、css的引入方式

2.1.内联样式（行内样式）

直接在HTML元素的style属性中添加CSS样式。这种方式只适用于单个元素，且不利于样式的复用和维护。例如：

<div style="width:100px; height:100px; background-color:blue;"></div>

2.2.内部样式

在HTML文档的<head>部分使用<style>标签定义CSS样式。这种方式适用于单个HTML文档，样式只在该文档中生效。例如：

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            font-size: 50px;
            color: red;
        }
    </style>
</head>
<body>
    <p>页面内容</p>
</body>
</html>

2.3.外部样式

将CSS样式定义在一个独立的.css文件中，然后在HTML文档的<head>部分使用<link>标签引入该CSS文件。这是最常见且推荐的方式，因为它实现了样式与内容的分离，提高了样式的复用性和可维护性。例如：

<!--html文件-->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>外部样式表</p>
</body>
</html>

CSS文件（styles.css）：

//css文件
p {
    font-size: 50px;
    color: red;
}

2.4.导入样式

使用CSS的@import规则引入外部的CSS文件。但这种方式不如<link>标签常用，因为@import会导致CSS文件在HTML文件加载完成后才被加载，且在某些旧版浏览器中可能不被支持。例如：

<style>
    @import url("styles.css");
</style>

三、选择器

3.1.标签选择器

定义：选择具有特定HTML标签的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器示例</title>
    <style>
        /* 使用标签选择器选中所有的<p>元素，并设置它们的文本颜色为蓝色 */
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是一个段落，文本颜色为蓝色。</p>
    <p>这是另一个段落，同样文本颜色为蓝色。</p>
</body>
</html>

3.2.类选择器

定义：选择具有指定类的元素，并将样式应用于这些元素。类选择器以.开头，后面跟类名。

可以为多个元素指定相同的类名，并为这些元素应用相同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器示例</title>
    <style>
        /* 使用类选择器选中所有class为"highlight"的元素，并设置它们的背景颜色为黄色 */
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="highlight">这是一个带有highlight类的段落，背景颜色为黄色。</p>
    <div class="highlight">这是一个带有highlight类的div元素，同样背景颜色为黄色。</div>
</body>
</html>

3.3.ID选择器

定义：选择具有指定ID的元素，并将样式应用于该元素。ID选择器以#开头，后面跟ID名。由于ID在HTML文档中具有唯一性，因此ID选择器通常用于选中单个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ID选择器示例</title>
    <style>
        /* 使用ID选择器选中ID为"uniqueElement"的元素，并设置它的字体大小为24px */
        #uniqueElement {
            font-size: 24px;
        }
    </style>
</head>
<body>
    <p id="uniqueElement">这是一个带有唯一ID的段落，字体大小为24px。</p>
    <p>这是另一个段落，不受ID选择器影响。</p>
</body>
</html>

3.4.属性选择器

定义：选择具有指定属性的元素，并将样式应用于这些元素。属性选择器以[]表示，里面包含属性名和属性值（可选）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器示例</title>
    <style>
        /* 使用属性选择器选中所有具有title属性的元素，并设置它们的边框为1px实线黑色 */
        [title] {
            border: 1px solid black;
        }

        /* 使用属性选择器选中title属性值为"example"的元素，并设置它们的背景颜色为灰色 */
        [title="example"] {
            background-color: gray;
        }
    </style>
</head>
<body>
    <p title="example">这是一个带有title属性且值为"example"的段落，有边框和灰色背景。</p>
    <p title="another">这是一个带有title属性但值不为"example"的段落，只有边框。</p>
    <div title>这是一个带有title属性但没有指定值的div元素，同样只有边框。</div>
</body>
</html>

3.5.通配符选择器

定义：通配符选择器使用星号（*）来选择HTML文档中的所有元素。它通常用于应用全局样式或重置样式。

<style>
  /* 选择所有元素，并设置它们的margin和padding为0 */
   * {
      margin: 0;
      padding: 0;
   }
</style>
<body>
    <p>这是一个段落。</p>
    <div>这是一个div元素。</div>
    <!-- 所有元素都将应用上面的样式 -->
</body>

3.6.后代选择器

定义：后代选择器用于选择某个元素内部的所有指定后代元素，无论这些后代元素位于多少层嵌套之内。后代选择器通过空格分隔两个选择器来表示。

<style>
    /* 选择div元素内部的所有p元素，并设置它们的文本颜色为绿色 */
    div p {
        color: green;
    }
</style>
<body>
    <div>
        <p>这是一个段落，位于div内部，文本颜色为绿色。</p>
        <!-- 其他元素 -->
    </div>
</body>

3.7.子代选择器

定义：子代选择器用于选择某个元素的直接子元素。子代选择器通过大于号（>）分隔两个选择器来表示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器示例</title>
    <style>
        /* 选择div的直接子元素p，并设置它们的文本颜色为蓝色 */
        div > p {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>这是一个段落，是div的直接子元素，文本颜色为蓝色。</p>
        <div>
            <p>这是另一个段落，但不是div的直接子元素，不受子代选择器影响。</p>
        </div>
    </div>
</body>
</html>

3.8.并集选择器

定义：并集选择器用于选择多个选择器所匹配的元素。并集选择器通过逗号（,）分隔多个选择器来表示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器示例</title>
    <style>
        /* 选择p元素和div元素，并设置它们的字体大小为16px */
        p, div {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p>这是一个段落，字体大小为16px。</p>
    <div>这是一个div元素，同样字体大小为16px。</div>
</body>
</html>

3.9.交集选择器

定义：交集选择器用于选择同时匹配多个选择器的元素。交集选择器通过将多个选择器放在一起（没有分隔符）来表示。注意，交集选择器通常用于选择具有特定类名或属性，并且同时属于特定HTML标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交集选择器示例</title>
    <style>
        /* 选择同时是p元素且class为special的元素，并设置它们的背景颜色为黄色 */
        p.special {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p class="special">这是一个特殊的段落，背景颜色为黄色。</p>
    <p>这是一个普通的段落，不受交集选择器影响。</p>
</body>
</html>

3.10伪类选择器

定义：伪类选择器用于选择元素的特定状态或位置。伪类选择器通常以冒号（:）开头，后跟伪类名称（有些伪类如:not()使用函数语法）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器示例</title>
    <style>
        /* 选择鼠标悬停状态的a元素，并设置它们的文本颜色为红色 */
        a:hover {
            color: red;
        }

        /* 选择第一个p元素，并设置其字体加粗 */
        p:first-of-type {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <a href="#">这是一个链接，鼠标悬停时文本颜色变为红色。</a>
    <p>这是第一个段落，字体加粗。</p>
    <p>这是第二个段落，不受伪类选择器影响。</p>
</body>
</html>

3.11.属性选择器（css3）

允许根据元素的属性及其值来选择元素。属性选择器可以非常灵活和强大，让你能够选择具有特定属性、属性值或特定属性特性的元素

1.存在属性选择器（attr）

选择具有指定属性的所有元素

[title] {
    color: blue;
}
//选择所有具有title属性的元素

2.属性值选择器

选择具有指定属性且属性值完全等于指定值的所有元素

[type="text"] {
    border: 1px solid #ccc;
}

3.属性值包含选择器（[attr~=value]）：
选择具有指定属性且属性值包含指定单词的所有元素（单词以空格分隔）

[class~="example"] {
    background-color: yellow;
}

选择所有 class 属性包含单词 example 的元素，例如 class="foo example bar"。

4.属性值开头选择器（[attr^=value]）：
选择具有指定属性且属性值以指定值开头的所有元素。

[href^="https"] {
    color: red;
}

5.属性值结尾选择器（[attr$=value]）：
选择具有指定属性且属性值以指定值结尾的所有元素。

[src$=".png"] {
    border: 2px solid black;
}

6.属性值包含选择器（子字符串匹配）（[attr*=value]）：
选择具有指定属性且属性值包含指定值的所有元素（不区分单词边界）

[name*="user"] {
    font-weight: bold;
}

7.属性值大小写敏感选择器（[attr|=value]）：
选择具有指定属性且属性值以指定值开头且紧跟一个连字符（-）的所有元素，或者属性值完全等于指定值（适用于语言代码选择）

[lang|="en"] {
    color: green;
}

8.属性值否定选择器（[attr!=value]）：
选择具有指定属性且属性值不等于指定值的所有元素。

[type!="text"] {
    background-color: lightgray;
}

四、元素特性

4.1.三种元素

1.块级元素：独占一行，并且可以设计宽高

常见块级元素：div : 布局容器；h1~h6：h1标题最大，h6标题最小；p标签：段落标签；table：表格；form：表单容器；ul li :无需列表；ol li ：有序列表；dl dt dd：自定义列表；hr标签:水平线

2.行级元素：在同一行显示，不可以设置宽高，宽度由内容决定，可以与其他行内元素一起在同一行上显示。

常见行级元素：a：超链接；span:修饰文本标签；sub：下标；sup：上标；label：行元素；strong或者b标签：字体加粗；em或者i：字体倾斜；ins或者u：下划线；del或者s：删除线

3.行块级元素：在同一行显示，并且可以设置宽高

常见行块元素：img：图片标签；input：表单元素

4.2.切换元素特性

display：none；

属性名属性值
displaynone元素不会在页面上显示，也不会占据任何空间。
inline元素会被显示为内联元素。内联元素不会独占一行，它们的宽度只由其内容决定，并且可以和其他内联元素在同一行上显示。
block元素会被显示为块级元素。块级元素会独占一行，
inline-block结合了内联元素和块级元素的特点。元素像内联元素一样在同一行上显示，但可以设置宽度和高度。
（拓展）

flex

（以后会常用）

将元素设置为弹性盒模型（flexbox）容器，允许其子元素以灵活的方式排列和布局。
grid将元素设置为网格布局（grid layout）容器，允许其子元素在二维网格中排列和布局。

五、css的单位

5.1.单位类型与特性

5.1.1.绝对单位

1.像素（px）：
特性：固定大小，不随视口变化

应用场景：图标、图标、边框等固定大小的元素。

注意事项：在高分辨率屏幕上，可能导致页面元素显得过小或模糊

2.毫米、厘米、英寸（in）：
特性：给予物理尺寸，适用于打印样式表

应用场景：需要精确控制打印输出布局时使用

注意事项：在网页设计中较少用到，因为屏幕显示与物理尺寸存在差异

3.点（pt）、派卡（pc）：
特性：印刷行业常用单位，1pt等于1/72英寸，1pc等于12点

应用场景：在需要精准控制打印输出布局时使用

注意事项：同样在网页设计中不常见

5.1.2.相对单位

1.百分比（%）

特性：相对于父元素的尺寸来定义。

应用场景：流体布局，是元素尺寸可以根据父容器的大小变化。

注意事项：对于未设置宽度的元素，百分比无效；多层嵌套元素时，尺寸计算相对复杂。

2.em：

特性：相对于元素的字体大小来定义，如果当前行内文本的字体尺寸未被人设置，则相对于浏览器的默认字体尺寸。

应用场景：字体大小的缩放，以字体大小为基准的元素尺寸调整

注意事项：继承关系复杂，多层嵌套时计算量大；可能收到父元素字体大小的影响。

3.rem：
特性：相对于根元素（即html元素）的字体大小来定义

应用场景：在保持一致性的同时进行全局尺寸调整，适应响应式设计

注意事项：不会收到父元素字体大小的影响，提供了一个更稳定、更可预测的度量方式。

4.ex和ch：
特性：ex是字体中消协字母x的高度，ch是给予数字0的宽度计算的

应用场景：在需要给予字体尺寸进行布局时使用

注意事项：使用较少，因为它们的值取决于元素的font-size和font-family属性

5.1.3.视口单位

vw（视口宽度百分比）：

特性：表示视口宽度的百分比。

应用场景：创建响应式布局，使元素宽度与视口宽度成比例。

注意事项：对于老旧浏览器（如IE9及以下版本）不支持。

vh（视口高度百分比）：

特性：表示视口高度的百分比。

应用场景：创建响应式布局，使元素高度与视口高度成比例。

注意事项：同样需要注意老旧浏览器的兼容性。

vmin和vmax：

特性：vmin表示视口宽度和高度中的较小值的百分比，vmax表示较大值的百分比。

应用场景：在不同屏幕尺寸下提供更加平衡的尺寸调整。

注意事项：同样需要考虑浏览器兼容性。

5.2.单位的选择与应用

1.根据需求选择单位：

在进行网页设计时，需要根据具体需求选择合适的单位。例如，对于需要精确控制的尺寸，可以选择像素（px）或绝对长度单位；对于需要根据字体大小来调整的尺寸，可以选择em或rem单位；对于需要根据视口大小来调整的尺寸，可以选择vw、vh、vmin或vmax单位。

2.考虑浏览器兼容性：

在选择单位时，还需要考虑浏览器的兼容性。例如，老旧浏览器可能不支持某些新的CSS单位（如vw、vh等）。因此，在进行网页设计时，需要确保所选单位在目标浏览器上都能得到良好的支持。

3.结合使用多种单位：

在实际开发中，可以结合使用多种单位来实现更加灵活和可适应不同设备的布局。例如，可以使用像素（px）来定义固定大小的元素，使用百分比（%）来定义相对大小的元素，使用vw或vh来定义与视口大小成比例的元素等。

六、文本相关属性

6.1.常见文本属性

CSS（层叠样式表）提供了多种用于设置文本样式的属性。以下是一些常见的文本相关属性及其用途：

color：设置文本的颜色。

p {
    color: #333;
}
/*本文最后会简单讲一下关于颜色#333的相关内容
无基础的同学可以看一下*/

font-family：设置文本的字体族。

p {
    font-family: Arial, sans-serif;
}

font-size：设置文本的字体大小。

p {
    font-size: 16px;
}

font-weight：设置文本的粗细。

p {
    font-weight: bold; 
/* 其他值包括 normal, lighter, bolder, 100-900（以100为增量） */
}

font-style：设置文本的字体样式（正常、斜体或倾斜）。

p {
    font-style: italic; /* 其他值包括 normal 和 oblique */
}

text-align：设置文本的对齐方式（左对齐、右对齐、居中对齐或两端对齐）。

p {
    text-align: center; /* 其他值包括 left, right, justify */
}

text-decoration：设置文本的装饰（如下划线、上划线、贯穿线等）。

a {
    text-decoration: none; 
/* 其他值包括 underline, overline, line-through, blink（不推荐使用） */
}

text-transform：控制文本的大小写（全部大写、全部小写或首字母大写）。

p {
    text-transform: uppercase; /* 其他值包括 lowercase 和 capitalize */
}

line-height：设置文本行高。

p {
    line-height: 1.5; /* 可以是数值、百分比或长度单位 */
}

letter-spacing：设置字符间距。

p {
    letter-spacing: 2px; /* 可以是负值 */
}

word-spacing：设置单词间距。

p {
    word-spacing: 4px; /* 可以是负值 */
}

font-variant：设置小型大写字母（小型大写字母通常用于标题）。

p {
    font-variant: small-caps; /* 其他值包括 normal */
}

text-indent：设置文本首行缩进。

p {
    text-indent: 30px; /* 可以是负值 */
}

text-shadow：设置文本阴影。

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
/*text-shadow:上 右 下 左（逆时针方向）rgba阴影可在浏览器上调*/
}

white-space：设置如何处理空白字符（如空格和换行）。

pre {
    white-space: pre-wrap; /* 其他值包括 normal, nowrap, pre, pre-line */
}

overflow-wrap：设置长单词或URL是否应该被拆分换行。

p {
    overflow-wrap: break-word; /* 其他值包括 normal, anywhere, break-all */
}

direction：设置文本的方向。

p {
    direction: rtl; /* 从右到左，默认值为 ltr（从左到右） */
}

unicode-bidi：与direction属性一起使用，用于设置文本嵌入的双向算法。

p {
    unicode-bidi: bidi-override; /* 使用双向算法覆盖，默认值为 embed（使用嵌入的双向算法） */
}

writing-mode：设置文本在页面上的书写模式。

常用值：horizontal-tb（水平书写，从上到下）、vertical-lr（垂直书写，从左到右）、vertical-rl（垂直书写，从右到左）等。

p {
    writing-mode: vertical-rl; 
/* 垂直书写，从右到左，其他值包括 horizontal-tb（水平书写，从上到下）、
vertical-lr（垂直书写，从左到右）等 */
}

text-overflow：当文本溢出包含它的元素框时，指定如何显示溢出的文本。

常用值：clip（剪切溢出文本，不显示）、ellipsis（显示省略号以表示文本被剪切）。

p {
    text-overflow: ellipsis; /* 显示省略号以表示文本被剪切，其他值为 clip（剪切溢出文本，不显示） */
    white-space: nowrap;    /* 通常与 text-overflow 一起使用，防止文本换行 */
    overflow: hidden;       /* 隐藏超出容器的内容 */
}

overflow-wrap（或word-wrap，两者效果相同，但word-wrap是旧名称）：设置如何处理长单词或URL地址的换行。

p {
    overflow-wrap: break-word; 
/* 在长单词或URL内部进行换行，默认值为 normal（只在允许的断行点换行） */
}

font-feature-settings：允许对OpenType字体中的特定特性进行低级控制。

需要指定要启用或禁用的特性的标签和值。

p {
    font-feature-settings: "liga" 1, "dlig" 1;
/* 启用连字和离散连字特性，具体标签和值根据字体而定 */
}

font-kerning：控制字体中的字距调整（kerning）是否应用。

p {
    font-kerning: none;
/* 不应用字距调整，默认值为 auto（根据字体和浏览器的设置自动应用字距调整） */
}

font-variant-alternates：控制字体的替代变体，如小型大写字母、分数字符等。

p {
    font-variant-alternates: stylistic(1); 
/* 启用字体的某种样式变体，具体编号根据字体而定 */
}

font-variant-caps：控制字体的大小写形式，如小型大写字母、所有大写字母等。

常用值：normal（默认值）、small-caps（小型大写字母）、all-small-caps（所有字母均为小型大写字母）、petite-caps（比小型大写字母更小的变体，但并非所有字体都支持）等。

p {
    font-variant-caps: all-small-caps; 
/* 所有字母均为小型大写字母，其他值包括 normal（默认值）、small-caps（小型大写字母）、
petite-caps（比小型大写字母更小的变体，但并非所有字体都支持）等 */
}

font-variant-numeric：控制数字的显示方式，如比例数字、衬线数字等。

p {
    font-variant-numeric: tabular-nums; /* 使用表格数字显示，具体类型根据字体而定 */
}

font-variant-position：控制字体中字符的位置，如上标、下标等。

常用值：normal（默认值）、super（上标）、sub（下标）等。

p {
    font-variant-position: super; /* 上标，其他值包括 normal（默认值）、sub（下标）等 */
}

white-space:设置如何处理空白字符（如空格和换行）

pre {
    white-space: pre-wrap;
/* 保留空白符序列，但是正常地进行换行，其他值包括 normal（合并空白符，并允许自动换行）、
nowrap（合并空白符，但是不允许换行）、pre（保留空白符序列，并且不进行换行）、
pre-line（合并空白符，但是保留所有换行符） */
}

七、颜色

7.1.颜色的基本属性

  1. 色调：指颜色的种类，如红色、蓝色等。
  2. 饱和度：指颜色中灰色的含量。饱和度最大时，颜色中灰色的含量为零，颜色最鲜艳；饱和度最小时，颜色基本就是灰色。
  3. 亮度：指颜色中黑色的含量。亮度最大时，颜色中黑色的含量为零，颜色最亮；亮度最小时，颜色最暗。
  4. 对比度：指前景色与背景色之间的差异。差异越大，对比度越大，反之则越小。

7.2.颜色的表示方法

CSS支持多种颜色表示方法，包括色彩关键字、RGB色彩模式、HSL色彩模式等。

1、色彩关键字：如red、blue、green等，这些是不区分大小写的标识符，表示具体的颜色。

2、RGB色彩模式：使用红（Red）、绿（Green）、蓝（Blue）三个颜色的叠加来表示颜色。在CSS中，RGB色彩模式可以通过两种方式表示：

十六进制符号：#RRGGBB，其中RR、GG、BB分别表示红、绿、蓝三个颜色的值，取值范围为00~FF。例如，红色可以表示为#FF0000。

百分数或整数：rgb(red, green, blue)，其中red、green、blue分别表示红、绿、蓝三个颜色的值，取值范围为0255（整数）或0%100%（百分数）。例如，红色可以表示为rgb(255, 0, 0)或rgb(100%, 0%, 0%)。

3、HSL色彩模式：使用色调（Hue）、饱和度（Saturation）、亮度（Lightness）三个参数来表示颜色。在CSS中，HSL色彩模式通过hsl(H, S, L)函数实现，其中H表示色调，取值范围为0360（度数）；S和L表示饱和度和亮度，取值范围为0%100%（百分数）。例如，红色可以表示为hsl(0, 100%, 50%)。

7.3.颜色的透明度

在CSS中，除了可以设置颜色的色调、饱和度、亮度等属性外，还可以设置颜色的透明度。透明度的设置对于实现一些特殊效果非常有用。

  1. RGBA色彩模式：在RGB色彩模式的基础上增加了一个alpha通道，用于表示颜色的透明度。alpha的取值范围为0.0（完全透明）到1.0（完全不透明）。例如，半透明的红色可以表示为rgba(255, 0, 0, 0.5)。
  2. HSLA色彩模式：在HSL色彩模式的基础上也增加了一个alpha通道，用于表示颜色的透明度。用法与RGBA类似。

码字不易，希望亲爱的网友们给孩子点点赞~~谢谢啦

上述内容若有遗漏或不足之处，恳请各位大佬不吝赐教，指正并帮助美化，以期更加完善。

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

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

相关文章

Spring Boot出现java: 错误: 无效的源发行版：16的解决方式

Spring Boot出现java: 错误: 无效的源发行版：16的解决方式

第一步&#xff1a; 修改为SDK的目标字节码版本 第二步&#xff1a;CtrlShiftAltS进入项目结构 第三步&#xff1a;pom.xml文件中 在网上搜索和自己SDK适配的Springboot版本&#xff0c;1.8对应的是2.7.1&#xff08;可以用&#xff09; 修改Java版本为1.8 最后的最后&a…
阅读更多...
Redis学习 ——缓存

Redis学习 ——缓存

文章目录 一、Redis缓存的介绍二、Redis缓存问题2.1 缓存穿透2.2 缓存击穿2.3 缓存雪崩2.4 双写一致性2.5 缓存持久化RDBAOF 三、缓存数据管理3.1 数据过期策略3.2 数据淘汰策略 一、Redis缓存的介绍 我们在日常的代码编写中比较少使用到Redis&#xff0c;但是如果涉及到了比较…
阅读更多...
【开源免费】基于Vue和SpringBoot的在线考试系统（附论文）

【开源免费】基于Vue和SpringBoot的在线考试系统（附论文）

本文项目编号 T 624 &#xff0c;文末自助获取源码 \color{red}{T624&#xff0c;文末自助获取源码} T624&#xff0c;文末自助获取源码 网络的广泛应用给生活带来了十分的便利。所以把在线考试管理与现在网络相结合&#xff0c;利用java技术建设在线考试系统&#xff0c;实现…
阅读更多...
git-.git目录解析

git-.git目录解析

目录 .git目录下的文件信息 logs&#xff1a;记录各个分支日志记录 refs&#xff1a;记录本地分支、远程分支、tag标签最新commitID config: 配置信息&#xff0c;详细内容解析看下面介绍HEAD: 工作空间当前所在分支 inde文件: 它又常被称为“暂存区”或“缓存区”。这个文件…
阅读更多...
sglang 部署Qwen2VL7B，大模型部署，速度测试，深度学习

sglang 部署Qwen2VL7B，大模型部署，速度测试，深度学习

sglang 项目github仓库&#xff1a; https://github.com/sgl-project/sglang 项目说明书&#xff1a; https://sgl-project.github.io/start/install.html 资讯&#xff1a; https://github.com/sgl-project/sgl-learning-materials?tabreadme-ov-file#the-first-sglang…
阅读更多...
前端pdf预览方案

前端pdf预览方案

前端pdf预览方案 pdf预览一般不需要前端生成pdf文件&#xff0c;pdf文件一般是通过接口&#xff0c;获取pdf文件【responseType:‘blob’,】或二进制文件流【responseType: ‘arraybuffer’,】或者已有的pdf文件。 前端PDF预览通常是通过读取现有的PDF文件&#xff0c;并使用…
阅读更多...
Kotlin return与return@forEachIndexed

Kotlin return与return@forEachIndexed

Kotlin return与returnforEachIndexed fun main() {val data arrayOf(0, 1, 2, 3, 4)println("a")data.forEachIndexed { index, v ->if (v 2) {//类似while循环中的continue//跳过&#xff0c;继续下一个forEachIndexed迭代returnforEachIndexed}println("…
阅读更多...
MATLAB绘制克莱因瓶

MATLAB绘制克莱因瓶

MATLAB绘制克莱因瓶 clc;close all;clear all;warning off;% clear all rand(seed, 100); randn(seed, 100); format long g;% Parameters u_range linspace(0, 2*pi, 100); v_range linspace(0, pi, 50); [U, V] meshgrid(u_range, v_range);% Parametric equations for t…
阅读更多...
DDRPHY数字IC后端设计实现系列专题之数字后端floorplanpowerplan设计

DDRPHY数字IC后端设计实现系列专题之数字后端floorplanpowerplan设计

3.2.3 特殊单元的布局 布图阶段除了布置 I/O 单元和宏单元&#xff0c;在 28nm 制程工艺时&#xff0c;还需要处理两种特 殊的物理单元&#xff0c;Endcap 和 Tapcell。 DDRPHY数字IC后端设计实现系列专题之后端设计导入&#xff0c;IO Ring设计 &#xff08;1&#xff09;拐…
阅读更多...
css uniapp背景图宽度固定高度自适应可以重复

css uniapp背景图宽度固定高度自适应可以重复

page {height: 100%;background-image: url(https://onlinekc.a.hlidc.cn/uploads/20241115/350f94aaf493d05625a7ddbc86c7804e.png);background-repeat: repeat;background-size: contain;} 如果不要重复 把background-repeat: repeat;替换background-repeat: no-repeat;
阅读更多...
CC工具箱使用指南：【CAD导出界址点Excel】

CC工具箱使用指南：【CAD导出界址点Excel】

一、简介 群友定制工具。 面图层导出界址点Excel表之前已经做过好几个&#xff0c;这个工具则是将CAD导出Excel。 CAD数据如下&#xff1a; 工具将如上截图中的边界线导出界址点Excel&#xff0c;并记录下面内的文字。 二、工具参数介绍 点击【定制工具】组里的【CAD导出界…
阅读更多...
输出比较简介

输出比较简介

输出比较简介 主要是用来输出PWM波形&#xff0c;这个波形是驱动电机的&#xff08;智能车和机器人等&#xff09;必要条件 OC&#xff08;Output Compare&#xff09;输出比较&#xff0c;还有IC&#xff0c;全称是Input Capture&#xff0c;意为输入捕获&#xff0c;还有CC…
阅读更多...
力扣（leetcode）题目总结——辅助栈篇

力扣（leetcode）题目总结——辅助栈篇

leetcode 经典题分类 链表数组字符串哈希表二分法双指针滑动窗口递归/回溯动态规划二叉树辅助栈 本系列专栏&#xff1a;点击进入 leetcode题目分类 关注走一波 前言&#xff1a;本系列文章初衷是为了按类别整理出力扣&#xff08;leetcode&#xff09;最经典题目&#xff0c…
阅读更多...
unity老猿随笔

unity老猿随笔

下面是我最近开始整理的一些unity的基础知识和疑难杂症&#xff0c;如果大家有什么可以分享出来的经验&#xff0c;可以评论区留言&#xff0c;验证后整理进来&#xff0c;全猿学习&#xff01;如果有不对的地方&#xff0c;也欢迎指正&#xff0c;避免误人子弟&#xff01; l…
阅读更多...
『VUE』30. 生命周期的介绍（详细图文注释）

『VUE』30. 生命周期的介绍（详细图文注释）

目录 生命周期生命周期的8阶段生命周期小例子总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 生命周期 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤&#xff0c;比如设置好数据侦听&#xff0c;编译模板&#xf…
阅读更多...
Go语言跨平台桌面应用开发新纪元：LCL、CEF与Webview全解析

Go语言跨平台桌面应用开发新纪元：LCL、CEF与Webview全解析

开篇寄语 在Go语言的广阔生态中&#xff0c;桌面应用开发一直是一个备受关注的领域。今天&#xff0c;我将为大家介绍三款基于Go语言的跨平台桌面应用开发框架——LCL、CEF与Webview&#xff0c;它们分别拥有独特的魅力和广泛的应用场景。通过这三款框架&#xff0c;你将能够轻…
阅读更多...
华为HCCDA云技术认证--网络服务

华为HCCDA云技术认证--网络服务

大家好呀&#xff01;我是reload。今天继续带大家学习华为HCCDA云技术认证&#xff0c;涵盖华为云最为核心的计算、存储、网络、数据库、安全、部署等服务。今天学习网络服务相关内容。 登录华为云官网&#xff1a;https://www.huaweicloud.com/ &#xff0c;进入首页&#xff…
阅读更多...
rocketmq5源码系列--（一）--搭建调试环境

rocketmq5源码系列--（一）--搭建调试环境

说在前头&#xff1a;阿里的rocketmq的文档是真他妈的烂的1b&#xff0c;很多东西都不说&#xff0c;全靠自己看源码&#xff0c;摸索&#xff0c;草&#xff0c;真的要吐血了 rocketmq的版本5而不是版本4&#xff0c;版本5比版本4多了个proxy rocketmq5 三个组件&#xff1a;…
阅读更多...
如何通过电脑监控软件远程监控一台电脑的所有屏幕画面记录

如何通过电脑监控软件远程监控一台电脑的所有屏幕画面记录

7-1 本教程介绍一个简单的工具&#xff0c;可以安装在电脑中&#xff0c;按设置的时间间隔&#xff0c;自动对屏幕截图保存&#xff0c;并且可以在有网络的其它电脑上远程提取截图文件。 该软件用于自动记录电脑的屏幕画面内容和变化&#xff0c;如果你有这方面的使用场景&am…
阅读更多...
Redis 概 述 和 安 装

Redis 概 述 和 安 装

安 装 r e d i s: 1. 下 载 r e dis h t t p s : / / d o w n l o a d . r e d i s . i o / r e l e a s e s / 2. 将 redis 安装包拷贝到 /opt/ 目录 3. 解压 tar -zvxf redis-6.2.1.tar.gz 4. 安装gcc yum install gcc 5. 进入目录 cd redis-6.2.1 6. 编译 make …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023