周报：css相关扩展知识

目录

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<objectwidth="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.mzph.cn/news/187357.shtml

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

相关文章

Linux自启服务提示：systemd[1]: *.service: main process exited, code=exited, status=1问题

Linux自启服务提示：systemd[1]: *.service: main process exited, code=exited, status=1问题

这两天一直在沉迷于配脚本&#xff0c;由于服务器很多&#xff0c;所以我都是从一台服务器上配置好的脚本直接copy到另一台服务器&#xff0c;按说完全一样的脚本一样的操作&#xff0c;那么应该是一样的执行结果 but, Gul’dan&#xff0c;代…我重启服务器后服务并没有正常启…
阅读更多...
2000-2021年各省人口密度数据

2000-2021年各省人口密度数据

2000-2021年各省人口密度数据 1、时间&#xff1a;2000-2021年 2、指标&#xff1a;地区、年份、年末常住总人口(万人&#xff09;、面积&#xff08;平方千米&#xff09;、人口密度&#xff08;人/平方千米&#xff09; 3、来源&#xff1a;各省年鉴、统计年鉴、各省统计局…
阅读更多...
如何动态获取当前执行的Python脚本名？

如何动态获取当前执行的Python脚本名？

文章目录 1、情景描述2、如何获取调用者脚本名&#xff1f;3、sys._getframe()总结 1、情景描述 当我们在使用Python进行一些操作时&#xff0c;如果我们希望我们封装的模块里的方法能够在给使用者调用的同时可以获取到调用者当前正在执行的Python脚本名&#xff0c;以做一些后…
阅读更多...
门户网站二级等保评测问题，服务器漏洞问题解决办法

门户网站二级等保评测问题，服务器漏洞问题解决办法

二级等保查出来的服务器问题 操作前可在自己服务器测试一下&#xff0c;看看有没有用 1.服务器定时更换密码 永久&#xff08;需重启&#xff09; vim /etc/login.defs PASS_MAX_DAYS 90 # 密码最长过期天数 PASS_MIN_DAYS 0 # 密码最小过期天数 PASS_MIN_LEN 10 # 密码…
阅读更多...
Conda 安装Jupyter：使用Pyhive（Kerberos）

Conda 安装Jupyter：使用Pyhive（Kerberos）

安装基本环境 conda create -n bigdata python3.10 conda activate bigdata conda install -y pandas numpy pyhive yum install gcc-c python-devel.x86_64 cyrus-sasl-devel.x86_64 pip install sasl Jupyter Notebook 安装jupyter notebook配置自动提示 conda insta…
阅读更多...
JavaScript中的时间日期函数new Date()（JS中5种获取时间戳的函数）

JavaScript中的时间日期函数new Date()（JS中5种获取时间戳的函数）

简介&#xff1a;JavaScript 中的 new Date() 方法用于创建一个新的 Date 对象&#xff0c;该对象表示当前日期和时间。Date 对象提供了许多方法和属性&#xff0c;可以用于获取和设置日期和时间信息。 new Date([year, month, day, hour, minute, second, millisecond]) 其中…
阅读更多...
重生奇迹mu武器镶嵌顺序

重生奇迹mu武器镶嵌顺序

一、武器的镶嵌顺序&#xff1a; 雷冰火30%概率出现技能11 从上到下的镶嵌顺寻按照雷、冰、火镶嵌&#xff0c;就有30%的概率出现技能攻击力加11的幸运荧光属性。 从上到下的镶嵌顺寻按照火、冰、雷镶嵌&#xff0c;就有30%的概率出现攻击力加11的幸运荧光属性。 例如&…
阅读更多...
【图像拼接（Image Stitching）】关于【图像拼接论文精读】专栏的相关说明，包含专栏使用说明、创新思路分享等（不定期更新）

【图像拼接（Image Stitching）】关于【图像拼接论文精读】专栏的相关说明，包含专栏使用说明、创新思路分享等（不定期更新）

文章目录 前言专栏简介适用人群使用方法阅读顺序潜在的创新方向【图像拼接论文精读】专栏文章目录 前言 为什么会有这篇文章&#xff1f; 因为专栏简介里写不下太多东西&#xff0c;只能通过这篇文章和大家交流&#xff0c;算是一个专栏阅读指南吧。 说点心里话 本来吧&…
阅读更多...
Hi-Net：用于多模态MR图像合成的混合融合网络

Hi-Net：用于多模态MR图像合成的混合融合网络

Hi-Net: Hybrid-Fusion Network for Multi-Modal MR Image Synthesis Hi-Net&#xff1a;用于多模态MR图像合成的混合融合网络背景贡献实验方法the modality-specific network&#xff08;模态特定网络&#xff09;multi-modal fusion networkmulti-modal synthesis network 损…
阅读更多...
TQ2440开发板-LED全亮全灭控制程序设计

TQ2440开发板-LED全亮全灭控制程序设计

目录 什么是GPIOS3C2440的GPIO访问和控制方式&#xff1a;3种寄存器 TQ2440的LED灯底板原理图---LED测试部分核心板原理图----GPIO部分 LED控制---设计思想整体代码 && 代码研读配置GPIO端口为输出模式控制LED的全亮和全灭 真就是从零学起。 什么是GPIO GPIO&#xff…
阅读更多...
Vue3+ElementPlus，image动态更新src

Vue3+ElementPlus，image动态更新src

我想通过点击图片动态更新src&#xff0c;代码如下&#xff1a; <el-image style"width: 100px; height: 30px" :src"ImageUrl" click"refresh" :fit"fit" /> const ImageUrl reactive(http://localhost:9001/getImage)const…
阅读更多...
20个Python源码项目下载

20个Python源码项目下载

20个很不错的Python项目源码&#xff0c;其中包括适合毕业设计的项目。这些资源中涵盖了Django 3版本的项目&#xff1a; DjangoMysqlBulma实现的商场管理系统源码 PythonDjango实现基于人脸识别的门禁管理系统 PythonFlaskMySQL实现的学生培养计划管理系统 Python大熊猫主题人…
阅读更多...
使用yolov7进行多图像视频识别

使用yolov7进行多图像视频识别

1.yolov7你可以让你简单的部署,比起前几代来说特别简单 #下面是我转换老友记的测试视频,可以看到几乎可以准确预测 2.步骤 1.在github官网下载代码 https://github.com/WongKinYiu/yolov7 2.点击下载权重文件放到项目中 3.安装依赖,我的python版本是3.6的 pip install -r requ…
阅读更多...
Java8 之 Optional 详解

Java8 之 Optional 详解

目录 一. 前言 二. Optional 用法 2.1. 概要 2.2. 创建 Optional 对象 2.3. 获取 Optional 对象的值 2.4. 检查 Optional 对象是否为空 2.5. 安全访问 Optional 对象的值 2.6. 处理过滤操作 2.7. 处理转换操作 2.8. 使用默认值 三. Optional 使用场景 3.1. 空判断 …
阅读更多...
RPC与HTTP的详细比较

RPC与HTTP的详细比较

RPC 示例&#xff08;使用 gRPC&#xff09; 在这个例子中&#xff0c;我们使用 gRPC&#xff08;一个流行的 RPC 框架&#xff09;来演示 RPC 的基本用法。我们创建一个简单的计算器服务&#xff0c;客户端可以调用服务器上的加法操作。 服务定义 - Calculator.proto&#x…
阅读更多...
深度解析 Dockerfile：构建可重复、可扩展的Docker镜像

深度解析 Dockerfile：构建可重复、可扩展的Docker镜像

文章目录 什么是Dockerfile&#xff1f;Dockerfile的基本结构常用Dockerfile指令解析1. FROM2. LABEL3. WORKDIR4. COPY5. RUN6. EXPOSE7. ENV8. CMD 构建可重复、可扩展的Docker镜像1. 指定基础镜像的版本2. 合理使用缓存3. 精简镜像4. 使用多阶段构建 总结 &#x1f388;个人…
阅读更多...
提升网页交互体验的秘密武器——防抖和节流

提升网页交互体验的秘密武器——防抖和节流

说在前面 在现代Web开发中&#xff0c;提高网页性能是至关重要的。本文介绍了防抖和节流这两种常用的性能优化技术&#xff0c;通过控制函数的执行频率&#xff0c;有效减少不必要的计算和网络请求&#xff0c;从而提升用户体验和页面加载速度。 函数节流 节流是指限制一个函数…
阅读更多...
【分享】centos7vim异常

【分享】centos7vim异常

问题描述: 虚拟机安装centos7&#xff0c;安装vim后异常&#xff0c;上下左右键会变成abcd,退格键无法删除。 系统版本: CentOS Linux release 7.5.1804 (Core) 原因: 暂时未知&#xff0c;有可能是vim安装时&#xff0c;一个组件未安装导致。后续追溯 解决方案: echo &quo…
阅读更多...
nginx之rewrite

nginx之rewrite

rewrite rewrite 作用是地址重定向&#xff0c;语法&#xff1a;rewrite regex replacement[flag]; 根据 regex&#xff08;正则表达式&#xff09;匹配请求地址&#xff0c;然后跳转到 replacement&#xff0c;结尾是flag标记 如下例子&#xff0c;请求地址是 http://192.168.…
阅读更多...
异常 Exception 练习题 （未完成）

异常 Exception 练习题 （未完成）

异常 Exception 练习题 try-catch异常处理1234 异常1&#xff08;没有自己写&#xff09;234 try-catch异常处理 1 class Exception01 {public static int method() {try {String[] names new String[3];//String[]数组if (names[1].equals("tom")) {//NullPointe…
阅读更多...
最新文章

Copyright @ 2022~2023