周报：css相关扩展知识

news2024/12/24 18:16:48

目录

1. 扩展知识：浮动盒子的排列位置

浮动盒子常见排列特点：

浮动盒子扩展特点：

 2.扩展知识:行高的取值

line-height常见取值：

行高的取值的方式： 

两个方式的区别：

3.扩展知识：body背景

画布

body元素的特点

背景图常见问题 

4.扩展知识：参考线-深入理解字体

对于字体的有关设置方式：

文字

font-size

行高

vertical-align

可替换元素和行块盒的基线

5. 扩展知识：svg

svg

怎么使用

实例（画太极图） 

 6.扩展知识：数据链接

数据链接

如何书写

意义

优势：

缺点：

base64

1. 扩展知识：浮动盒子的排列位置

浮动盒子常见排列特点：

1. 左浮动的盒子靠上靠左排列

2. 右浮动的盒子靠上靠右排列

3. 浮动盒子在包含块中排列时，会避开常规流盒子  （当常规流盒子在浮动盒子之前）

4. 常规流块盒在排列时，无视浮动盒子，（当常规流盒子在浮动盒子之后）

5. 行盒在排列时，会避开浮动盒子

6. 外边距合并并不会发生

浮动盒子扩展特点：

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后向左或向右移动

 2.扩展知识:行高的取值

设置行高时用line-height：

line-height常见取值：

1. px，像素值

设置多行文本时，如果设置固定高度，则当文字大小不同时，相同高度产生的效果不同，影响用户体验

2. em单位

em表示字体大小的倍数，2em即为字体大小的两倍

3. 百分比

行高的取值的方式： 

  1. 先继承后计算像素：

    • 继承： 元素通常会继承其父元素的行高属性。如果没有显式设置行高，子元素会继承父元素的行高值。

    • 计算像素： 一旦继承了父元素的行高属性，子元素的实际行高可能会受到其他因素的影响而被重新计算。这些因素可能包括字体大小、字体的度量值（比如 x-height）、元素本身的设定（如设置的行高值），甚至是浏览器的默认样式。

  2. 先计算像素后继承：

    • 计算像素： 子元素的行高首先被计算为像素值，这可能受到字体、元素本身的设置等因素的影响。

    • 继承： 如果父元素没有显式设置行高，子元素将不会继承任何行高值，而是使用浏览器的默认行高或者特定于字体的行高值。

两个方式的区别：

  • 先继承后计算像素： 子元素首先继承父元素的行高属性，然后根据各种因素重新计算实际的行高值。这使得子元素可以在继承行高的基础上适应其自身的特定要求。

  • 先计算像素后继承： 子元素不会直接继承父元素的行高属性，而是根据自身的计算结果确定行高，没有显式设置时可能会使用默认值。

3.扩展知识：body背景

介绍body背景的相关扩展知识之前，先来为大家介绍介绍画布吧。

画布

画布即为canvas元素，简单来说，画布就是一块区域，它的特点有以下两点：

  •  最小宽度为视口宽度

  • 最小高度为视口高度

而html元素的背景是覆盖整个画布的 

首先上代码：

body{
        background-color: #008c8c;
        width:300px;
        height: 300px;
    }
</head>
<body>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis, sapiente inventore? Ex dolorem nesciunt perferendis atque quod officia possimus repudiandae consequuntur dolor, cumque cupiditate velit repellat voluptas amet? In, quos?
</body>
</html>

接着是效果：

大家有没有发现什么疑问呢，即使给body元素设置了宽高，但他的背景颜色还是超出了边框盒覆盖到了整个页面 ，此时，如果给html加上背景，又会发生什么呢

html{
            background-color: lightblue;
        }

 

这时又会发现body元素背景正常了，

body元素的特点

由此我们可以知道body元素的一些脾气了：

如果html元素有背景，body元素正常（背景覆盖边框盒）

如果html元素没有背景，body元素的背景覆盖画布

背景图常见问题 

接下来我们看背景图的常见问题吧

先上代码：

body{
            background: url(./背景图3.webp) no-repeat;
            width: 100px;
            background-size: 100%;
            height: 100px;
            border: 2px solid #fff;
        }

接着是效果 

在这里我们发现了同样的问题，背景图直接忽略body的边框盒撑满整个页面，

我们再来看一个问题，如果将body的宽度设置为很长的话，会发生什么呢：

我们发现，背景图并未随着画布的变长而延伸，此时就说明了背景图的特点 ：

  • 背景图的宽度百分比，相对于视口，而背景图是相对于画布的,
  • 背景图的高度百分比，相对于html（网页）高度

同时还有别的特点：

  • 背景图的横向位置百分比、预设值，都相对于视口
  • 背景图的纵向位置百分比、预设值，都相对于网页高度

这时，如果为html添加背景，就会解决这个问题。

html{
            background-color: lightblue;
        }

 

同时一旦给html元素加上背景，一切都会正常 

html{
            background-color: lightblue;
        }
        body{
            background: url(./背景图3.webp) no-repeat;
            width: 3000px;
            /* 先左右再上下 */
            background-size: 100% 50%;
            background-position: center;
            height: 100px;
            border: 2px solid #fff;
        }

4.扩展知识：参考线-深入理解字体

对于字体的有关设置方式：

font-size、line-height、 vertical-align（垂直对齐）、font-family

文字

文字是通过一些文字制作软件制作的，比如fontforge

制作文字时，会有很多参考线，不同的文字类型参考线不一样，同一种文字类型，参考线一致

font-size

字体大小，设置的是文字的相对大小

文字的相对大小：（相对单位）1000、2048、1024

文字顶线到底线的距离，是文字的实际大小（content-area内容区），文字大小会按比例缩放consolas实际大小2398，但文字大小为2048，设置文字大小时，实际所占区域=font-size的值*（2398/2048）

行盒的背景覆盖文字的内容区，即实际所占区域

行高

顶线向上延伸的空间，和底线向下延伸的空间，两个空间相等，该空间叫做gap（空隙）

gap默认情况下，是字体设置者决定

top和bottom之间的距离，叫做virtual-area（虚拟区），gap是可以改变的，行高就是virtual-area，设置行高时，实际上设置的是virtual-area

linne-height：normal，默认值，使用文字默认的gap，在谷歌浏览器中，Arial字体使用默认的gap值，他有默认行高如果line-height与font-size一致，则gap值就会成为负值，多行文本排列时，行与行之间会发生重叠

  • 文字不一定出现在框内的正中间
  • content-area一定出现在virtual-area的中间（两个gap相等）

尽量不要将line-height设为1，设为一即为virtual-area高度和文字高度相同，但文字实际所占高度比文字高度大，再加上gap值，行高相对就会更小，多行文本之间会有重叠

span{
            background-color: aquamarine;
            font-size: 200px;
            font-family: Arial;
            line-height: 1;
            border: 2px solid;
        }
<span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, neque iusto maxime incidunt, officiis laudantium voluptatem iste soluta numquam itaque quisquam, adipisci earum vero harum doloremque ea quasi amet laboriosam.->
        </span>

通过上图可以发现每行文字之间的背景图发生重叠，这是将line-height设为1的效果， virtual-area高度和文字高度相同，此时加上上下gap，文字区域就重叠了。

vertical-align

决定参考线：font-size,font-family,line-height

一个元素如果子元素出现行盒，该元素内部也会产生参考线

 

<style>
        p{
            background-color: antiquewhite;
            font-size: 32px;
            font-family: Arial;
            line-height: normal;
        }
        span{
            background-color: aquamarine;
            font-size: 200px;
            font-family: Arial;
            line-height: 1;
            border: 2px solid;
        }
    </style>
 <p>
        M
        <span>
            M
        </span>
        <span style="font-size: 5em;">
            M
        </span>
    </p>

 

 

只有行盒会产生参考线，故文字一定在行盒里

  • baseline:该元素的基线与父元素的基线对齐
  • super：该元素的基线与父元素的上基线对齐
  • sub：该元素的基线与父元素的下基线对齐
  • text-top：该元素的virtual-area的顶边，对齐父元素的text-top（第二条线）
  • text-bottom：该元素的virtual-area的底边，对齐父元素的text-bottom（倒数第u
  • top：该元素的virtual-area的顶边，对其父元素的顶边，（最高顶边）（line-box的顶边）
  • botoom：该元素的virtual-area的底边，对其父元素的底边，（该行中的最低底边）（line-box的底边）
  • middle：该元素的中线（content-area的一半），与父元素的x字母高度一半的位置对齐
  • 行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒的最低底边。

实际一个元素的实际占用高度（高度自动），高度的计算通过line-box计算

行盒：inline-box

行框：line-box

数值：相对于基线的偏移量，向上为正数，向下为负数。

百分比：相对于基线的偏移量，百分比是相对于自身virtual-area的高度

line-box是承载文字内容的必要条件，以下情况不生成行框：

1. 某元素内部没有任何行盒

2. 某元素字体大小为0

<p style="font-size: 0;">
        <span style="font-size: 2em;">
            m
        </span>
    </p>

此时网页上不会出现m。

可替换元素和行块盒的基线

图片：基线位置位于图片的下外边距（包括margin下边距）

解释了图片下方的白边问题，设置字体为0或将其变为块盒时，白边消失，是因为没有了line-box

表单元素：基线位置在内容的底边，不包括margin

行块盒：

1. 行块盒最后一行有line-box，最后一行的基线作为整个行块盒的基线

2. 如果行块盒内部没有行盒，则使用下外边距作为基线

<p>
        <span style="width: 100px; border: 2px solid; display: inline-block;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur dicta, delectus ut quasi similique explicabo, est, reiciendis eos quas ratione soluta non. Quae incidunt natus rem expedita iste labore. Doloribus?
        </span>
        <span>
            M
        </span>
    </p>

5. 扩展知识：svg

svg

svg: scalable vector graphics,可缩放的矢量图

1. 该图片使用代码书写而成

2. 缩放不会失真

3. 内容轻量（内容较少）

4. 只能做简单的图形

怎么使用

svg可以嵌入浏览器，也可以单独成为一个文件

svg引用方法：

1. 直接写svg代码

2. 嵌入图片：img路径

3. 嵌入p元素背景图

4. embed(嵌入元素)

5. <embed src="" type="image/svg+xml">

6. 利用object元素嵌入对象

   <object>元素是HTML中用于嵌入对象的标签，可以包含各种类型的数据，如图像、音频、视频、Flash 动画等。它提供了一种通用的方法来嵌入对象，与  元素和其他嵌入元素相比， 具有更强大的功能和更多的控制选项。<img><object>

以下是 <object> 元素的基本结构和属性：

html

<object

  width="width_value"

  height="height_value"

  data="URL_or_file_path"

  type="media_type"

  codetype="code_type">

  <!-- 嵌入的内容或替代文本 -->

</object>

width（宽度）：指定对象的宽度。

height（高度）：指定对象的高度。

data（数据）：指定要嵌入的对象的URL或文件路径。

type（类型）：指定对象的媒体类型（MIME 类型），用于告诉浏览器如何处理对象。这是一个必需的属性。

codetype（代码类型）：指定嵌入对象所使用的编码的类型。

<object>元素可以包含嵌入的内容或替代文本，如果浏览器无法显示嵌入的对象，将会显示替代文本。这使得 <object>元素在处理各种媒体类型和提供替代内容方面非常灵活。

以下是一个简单的 <object> 元素的示例，用于嵌入一个图像：

html

<object data="example.jpg" type="image/jpeg" width="300" height="200">

  <!-- 替代文本或其他嵌入的内容 -->

</object>

在这个例子中，data 属性指定了要嵌入的图像的URL，type 属性指定了图像的媒体类型，width而  和height  属性定义了图像的宽度和高度。如果浏览器无法显示图像，将会显示<object>  元素内的替代文本或其他嵌入的内容。

请注意，虽然  <object>元素是一种强大的嵌入元素，但在某些情况下，使用更简单的元素，如 <img>、<audio> 或  <video>可能更为合适，具体取决于嵌入的内容类型。

<embed src="./imgs/微信 (1).svg" type="image/svg+xml">
    <object data="./imgs/微信 (1).svg" type="image/svg+xml"></object>
    <iframe src="./imgs/微信 (1).svg" frameborder="0"></iframe>

7. iframe元素，但不好设置其样式，必须要改变本质

alt+shift+f  格式化

xml语言，svg使用该语言定义

embed元素：嵌入资源

书写svg代码

  • 矩形：rect
  • 圆形 circle
  • 椭圆 ellipse
  • 线条 line
  • 折线 polyline
  • 多边形 polygon
  • 路径 path
<!-- 可以在svg里设置宽高 -->
<svg style="background:gray;" width="500" height="1000"  xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="100" y="100" fill="red" stroke="#008c8c" stroke-width="5" />
    <!-- fill表示背景颜色，stroke表示边框颜色 ,stroke表示边框宽度
摆放位置可用x，y设置，x表示矩形的左上角与左边的距离，y表示矩形的左上角离上边的距离-->
    <circle  cx="200" cy="400" r="50" fill="#008c8c" stroke="#000" stroke-width="5"> </circle>
    <!-- cx即center x,圆心的坐标 
    只要边框，不要背景，只要设置fill为transparent(透明)即可-->
    <ellipse rx="80" ry="30" cx="200" cy="500" fill="red" stroke="#008c8c" stroke-width="5" />
    <!-- rx是长半径，ry是短半径 -->
    <line x1="10" x2="40" y1="300" y2="40" stroke="#008c8c" stroke-width="5"/>
    <!-- x1,y1,x2,y2分别为线段两个端点的坐标 -->
    <polyline points="100,100,250,300,450,654" fill="red" stroke="#000" stroke-width="" />
    <!-- 标识100，100点，250，300点，450，654点的连线 -->
    <polygon points="300,300,400,400,300,500" fill="none" stroke="#000" stroke-width="5" />
    <!-- 多边形会将所有点连在一起，形成封闭图形 -->
    <path d="M150 600 L300 600 L300 800 L150 800" stroke="#000" stroke-width="5" />
    <!-- M，把坐标移到150，600这个位置，L将线画到300，600这个位置 
    也可将stroke等元素放到style中,连线的时候会填充颜色为黑色-->
    <path d="M300 300 A150 150 0 1 1 450 150" fill="none" style="stroke:#000; stroke-width:5" />
    <!-- A半径1 半径2 顺时针旋转角度 0/1(画小弧为0，画大弧为1) 0/1(顺时针画为1，逆时针为0) 终点坐标-->
</svg>

M = moveto,把坐标移入到某个地方

L = lineto

H = horizontal lineto

V = vertical lineto

C = curveto

S = smooth curveto

Q = quadratic Belzier curve

T = smooth quadratic Bezier curveto

A = elliptical Arc

Z = closepath

实例（画太极图） 

<svg style="background:#ccc;" width="500" height="500" xmlns="http://www.w3.org/2000/svg">
    <circle cx="250" cy="250" r="200" fill="none" stroke="#999" stroke-width="2" />
 <!-- cx即center x,圆心的坐标 
    只要边框，不要背景，只要设置fill为transparent(透明)即可-->
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50" fill="#000" />
    <path d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50" fill="#fff"/>
 <!-- A半径1 半径2 顺时针旋转角度 0/1(画小弧为0，画大弧为1) 0/1(顺时针画为1，逆时针为0) 终点坐标-->
    <circle cx="250" cy="150" r="30" fill="#fff"/>
    <circle cx="250" cy="350" r="30" fill="#000"/>
</svg>

以下为太极图的演示效果： 

 6.扩展知识：数据链接

数据链接

data url

如何书写

数据链接：将目标文件的数据直接书写到路径位置

语法：data：MIME,数据

意义

优势和劣势

优势：

  1. 减少HTTP请求数： 将小型资源嵌入到文档中可以减少HTTP请求的数量，从而加快页面加载速度。这对于小型图标、小图片或者其他较小的资源是非常有利的。

  2. 避免额外的文件请求： 不需要额外的文件请求，因为资源被直接嵌入到了文档中。这减少了与服务器的通信次数，有助于提高性能。

  3. 适用于小型图标和短期使用的图片： 对于一些小型的图标、短期使用的图片或者其他较小的资源，使用数据链接可以更方便，无需额外的文件。

缺点：

  1. 体积较大： Base64 编码会使数据文件的体积变大，通常会增加约1/3的大小。这意味着，对于大型文件，使用数据链接可能会导致页面加载变慢，因为它增加了传输的数据量。

  2. 缓存问题： 如果同一个资源被多个页面使用，而且这个资源经常变动，那么嵌入在多个页面中的数据可能会导致缓存失效，因为每个页面都包含了资源的副本。

  3. 不利于维护： 将资源嵌入到文档中可能使代码变得混乱，尤其是对于大型或复杂的项目。维护和更新资源可能会变得更加困难。

  4. 不适合大型文件： 对于大型文件（比如大图像、视频等），使用数据链接会显著增加 HTML 文档的体积，导致加载时间变长。

应用场景：

1. 当请求单个图片体积较小，并且该图片因为各种原因不适合制作雪碧图，可以使用数据链接

2. 图片由其他代码动态生成，并且图片较小，可以使用数据链接。

3. 也可以使用在背景图url中

base64

一般在图片中使用，css一般不使用，但也可使用，只要将数据转化为base64编码即可

data:image/png;base64,····

一种编码方式

通常用于将一些二进制数据用一个可书写的字符串来表示

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

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

相关文章

无公网IP环境如何远程访问本地内网搭建的Emby影音库服务器

无公网IP环境如何远程访问本地内网搭建的Emby影音库服务器

文章目录 1.前言2. Emby网站搭建2.1. Emby下载和安装2.2 Emby网页测试 3. 本地网页发布3.1 注册并安装cpolar内网穿透3.2 Cpolar云端设置3.3 Cpolar内网穿透本地设置 4.公网访问测试5.结语 1.前言 在现代五花八门的网络应用场景中&#xff0c;观看视频绝对是主力应用场景之一&…
阅读更多...
kubeadm快速搭建k8s高可用集群

kubeadm快速搭建k8s高可用集群

1.安装及优化 1.1基本环境配置 1.环境介绍 &#xff08;1&#xff09;.高可用集群规划 主机名ip地址说明k8s-master01192.168.2.96master节点k8s-master02192.168.2.97master节点k8s-master03192.168.2.98master节点k8s-node01192.168.2.99node节点k8s-node02192.168.2.100n…
阅读更多...
uc_12_进程间通信IPC_有名管道_无名管道

uc_12_进程间通信IPC_有名管道_无名管道

1 内存壁垒 进程间天然存在内存壁垒&#xff0c;无法通过交换虚拟地址直接进行数据交换&#xff1a; 每个进程的用户空间都是0~3G-1&#xff08;32位系统&#xff09;&#xff0c;但它们所对应的物理内存却是各自独立的。系统为每个进程的用户空间维护一张专属于该进程的内存映…
阅读更多...
JavaWeb服务器详解和后端分层解耦

JavaWeb服务器详解和后端分层解耦

JavaWeb HTTP协议请求数据格式响应数据格式协议解析 Web服务器请求响应请求参数的接收响应 分层解耦IOC&DI入门IOC详解 HTTP协议 超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则 特点&#xff1a; 基于TCP协议&#xff1a;面向连接&#xff0c;安全 …
阅读更多...
第三方实验室LIMS管理系统源码，asp.net LIMS源码

第三方实验室LIMS管理系统源码，asp.net LIMS源码

LIMS实验室信息管理系统源码 LIMS系统的功能根据实验室的规模和任务而有所不同&#xff0c;其系统主要功能包括:系统维护、基础数据编码管理&#xff0c;样品管理、数据管理、报告管理、报表打印、实验材料管理、设备管理等。它可以取代传统的手工管理模式而给检测实验室带来巨…
阅读更多...
aspera传输方案怎么样，需要选择aspera替代方案吗

aspera传输方案怎么样，需要选择aspera替代方案吗

Aspera传输方案是一种高速、可靠的文件传输解决方案&#xff0c;适用于需要大规模传输大文件或数据集的企业和组织。Aspera采用UDP协议及自己开发的FASP协议进行加速传输&#xff0c;能够在高延迟、高丢包网络环境下实现稳定快速的传输。 Aspera传输方案具有以下优点&#xff1…
阅读更多...
【【带Micro Blaze的 AXI GPIO 控制LED实验】】

【【带Micro Blaze的 AXI GPIO 控制LED实验】】

带Micro Blaze的 AXI GPIO 控制LED实验 AXI GPIO IP 核为 AXI 接口提供了一个通用的输入/输出接口。AXI GPIO 是一个软核&#xff08;Soft IP&#xff09;&#xff0c;是由用户通过配置芯片的逻辑资源来实现的一个功能模块。 实验任务 &#xff1a; 本章的实验任务是通过调用…
阅读更多...
颠覆性语音识别：单词级时间戳和说话人分离

颠覆性语音识别：单词级时间戳和说话人分离

vbenjs/vue-vben-admin[1] Stars: 19.7k License: MIT Vue Vben Admin 是一个免费开源的中后台模板&#xff0c;使用最新的 vue3、vite4 和 TypeScript 等主流技术进行开发。该项目提供了现成的中后台前端解决方案&#xff0c;并可用于学习参考。 使用先进的前端技术如 Vue3/…
阅读更多...
11 款顶级的免费 iPhone 数据恢复软件

11 款顶级的免费 iPhone 数据恢复软件

iPhone 拥有巨大的存储容量。您可以在 iPhone 设备上存储图像、文档和视频等数据。有时&#xff0c;您的 iPhone 会发生许多意外事件&#xff0c;例如意外删除&#xff0c;从而导致数据丢失。这里有 11 个最好的免费 iPhone 数据恢复软件&#xff0c;您可以免费下载&#xff0c…
阅读更多...
基于社区电商的Redis缓存架构-用户分享内容的分页列表缓存延迟构建以及异步通知缓存重建

基于社区电商的Redis缓存架构-用户分享内容的分页列表缓存延迟构建以及异步通知缓存重建

分页列表缓存的延迟构建 首先&#xff0c;先来讲一下业务场景&#xff0c;用户会在 APP 中去分享内容&#xff0c;那么假如用户分享的是美食菜谱内容&#xff0c;在用户分享之后&#xff0c;先将这个美食菜谱的内容作为 k-v 进行缓存&#xff0c;但是呢&#xff0c;其实对于用…
阅读更多...
Microsoft Remote Desktop高效、安全、稳定的远程办公解决方案

Microsoft Remote Desktop高效、安全、稳定的远程办公解决方案

在今天的数字化时代&#xff0c;Remote Desktop远程办公已成为许多人的日常生活。无论你是因为工作需要&#xff0c;还是因为在家中需要访问公司服务器&#xff0c;微软远程连接软件都是一个理想的选择。 微软远程连接软件Remote Desktop是一款高效、安全、稳定的远程办公解决…
阅读更多...
Clickhouse Join

Clickhouse Join

ClickHouse中的Hash Join, Parallel Hash Join, Grace Hash Join https://www.cnblogs.com/abclife/p/17579883.html https://clickhouse.com/blog/clickhouse-fully-supports-joins-full-sort-partial-merge-part3 总结 本文描述并比较了ClickHouse中基于内存哈希表的3种连接…
阅读更多...
Nginx基线检查

Nginx基线检查

扩展知识： Nginx主配置文件：/etc/nginx/nginx.conf 这是Nginx的主要配置文件，用于配置全局的设置、HTTP块、事件处理、邮件等内容。 打开并编辑配置文件 vim /etc/nginx/nginx.conf 一、关于禁止显示服务器版本号和操作系统版本信息： 简介： 在错误页面和响应头中显示…
阅读更多...
2024年软考高级信息系统项目管理师备考攻略

2024年软考高级信息系统项目管理师备考攻略

软考高级信息系统项目管理师是一项合格性考试&#xff0c;考试内容相对有限&#xff0c;因此真题的重复率较高。下一次考试与上一次相比&#xff0c;重复率不高&#xff0c;但与之前所有年份的真题相比&#xff0c;重复率较高。在这几次考试中&#xff0c;我认为最重要的是务必…
阅读更多...
SQL Sever 基础知识 - 数据筛选

SQL Sever 基础知识 - 数据筛选

SQL Sever 基础知识 - 四、数据筛选 四、筛选数据第1节 DISTINCT - 去除重复值1.1 SELECT DISTINCT 子句简介1.2 SELECT DISTINCT 示例1.2.1 DISTINCT 一列示例1.2.2 DISTINCT 多列示例 1.2.3 DISTINCT 具有 null 值示例1.2.4 DISTINCT 与 GROUP BY 对比 第2节 WHERE - 过滤查询…
阅读更多...
Linux常用命令----history命令

Linux常用命令----history命令

文章目录 在Linux中&#xff0c;history命令是一个极其有用的工具&#xff0c;它可以帮助用户查看和管理之前执行过的命令历史。这个功能对于快速查找和重用之前的命令特别有帮助。下面&#xff0c;我们将通过一些实例&#xff0c;详细介绍history命令的使用方法。 1. 基本使用…
阅读更多...
【机器视觉技术栈】- 机器视觉基础

【机器视觉技术栈】- 机器视觉基础

1.1 为什么采用机器视觉 人眼与机器视觉对比 人眼机器视觉精确性差&#xff0c;64灰度级&#xff0c;不能分辨小于100微米的目标强&#xff0c;256灰度级&#xff0c;可检测微米级目标速度慢&#xff0c;无法看清间隔小于40毫秒的运动目标快&#xff0c;快门时间可达10微秒适…
阅读更多...
计算机网络HTTP篇

计算机网络HTTP篇

目录 一、HTTP基本概念 二、GET 与 POST 2.1、GET 与 POST 有什么区别&#xff1f; 2.2、GET 和 POST 方法都是安全和幂等的吗&#xff1f; 三、HTTP 缓存 3.1、强制缓存&#xff1a; 3.2、协商缓存 四、HTTP 特性 4.1、HTTP/1.1 4.1.1、HTTP/1.1 的优点 4.1.2、HTT…
阅读更多...
【新品上市】启扬储能管理平板，打造储能管理新模式，助力全场景储能数智化升级！

【新品上市】启扬储能管理平板，打造储能管理新模式，助力全场景储能数智化升级！

随着可再生能源的快速发展&#xff0c;储能技术的应用日益广泛&#xff0c;储能系统成为解决可再生能源波动性和不可控制性的关键环节。储能系统通过实时监测、数据分析、远程控制等智能化功能&#xff0c;实现能量的高效利用和系统的稳定运行。 启扬智能推出 工业级储能管理平…
阅读更多...
Docker 安装部署 Sentinel Dashboard

Docker 安装部署 Sentinel Dashboard

1、下载 jar 包 官方 jar 包下载地址&#xff1a;https://github.com/alibaba/Sentinel/releases 或者点击 链接 直接跳转到下载页 进入链接下载你需要的版本 下载完毕&#xff08;我这里统一放在一个sentinel目录内&#xff09; 2、编写 Dockerfile 文件&#xff08;这里我不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023