Html_Css问答集(12)

99、将上例的0%改为30%,会如何变化?


    none:延迟2秒间无色,3.8秒(0%-30%占1.8秒)前无色,之后变红到5秒绿最后蓝,动画结束时恢复初始(无色)。
    forward:延迟2秒间无色,3.8秒(0%-30%占1.8秒)前无色,之后变红到5秒绿最后蓝,动画结束时保持最后一帧蓝色位于最右终点。
    backward:在延迟2秒间使用0%状态即“无色”,3.8秒(0%-30%占1.8秒)前无色,之后变红到5秒绿最后蓝,动画结束时恢复初始(无色)。
    both:在延迟2秒间使用0%状态即“无色”,3.8秒(0%-30%占1.8秒)前无色,之后变红到5秒绿最后蓝,动画结束时保持最后一帧蓝色位于最右终点。
    
    关键点:
        backward与both延迟期间使用哪个颜色?
        使用0%状态!若无0%,则保持初始状态,直到第一个改变帧(上例为30%)的时间改变状态。
    

100、弹性项目显示时类似inline-block,但为何是块元素?

    块元素(block elements)通常会占据其父容器的整个宽度,并且每个块元素会独占一行。然而,当你将一个容器设置为 display: flex 时,它的子元素(即弹性项目)的行为会发生变化。

    在弹性盒子(Flexbox)中,弹性项目的默认排列方式是沿着主轴(通常是水平轴)从左到右排列,这与 inline-block 元素的排列方式类似。但是,弹性项目并不是 inline-block 元素,它们仍然是块级元素,只是它们的排列方式被弹性容器所控制。

    具体来说,弹性容器的默认主轴方向是水平方向(flex-direction: row),这意味着弹性项目会从左到右排列。如果你希望弹性项目从上到下排列,可以设置 flex-direction: column。
    
    以下是一些关键点:
    块元素:
        默认情况下,块元素会占据其父容器的整个宽度,并且每个块元素会独占一行。
    弹性项目:
        在弹性容器中,弹性项目默认会沿着主轴(水平轴)从左到右排列,即使它们是块级元素。
    inline-block 元素:
        inline-block 元素会像内联元素一样排列在一行中,但它们可以设置宽度和高度。
    
    总结:
        弹性项目在弹性容器中的排列方式是由弹性容器的属性(如 flex-direction)决定的,而不是由它们本身的块级或内联特性决定的。这就是为什么即使弹性项目是块级元素,它们也可以从左到右排列的原因。
        
    测试:
        可将弹性项目的width取消,它仍然不会独占一行,宽度由其内部内容撑开,若没有就只有左右两个border线,若无这个线,就会占着一个“空”位置,
        
        另外可以用开发者工具检查里面的computed,可以看到它的display是block.

内容提示:117-134,187-196就够了

101、align-item,align-content一般不同时使用,为什么,能同时使用吗?

    align-items 用于设置每一行的项目在侧轴(通常是垂直方向)上的对齐方式。常用于设置单行伸缩项目。
    align-content 用于设置当项目换行后的多行在侧轴上的分布和对齐方式。常用于设置多行伸缩项目。
    
    所以上面两个使用场景不同,所以常不同时出现在一个元素中。
    
    在大多数情况下,用 align-items 和 align-content 来达到预期效果时可能会有重叠,但在某些情况下(例如,少量项目且需要特定的对齐和分布),同时使用这两个属性可以实现更精细的控制。例如:

        <style>.container {display: flex;flex-wrap: wrap; /* 允许项目换行 */height: 400px; /* 固定容器高度 */align-items: center;/* 每一行的项目垂直居中对齐 */align-content: space-between;/* 多行项目在垂直方向上均匀分布 */border: 2px solid #000;background-color: lightgray;}.item {width: 100px;height: 50px; /* 各项具有不同的高度 */background-color: lightblue;margin: 10px;display: flex;align-items: center;justify-content: center;}.item2 {height: 80px;}.item3 {height: 100px;}</style><div class="container"><div class="item">1</div><div class="item item2">2</div><div class="item item3">3</div><div class="item">4</div><div class="item item2">5</div><div class="item">6</div></div>    


    
    .container 容器允许项目换行 (flex-wrap: wrap) 且高度固定 (height: 400px)。
    align-items: center; 确保每个项目的内容在自身高度内垂直居中对齐。
    align-content: space-between; 确保当项目不足以填满容器高度时,它们被分布在容器的两端。
    
    这个例子特殊在于:
        当容器内项目只有两行时,align-content: space-between 会将这两个项目推到容器的顶部和底部。
        align-items: center; 独自定义每个项目内部内容的垂直居中(单行)。


102、align-items: baseline是按什么对齐的?


    
    是按文字x的下边沿进行对齐的。有几中情况:
    
    (1)若有多行,按照每个伸缩项目(flex item)的第一行文字的基线来对齐它们。
    (2)没有内容(文字),则按伸缩项目的下边沿对齐。
    (3)若只有图片,则按图片最下沿对齐。
    
    例如:

        <style>.container {width: 600px;height: 400px;background-color: gray;display: flex;flex-flow: row wrap;align-items: baseline;}.box {width: 100px;height: 100px;background-color: skyblue;border: 1px solid black;}.box4 {width: 250px;height: 250px;display: flex;justify-content: center;align-items: center;}</style><div class="container"><div class="box box1">1x</div><div class="box box2"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p><p>Lorem ipsum dolor sit amet.</p></div><div class="box box3"></div><div class="box box4"><img src="./14多列布局/img5.jpg" alt="" /></div></div>


    备注:上面例子为了让img居中,再次使用了伸缩盒子。
          只要是伸缩盒子(box4),它的所有子元素(img),都会块状化,都会按伸缩项目进行排列。


103、父元素用display:flex,子元素用margin:auto就能自动垂直水平居中,为什么?

    简言之:flex有水平与垂直两个方向的轴设置,所以会呈现两个方向的自动居中。
    
    margin: auto; 的行为在不同的布局模式下有不同的解释和限制。

    (1)在常规文档流中,margin: auto; 主要用于水平居中块级元素。这是因为浏览器默认会尝试在左右两边分配相等的外边距来填充剩余空间。但这种自动分配仅限于水平方向,且仅在元素宽度小于其容器宽度时才有效。对于垂直方向,margin: auto; 是不起作用的,因为常规流布局中垂直空间的分配不由外边距控制。

    (2)在 Flexbox 布局中,存在两个轴:主轴和交叉轴。justify-content 控制的是主轴上的对齐方式,而 align-items 控制的是交叉轴上的对齐方式。通过将 justify-content 设置为 center 并将 align-items 设置为 center,可以实现子元素在两个轴上的居中对齐。此时,margin: auto; 在子元素上的应用将确保在主轴方向上的居中,而 align-items 则确保了在交叉轴方向上的居中。

    因此,flex中会呈现两个方向的居中。


104、flex-grow是如何分配空间的?

    当有空余时才按比例分配 到每个盒子上去。
    没有空余(刚好占完)即使有分配比例,也不会分配。
    另外,如果是换行造成的剩余空间,则按当前该行各伸缩项目的比较分配剩余空间

        <style>.outer {width: 600px;height: 600px;background-color: gray;display: flex;flex-flow: row wrap;}.box {width: 150px;height: 100px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;flex-grow: 1;}.box2 {width: 200px;}</style><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div></div>


    解释:
        第一行容纳box1-3,600-(150+200+150)剩余100,按1:1:1分配,故 box1为150+33.3=183.3....第二行只有box4,直接全部分配 给它,即600。
        
        可以看到容纳不下换行后,会对当前行按比较分配剩余的空间。

105、在伸缩盒子规定:

        <style>.outer {width: 600px;height: 800px;background-color: gray;display: flex;flex-flow: row wrap;align-items: flex-start;}.box {width: 200px;height: 200px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;}/* .box1 {height: 400px;} *//* .box5 {height: 300px;} *//* .box3 {align-self: flex-end;} */          </style><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div></div>


    上面有换行时,为什么第二行看似是居中的呢?
    
    在规范中,第二行的排列布局并没有明确规定,若推算的话,应该是紧贴第一行。但各浏览器为了美观,会将第二行放于垂直居中位置,也即上下的空隙相等。
    
    为了进一步说明,取消上面box1和box5的注释,第一行(box1-3)会按最高(box1为400px)计算整个行高(为400px),第二同理会按最高(box4-5中最高box5为300px)为行高。
    800-400=400,剩下的400中第二行占300,故它上下端空隙为(400-300)/2=50。第二行,会按align-items: flex-start;继续对齐,故box4与box5会顶端对齐。
    
    接着上面继续,align-items: flex-start;改为center,则间距有会变化,第一、二行仍然以每行的伸缩项中最高的高度为准。第一行是400px,第二行是300px,剩下的是800-400-300=100,这个分成四份,最上面一份,最下面一份,中间为2份。即,第一行最高项目的顶部距容器顶部顶部为25px,第二行最高项底部距容器底端为25px,两行中的空隙(第一行最高项底端与第二行最高项顶端的距离)是50px,但若对应的项有align-self:flex-start,则会靠近上面50px中的一半处。
    
    
    为了验证设计了一个尺寸,请看下面:

        <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><title>Document</title><style>.outer {width: 650px;height: 800px;background-color: #999;border: 1px solid black;display: flex;flex-flow: row wrap;}.lbox {width: 50px;height: 50px;box-sizing: border-box;border: 1px solid black;display: flex;justify-content: flex-end;align-items: flex-end;}.rightinner {width: 600px;height: 800px;background-color: #ccc;box-sizing: border-box;/* border: 1px solid black; */display: flex;flex-flow: row wrap;align-items: center;}.rbox {width: 200px;height: 200px;box-sizing: border-box;background-color: skyblue;border: 1px solid black;}.rbox1 {height: 400px;}.rbox5 {height: 200px;/* align-self: flex-start; */}.rbox3 {align-self: flex-end;}</style></head><body><div class="outer"><div class="leftinner"><div class="lbox lbox1">50</div><div class="lbox lbox2">100</div><div class="lbox lbox3">150</div><div class="lbox lbox4">200</div><div class="lbox lbox5">250</div><div class="lbox lbox6">300</div><div class="lbox lbox7">350</div><div class="lbox lbox8">400</div><div class="lbox lbox9">450</div><div class="lbox lbox10">500</div><div class="lbox lbox11">550</div><div class="lbox lbox12">600</div><div class="lbox lbox13">650</div><div class="lbox lbox14">700</div><div class="lbox lbox15">750</div><div class="lbox lbox16">800</div></div><div class="rightinner"><div class="rbox rbox1">1</div><div class="rbox rbox2">2</div><div class="rbox rbox3">3</div><div class="rbox rbox4">4</div><div class="rbox rbox5">5</div></div></div></body></html>

    第一行最高rbox1为400px,第二行最高为rbox4为200px(可修改rbox5为150不会改变整个布局),
    进行分配,800-400-200=200,分成四份,rbox1距容器顶端为1份50px,rbox4距容器底端为1份50px,剩下的2份100px为第一行最底端与第二行最顶端的距离。如果此时有单独的align-self,会将这100px再平分。
    将上例的rbox5调整为align-self:flex-start,将会发现rbox3与rbox5会紧顶,汇合在500px高度处。

106、align-self: flex-end;是调整单个项目到侧轴底端吗?

    是的,但不完全正确。
    严格的说:是调整单个项目到“底端”。这个底端是指下面有人阻碍就在阻碍处停止,比如第二行有项目,它会阻碍向下掉,直接靠近第二行有项目处。

        <style>.outer {width: 600px;height: 600px;background-color: gray;display: flex;flex-flow: row wrap;align-items: flex-start;/* align-content: flex-start; */}.inner {width: 200px;height: 200px;background-color: skyblue;box-sizing: border-box;border: 1px solid black;}.inner3 {order: -1;align-self: flex-end;}.inner2 {align-self: flex-end;}.inner5 {height: 220px;}</style><div class="outer"><div class="inner inner1">1</div><div class="inner inner2">2</div><div class="inner inner3">3</div><div class="inner inner4">4</div><!-- <div class="inner inner5">5</div> --></div>


    
    上面容器中inner3排第一位,整行有换行inner4在第二行,故inner3在向下掉时,会被inner4“托住”或阻碍,就会靠近4,即此时第一行向下的底端就是第二行的顶端,inner2也不会掉到最下端,它会靠近第二行。

107、在网页没有内容时,使用:

          body {width: 100%;height: 100%;}


    为什么去检查进有宽度值,但没有高度值?
    
    块级元素(block-level elements)默认情况下会尽可能地扩展以填满其父元素的宽度(除非明确值)。如 <div>, <p>, <section> 等,在没有内容时默认宽度并不会自动变为 0。这些元素通常会有一个默认的宽度,这个宽度基于其父元素的宽度。
    
    但是,对于内联元素(inline elements),如 <span> 或文本,它们的宽度确实是基于它们所包含的内容的宽度。如果一个内联元素没有内容,那么它的宽度确实会是 0,因为没有内容来确定宽度。
    
    对于body元素,自身没有明确时,看包含块<html>元素,而<html>元素的默认尺寸通常就是浏览器的可视区域(viewport)。也即视口。
    
    默认的html也是0,除非内部有内容,如果没有内容,上面如果对html的height用100%它对标的就是视口,视口的高度。这样body就继承,因100%所以使用整个视口高度。
          html,body {
            width: 100%;
            height: 100%;
          }

108、子绝父相,若父元素使用相对定位,但本身无尺寸,会怎么?


    父元素使用相对定位的目的,就是为子元素的变化提供锚定物,若父元素无尺寸,则无法锚定,会继续向上寻找锚定物,找到后再确定当前子元素的变化。例如

        <style>.header {height: 70px;background-color: gray;}.outer {position: relative;/* height: 700px; */}.inner {width: 400px;height: 400px;background-color: rgba(255, 255, 0, 0.3);position: absolute;top: 50%;left: 0;right: 0;bottom: 0;margin: auto;}</style><div class="header">1</div><div class="outer"><div class="inner">2222</div></div>


    由于尽管父元素.outer有相对定位,但.outer 没有实际的高度,.inner 元素就会"穿透"这个没有尺寸的父元素,继续向上寻找下一个可以作为参考的祖先元素。 
    当绝对定位元素找不到已定位的祖先元素时,它实际上是相对于视口进行定位的,而不是严格意义上相对于 <body>。但由于 <body> 通常填满了整个视口,所以在视觉上看起来就像是相对于 <body> 定位的。
    
    所以哪怕没有父元素相对定位,最终都会以视口为锚定物。
    
    注意:
        绝对定位元素会向上查找最近的已定位(position 不为 static)的祖先元素作为其定位参考。如果找不到,则会以初始包含块(initial containing block)为参考,而不是严格意义上的视口。
        初始包含块通常与视口大小相同,但它们并不完全等同。初始包含块是一个概念性的矩形,其尺寸和位置通常与视口一致,但在某些情况下(如使用 transform 属性)可能会有所不同。
        这里用“视口”来代替初始包含块来理解
    
    

109、什么是初始包含块?

    初始包含块(initial containing block)是一个概念性的矩形框,它是在渲染页面时确定布局的基准。初始包含块的尺寸和位置通常与视口(浏览器窗口)的尺寸和位置相匹配,但在某些情况下可能有所不同。
    
    比如常用的版心,通常它就是初始包含块,而视口(整个网页)通常都比版心大。

    初始包含块具有以下特点:
        - 它是所有元素的根容器,是页面的最外层容器。
        - 它的尺寸通常由视口的大小决定,但也受到一些 CSS 属性的影响,比如 transform 属性可以改变初始包含块的尺寸和位置。
        - 对于根元素(<html> 元素),初始包含块的左上角是文档流的起点。
        - 它是页面中所有固定定位(position: fixed)元素的定位参考。
        - 绝对定位元素在没有已定位祖先元素时,会相对于初始包含块进行定位。

    注意:
        初始包含块并不是一个实际存在的元素或容器,而是一个概念上的概念,用于确定页面元素的布局和定位。    
    

    
110、background-image: linear-gradient(red, yellow, green);背景图为什么是背景色呢?


 
    在 CSS 的早期版本中,background-image 属性主要用于加载并显示图像文件(如 .jpg, .png, .gif 等),这要求服务器上必须有相应的图像资源,并且在页面加载时需要下载这些图像。
    
    随着 CSS3 的引入,有了更多创建复杂视觉效果的方式,而不必依赖于预加载的图像文件。CSS3 引入了 linear-gradient, radial-gradient, 和 conic-gradient 这样的渐变类型,它们允许开发者直接在 CSS 中定义背景图案,通过颜色和透明度的动态变化来生成这些图案。

    使用这些渐变,你可以创建出类似图像的效果,但它们实际上是基于矢量的,这意味着它们可以无限放大而不失真,同时也不需要额外的网络请求来加载图像文件,从而提高了网页的加载速度和性能。此外,渐变背景还可以轻松地适应不同的屏幕尺寸和设备,使得响应式设计更加灵活。


111、@media all有什么用?

    @media all 在技术上是冗余的,有时你仍然可能看到它被使用,原因有以下几点:

        明确性:
            使用 @media all 可以明确表明这一组样式是适用于所有设备的,这在阅读和维护代码时提供了清晰性。
        优先级:
            媒体查询具有较高的CSS优先级,这意味着在同一个选择器中,位于媒体查询内的样式可能会覆盖位于媒体查询外的相同属性的样式。
        组合使用:
            当你需要同时使用多个媒体查询时,将通用样式放在 @media all 下面,可以使结构更清晰,也便于将特定于设备的样式添加到其他媒体查询中。
        兼容性:
            尽管现代浏览器默认会应用没有媒体查询的样式,但在某些旧版或非标准浏览器中,明确使用 @media all 可能有助于确保样式正确应用。
    
    因此,虽然从技术角度讲,@media all 不是必需的,但在实践中,它可以帮助保持CSS代码的组织性和兼容性,尤其是在处理复杂项目时。例如,一个常见的模式是在 @media all 中放置基础样式,然后在特定的媒体查询中添加响应式设计规则。    


112、一个元素浮动后清除浮动后,为什么仍然可能不被父元素内容?

例如:

        <style>.outer {width: 400px;/* height: 300px; */background-color: gray;border: 1px solid black;/* float: left; */}.box {width: 100px;height: 100px;background-color: skyblue;font-size: 30px;box-sizing: border-box;border: 1px solid black;margin: 10px;}.box1,.box2,.box3 {float: left;}.box3 {clear: both;}</style><div class="outer"><div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div></div>

    尽管对已经浮动的元素进行清除浮动影响,但它仍然一个浮动元素,仍然脱离正常的文档流,它只是清除浮动元素对后续元素布局造成的影响,上面box3清除前面浮动元素对自己的影响(不清除则会尾随在box2的后面)。
    
    注意:
        box3尽管清除了前面对自己的影响,但自己浮动的特征没有改变,它仍然是一个浮动元素,仍然脱离文档流。
        box3会遵守清除浮动的规则,垂直位置不受之前浮动元素影响。
        但作为浮动元素,它仍然不会影响其后续元素的正常文档流布局。
        它也不会撑开父元素的高度(除非父元素采用了清除浮动的技巧)。
    
    如果父元素outer开启左浮动,则会创建BFC,它将包含其内部的所有浮动子元素,确保它们不会溢出到外部元素的范围之外。因此所有box将会被outer容纳。
    
    

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

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

相关文章

leetcode刷题总结——字符串匹配

KMP&#xff08;字符串匹配算法&#xff09; 主串或目标串&#xff1a;比较长的&#xff0c;我们就是在它里面寻找子串是否存在&#xff1b; 子串或模式串&#xff1a;比较短的。 前缀&#xff1a;字符串A和B&#xff0c;A BS&#xff0c;S非空&#xff0c;则B为A的前缀。 …

婚礼成本与筹备策略:一场梦幻婚礼的理性规划

婚礼成本与筹备策略&#xff1a;一场梦幻婚礼的理性规划 摘要 婚礼&#xff0c;作为人生中的重要仪式&#xff0c;承载着新人的爱情与梦想&#xff0c;同时也伴随着不菲的经济投入。本文旨在探讨婚礼所需的大致成本、影响成本的主要因素以及婚礼筹备过程中的关键注意事项&…

【Java--数据结构】二叉树

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 树结构 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合 注意&#xff1a;树形结构中&#xff0c;子…

Transformer模型在多任务学习中的革新应用

在深度学习领域&#xff0c;多任务学习&#xff08;Multi-task Learning, MTL&#xff09;是一种训练模型以同时执行多个任务的方法。这种方法可以提高模型的泛化能力&#xff0c;因为它允许模型在不同任务之间共享知识。近年来&#xff0c;Transformer模型因其在自然语言处理&…

【linux高级IO(三)】初识epoll

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:Linux从入门到精通⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学更多操作系统知识   &#x1f51d;&#x1f51d; Linux高级IO 1. 前言2. 初识e…

STM32 HRTIM生成PWM时遇到无法输出PWM脉冲波形问题

在使用HRTIM生成PWM时&#xff0c;当把周期寄存器更新的设置放到while循环中时&#xff0c;无法输出PWM脉冲波形&#xff0c;即使增加计数延时也无法输出&#xff0c;最终只能放到中断函数中执行后期寄存器值更新才能够生成PWM脉冲波形。

主流大数据调度工具DolphinScheduler之数据ETL流程

今天给大家分享主流大数据调度工具DolphinScheduler&#xff0c;以及数据的ETL流程。 一&#xff1a;调度工具DS 主流大数据调度工具DolphinScheduler&#xff0c; 其定位&#xff1a;解决数据处理流程中错综复杂的依赖关系 任务支持类型&#xff1a;支持传统的shell任务&a…

Python学习4---迭代器和生成器的区别

一、迭代器 定义&#xff1a;迭代器是一个可以记住遍历的位置的对象。迭代器对象必须实现两个方法&#xff0c;iter() 和 next()。字符串、列表或元组等数据类型都是可迭代对象&#xff0c;但它们不是迭代器&#xff0c;因为它们不具有 next() 方法。迭代器对象用于遍历可迭代对…

冷却塔由那些配件组成

1、淋水填料 将需要冷却的水&#xff08;热水&#xff09;多次溅洒成水滴或形成水膜&#xff0c;以增加水和空气的接触面积和时间&#xff0c;促进水和空气的热交换。 填料在开式横流冷却塔的作用是增加循环水与空气的接触面积&#xff0c;并延长冷却水停留在空气中的时间&am…

LabVIEW工业设备姿态监测系统

开发了一种基于LabVIEW的工业设备姿态监测系统&#xff0c;针对现有监测设备在适应性和反应时间上的不足&#xff0c;采用了LabVIEW软件和STM32微控制器&#xff0c;通过高精度姿态传感器实现了对设备姿态的快速准确监测&#xff0c;大大提高了工业作业的安全与效率。 项目背景…

C++深度解析教程笔记9-静态成员变量,静态成员函数,二阶构造,友元,函数重载,操作符重载

C深度解析教程笔记9 第25课 - 类的静态成员变量实验-数对象个数&#xff08;失败&#xff09;实验-静态变量小结 第26课 - 类的静态成员函数实验-修改对象的静态变量数值实验-利用静态成员函数实验-静态变量静态函数实现统计对象个数小结 第27课 - 二阶构造模式实验-初始化是否…

百度人脸识别Windows C++离线sdk C#接入

百度人脸识别Windows C离线sdk C#接入 目录 说明 设计背景 • 场景特点&#xff1a; • 客户特点&#xff1a; • 核心需求&#xff1a; SDK 包结构 效果 代码 说明 自己根据SDK封装了动态库&#xff0c;然后C#调用。 功能接口 设计背景 • 场景特点&#xff1a; -…

【渗透入门】XSS

文章目录 XSS漏洞XSS举例XSS类型防御方式 XSS漏洞 XSS&#xff08;Cross-Site Scripting&#xff0c;跨站脚本攻击&#xff09;是一种常见的Web应用程序安全漏洞。XSS漏洞发生在应用程序未能充分过滤用户提供的数据&#xff0c;使得恶意脚本得以在不知情的用户的浏览器中被执行…

ARFoundation系列讲解 - 91 Immersal 简介

一、Immersal 简介 Immersal是一家专注于增强现实(AR)技术的公司,致力于开发和推广空间感知解决方案(简称:大空间技术)。他们的核心产品是一个名为Immersal SDK的开发工具包,通过视觉定位(VPS)能够轻松地在现实世界中实现高精度的定位和增强现实体验。 二、Immersal …

Spring Boot集成Knife4j:实现高效API文档管理

Spring Boot集成Knife4j&#xff1a;实现高效API文档管理 在软件开发过程中&#xff0c;编写和维护接口文档是一项必不可少的任务。随着微服务架构的流行&#xff0c;API文档的重要性日益凸显。然而&#xff0c;传统的手动编写文档方式不仅效率低下&#xff0c;而且容易出错。…

支持前端路由权限和后端接口权限的企业管理系统模版

一、技术栈 前端&#xff1a;iview-admin vue 后端&#xff1a;springboot shiro 二、基于角色的权限控制 1、路由权限 即不同角色的路由访问控制 2、菜单权限 即不同角色的菜单列表展示 3、按钮权限 即不同角色的按钮展示 4、接口权限 即不同角色的接口访问控制 三…

数字化时代的生产革新:数字孪生平台如何助力新质生产力

一.新质生产力 在当今快速发展的科技和信息时代&#xff0c;企业和组织在提高生产效率和质量方面面临着越来越多的挑战和机遇。新质生产力的概念应运而生&#xff0c;强调通过创新和技术进步&#xff0c;不仅提升生产的数量和速度&#xff0c;更重要的是优化生产方式、改善产品…

leetcode热题100.分割等和子集(动态规划)

分割等和子集 Problem: 416. 分割等和子集 思路 我选择使用动态规划的方法来解题。我们需要判断是否可以将数组分割成两个子集&#xff0c;使得这两个子集的和相等。这个问题可以转化为在数组中找到一个子集&#xff0c;使得其和等于数组总和的一半。 解题过程 首先&#xf…

消息队列-RocketMQ

消息队列-RocketMQ 1、RocketMQ是什么?2、RocketMQ有什么优缺点?3、消息队列主要有哪几种消息模型?4、RocketMQ主要使用哪种消息模型?5、RocketMQ的基本架构是怎样的?有哪些核心组件?6、RocketMQ通过什么方式保证消息的可用性和可靠性?7、什么情况下会发生消息丢失?Roc…

设计模式大白话之装饰者模式

想象一下&#xff0c;你走进一家咖啡馆&#xff0c;点了一杯美式咖啡。但是&#xff0c;你可能还想根据自己的口味添加一些东西&#xff0c;比如奶泡、巧克力粉、焦糖酱或是肉桂粉。每次你添加一种配料&#xff0c;你的咖啡就会变得更丰富&#xff0c;同时价格也会相应增加。 在…