面试题CSS篇（一）

news2024/12/26 13:55:37

目录

一、flex布局

1、基本概念

2、容器属性

（1）flex-direction

决定主轴的方向（即项目的排列方向）

（2） flex-wrap

（3）flex-flow

（4）justify-content

（5）align-items

（6）align-content

3、项目属性

（1） order

（2） flex-grow

（3）flex-shrink

（4） flex-basis

（5） flex

（6） align-self

二、grid布局

3、 Grid 布局的属性

（1）容器属性

flex布局和grid布局的区别

三、盒子模型

四、css如何设置两种盒模型

五、BFC（块级格式化上下文|边距重叠解决方案）

1、定义

2、渲染规则、布局规则

3、CSS在什么情况下会创建出BFC（即脱离文档流）

4、作用、使用场景

六、IFC（行内格式化上下文）

渲染规则、布局规则

七、清除浮动

1、为什么要清除浮动

2、4种方法

八、css优先级问题

九、css 变量

十、浏览器是怎样解析CSS选择器的

十一、padding , margin 百分比单位

十二、css：inline-block 和 div 之间出现空隙的原因及解决

1、原因

2、解决方法

一、flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。

1、基本概念

  • 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
  • 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
  • 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2、容器属性

（1）flex-direction

决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

（2） flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

（3）flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

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

（4）justify-content

定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}


flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

（5）align-items

定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

（6）align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

3、项目属性

（1） order

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

.item {
  order: <integer>;
}

（2） flex-grow

 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

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

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

（3）flex-shrink

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

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

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

负值对该属性无效。

（4） flex-basis

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

.item {
  flex-basis: <length> | auto; /* default auto */
}
可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

（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)。

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

（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属性完全一致。

 来源：Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

二、grid布局

网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，现在浏览器内置了。

1、基本概念

（1）容器和项目

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

最外层的<div>元素就是容器，内层的三个<div>元素就是项目。

注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。
Grid 布局只对项目生效。

（2）行和列

容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）

（3） 单元格

行和列的交叉区域，称为"单元格"（cell）。

（4） 网格线

划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。

3、 Grid 布局的属性

Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。

（1）容器属性

display 属性

块级元素
div {
  display: grid;
}

行内元素
div {
  display: inline-grid;
}

为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

grid-template-columns 属性，grid-template-rows 属性

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;  // 有几行就写几个高
  grid-template-rows: 100px 100px 100px;   // 有几列就写几个宽
}

除了使用绝对单位，也可以使用百分比
.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;  // 有几行就写几个高
  grid-template-rows: 33.33% 33.33% 33.33%;   // 有几列就写几个宽
}

repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用repeat()函数，简化重复的值。repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}


repeat()重复某种模式也是可以的
grid-template-columns: repeat(2, 100px 20px 80px);
上面代码定义了6列，第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px

auto-fill 关键字

单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}
上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。

fr 关键字

为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
上面代码表示两个相同宽度的列。


fr可以与绝对长度的单位结合使用，这时会非常方便。
.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}
上面代码表示，第一列的宽度为150像素，第二列的宽度是第三列的一半。

minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
minmax(100px, 1fr)表示列宽不小于100px，不大于1fr

auto 关键字

auto关键字表示由浏览器自己决定长度。

grid-template-columns: 100px auto 100px;

上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。

网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
上面代码指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字。

网格布局允许同一根线有多个名字，比如[fifth-line row-5]。

布局实例

grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。

.wrapper {
  display: grid;
  grid-template-columns: 70% 30%;
}
上面代码将左边栏设为70%，右边栏设为30%。



传统的十二网格布局，写起来也很容易：
grid-template-columns: repeat(12, 1fr);

属性太多...懒得写了CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)

flex布局和grid布局的区别

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

  • Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
  • Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

三、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。
CSS盒模型=标准模型 + IE模型

四、css如何设置两种盒模型

标准：box-sizing: content-box; ( 浏览器默认设置 )
IE： box-sizing: border-box;

五、BFC（块级格式化上下文|边距重叠解决方案）

1、定义

  • BFC 是 CSS 布局的一个概念，是一块独立的渲染区域，是一个环境，里面的元素不会影响到外部的元素 。父子元素和兄弟元素边距重叠，重叠原则取最大值。空元素的边距重叠是取 margin 与 padding 的最大值。

2、渲染规则、布局规则

  • 内部的 Box 会在垂直方向，从顶部开始一个接着一个地放置；
  • Box 垂直方向的距离由 margin (外边距)决定，属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠；
  • 每个元素的 margin Box 的左边， 与包含块 border Box 的左边相接触，（对于从左到右的格式化，否则相反）。即使存在浮动也是如此；
  • BFC 在页面上是一个隔离的独立容器，外面的元素不会影响里面的元素，反之亦然。文字环绕效果，设置 float；
  • BFC 的区域不会与 float Box 重叠（清浮动）;
  • 计算 BFC 的高度时，浮动元素也参与计算。

3、CSS在什么情况下会创建出BFC（即脱离文档流）

  • 根元素，即 HTML 元素（最大的一个 BFC）
  • 浮动（ float 的值不为 none ）
  • 绝对定位元素（ position 的值为 absolute 或 fixed ）
  • ​行内块（ display 为 inline-block ）
  • ​表格单元（ display 为 table、table-cell、table-caption、inline-block 等 HTML 表格相关的属性 )
  • ​弹性盒（ display 为 flex 或 inline-flex ）
  • ​默认值。内容不会被修剪，会呈现在元素框之外（overflow 不为 visible）

4、作用、使用场景

  • 自适应两（三）栏布局（避免多列布局由于宽度计算四舍五入而自动换行）：有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况，可以在最后一 列触发BFC的形式来阻止换行的发生。
  • 避免元素被浮动元素覆盖：一个正常文档流的block元素可能被一个float元素覆盖，挤占正常文档流，因此可以设置一个元素的float、 display、position值等方式触发BFC，以阻止被浮动盒子覆盖。
  • 可以让父元素的高度包含子浮动元素，清除内部浮动（原理：触发父 div 的 BFC 属性，使下面的子 div 都处在父 div的同一个 BFC 区域之内）
  • ​去除边距重叠现象，分属于不同的 BFC 时，可以阻止 margin 重叠（阻止相邻元素的margin合并）：属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平 margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。

六、IFC（行内格式化上下文）

渲染规则、布局规则

  • 内部的 Box 会在水平方向，从含块的顶部开始一个接着一个地放置；

  • ​这些 Box 之间的水平方向的 margin，border 和padding 都有效；

  • ​Box 垂直对齐方式：以它们的底部、顶部对齐，或以它们里面的文本的基线（baseline）对齐（默认， 文本与图片对其），例：line-heigth 与 vertical-align

七、清除浮动

1、为什么要清除浮动

浮动元素是css中最常用的属性，浮动起来的元素会脱离标准流，如果我们的父级盒子没有设置高度，在子级盒子有高度但没有设置浮动前，子级盒子会将父级盒子的高度撑开，父级盒子的高度就是子级盒子高度的和，而子级盒子设置了高度并设置了浮动，子级盒子就会脱离文档流，就会造成父级盒子的高度塌陷，父级盒子失去子级盒子的支撑所以没有高度。

为了使盒子正常展示，需要将浮动的子级盒子重新塞回父级盒子，也就是清除浮动

2、4种方法

（1）给父级盒子添加高度

（2）额外标签法：在设置了浮动的元素的末尾添加一个空的标签。给这个标签设置 clear: both;属性，注意这个标签必须是块级元素

      .clear {
        clear: both;
      }
clear：both的作用是不允许周围有浮动现象，所以就可以达到清除浮动的效果，但是这样做，对于比较复杂的页面就显得结构非常的乱，所以不推荐使用

（3）给父级添加overflow：hidden属性

原理：BFC

如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。也就是说独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，这样就达到了清除浮动的效果，但是overflow:hidden本身的意思是溢出的元素隐藏显示，所以说有一定的缺点

（4）给父级添加after伪元素

原理和额外标签法的方式异曲同工，只是利用伪类向浮动元素的父盒子的后面添加了一个块级元素

	.clearfix::after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
      }

八、css优先级问题

  • 第一等：!important 的作用是提升优先级，换句话说，加了这句的样式的优先级是最高的
  • 第二等：代表内联样式，如: style=””，权值为1000。
  • 第三等：代表ID选择器，如：#content，权值为0100。
  • 第四等：代表类，伪类和属性选择器，如.content，权值为0010。
  • 第五等：代表类型选择器和伪元素选择器，如div p，权值为0001。
  • 第六等：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
  • 继承的样式没有权值。
     

九、css 变量

使用--开头定义变量，用var()去使用

十、浏览器是怎样解析CSS选择器的

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。而在 CSS解析完毕后,需要将解析的结果与DOM Tree的内容-起进行分析建立-棵Render Tree，最终用来进行绘图。在建立Render Tree时(WebKit 中的「Attachment」过程)， 浏览器就要为每个DOM Tree中的元素根据CSS的解析结果(Style Rules)来确定生成怎样的Render Tree。
 

十一、padding , margin 百分比单位

依据在CSS 盒模型中，依据CSS2.2文档，margin与padding的百分比指定值时，一律参考包含盒的宽度

十二、css：inline-block 和 div 之间出现空隙的原因及解决

1、原因

display:inline-block布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一 行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行 符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙，那是正常的，应该的。如果没有空格与间隙才是不正常的（IE6/7 block水平元素）。

2、解决方法

  • img的display属性写成block
  • div的font-size:0
  • img的vertical-align
img{vertical-align:buttom}
img{vertical-align:middle}
img{vertical-align:top}
  • 移除标签间的空格

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

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

相关文章

【ECNU】3633. 双人旋转赛车（C++）

【ECNU】3633. 双人旋转赛车（C++）

目录 题目 输入格式 输出格式 样例 提示 思路 代码 题目 单点时限: 2.0 sec 内存限制: 1024 MB oxx 和 Xiejiadong 在玩一个双人旋转赛车的小游戏。 他们将进行一些比赛。每局比赛必须按顺序进行&#xff0c;胜者会得到该局对应的分数 xi。 由于 oxx 技艺不精&#…
阅读更多...
PMP®考试抽中审查提供的材料

PMP®考试抽中审查提供的材料

PMP审查流程&#xff1a;属于第一类的申请者&#xff08;学士学位或同等学位及以上&#xff09;1&#xff0e; 核实学士学位或同等学位2&#xff0e; 核实项目管理经验3&#xff0e; 核实35小时的项目管理教育属于第二类的申请者&#xff08;高中、大专或同等学历&#xff09;1…
阅读更多...
解决httprunner3.x上$符号无法当成普通符号用的方法

解决httprunner3.x上$符号无法当成普通符号用的方法

前言 由于要测试的api中会涉及$符号的传递, 要求其放在参数中当一个普通符号使用, 但由于httprunner框架处理逻辑, 会将如$coe当成一个变量, 从而报错找不到该变量的值 现象 接口某参数为: coeConfig$coal$08d99cca03a84d1d9e9a49b4534bb598运行时框架会抛出异常: 分析 研读框…
阅读更多...
iphone系统崩溃数据能恢复吗?教你三招方法

iphone系统崩溃数据能恢复吗?教你三招方法

最近有些苹果用户反应自己手机的屏幕无法滑动&#xff0c;桌面上APP也无法点开&#xff0c;想要关机重启下试试&#xff0c;可是&#xff0c;连关机都关不了&#xff0c;甚至连Siri都罢工了。苹果手机系统崩溃&#xff0c;出现黑屏、白屏、无限重启之类的故障&#xff0c;导致手…
阅读更多...
rtthread 线程

rtthread 线程

创建动态线程最简单代码 #include <rtthread.h>//包含头文件static rt_thread_t thread1 RT_NULL; //创建线程控制块指针&#xff0c;指向空static void thread1_entry(void *parameter)//线程入口&#xff08;干什么&#xff09; {rt_kprintf("do something"…
阅读更多...
ChatGPT 爆火，社交应用如何 Get 新技能

ChatGPT 爆火，社交应用如何 Get 新技能

风浪越大&#xff0c;鱼越贵。关注【融云全球互联网通信云】了解更多 现在&#xff0c;最大的浪无疑属于 ChatGPT&#xff0c;一款以对话方式进行交互的语言模型。 通过创新业务打下江山的商业传奇们&#xff0c;都怕跟丢了这波浪潮而成为“上一代人”。所以&#xff0c;我们…
阅读更多...
[文件操作] File 类的用法和 InputStream, OutputStream 的用法

[文件操作] File 类的用法和 InputStream, OutputStream 的用法

能吃是不是件幸福的事呢 文章目录前言1. 文件的相关定义2. 文件类型3. Java对文件系统的操作3.1 对文件的基础操作3.2 读文件3.3 写文件前言 从这章开始,我们就开始学文件操作相关的知识了~ 1. 文件的相关定义 1.文件的定义可以从狭义和广义两个方面解释. 狭义: 指硬盘上的文…
阅读更多...
Redis学习笔记：缓存运用常见问题

Redis学习笔记：缓存运用常见问题

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育 目录1、数据一致性的问题1.1、新增数据一致性的问题1.2、修改/删除一致性问题1.2.1、操作分析1.2.1、总结和再深入2、缓存穿透&#xff0c;缓存击穿和缓存雪崩2.1、缓存穿透&#xff08;查不到&#xff09;2.1.1、…
阅读更多...
从功能到自动化，熬夜3天整理出这一份2000字学习指南~

从功能到自动化，熬夜3天整理出这一份2000字学习指南~

学习自动化这个想法&#xff0c;其实自己在心里已经琢磨了很久&#xff0c;就是一直没付诸实践&#xff0c;觉得现在手工测试已经能满足当前的工作需要&#xff0c;不想浪费时间去学习新的东西&#xff0c;有点时间还不如刷刷视频、看看小说等。 第一次有学习Selenium的冲动是…
阅读更多...
【Bio】碳水化合物 carbohydrate 和糖蛋白 glycoprotein

【Bio】碳水化合物 carbohydrate 和糖蛋白 glycoprotein

文章目录碳水化合物 carbohydrate单糖 monosaccharides戊糖 pentose己糖 hexose双糖 disaccharide寡糖 oligosaccharide 和多糖 polysaccharide糖蛋白 glycoproteinRef碳水化合物 carbohydrate 碳水化合物 (carbohydrate)&#xff0c;也是糖类&#xff0c;指的是一系列多羟基 …
阅读更多...
pwnlab通关流程

pwnlab通关流程

pwnlab通关 关于文件包含&#xff0c;环境变量劫持的一个靶场 信息收集 靶机ip&#xff1a;192.168.112.133 开放端口 根据开放的端口信息决定从80web端口入手 目录信息 在images和upload路径存在目录遍历&#xff0c;config.php被渲染无法查看&#xff0c;upload.php需…
阅读更多...
C++实现文本界面英语词典

C++实现文本界面英语词典

C实现文本界面英语词典 C实现文本界面的英语词典&#xff0c;能在Dev-C运行。提供两种方案&#xff1a;一是简单仅查词功能&#xff1b;二是具有查词、添加、删除功能&#xff0c;具有选择菜单&#xff0c;值得一提的是&#xff0c;本程序对用户输入菜单选项序号做了检测&#…
阅读更多...
Zabbix“专家坐诊”第183期问答汇总

Zabbix“专家坐诊”第183期问答汇总

问题一 Q&#xff1a;老师&#xff0c;请问一下zabbix采集的数据怎么过滤&#xff0c;获取数据是nottime20:30 notafter3&#xff0c;怎么过滤出netafter3 &#xff1f;谢谢。 A&#xff1a;过滤器设置如下图。 问题二 Q&#xff1a;大佬&#xff0c;请问一下被管节点部署了…
阅读更多...
视觉Slam十四讲笔记

视觉Slam十四讲笔记

视觉SLAM十四讲 ch1~2 虚拟机部分指令解析在其他文件中进行引用该库编译器参考链接&#xff1a;虚拟机部分 CMakeList.txt文件是cmake用来生成Makefile文件需要的一个描述编译链接的规则文件 指令解析 &#xff08;1&#xff09;PROJECT(projectname [CXX] [C] [Java]): 该…
阅读更多...
力扣（LeetCode）427. 建立四叉树（2023.03.01）

力扣（LeetCode）427. 建立四叉树（2023.03.01）

给你一个 n * n 矩阵 grid &#xff0c;矩阵由若干 0 和 1 组成。请你用四叉树表示该矩阵 grid 。 你需要返回能表示矩阵的 四叉树 的根结点。 注意&#xff0c;当 isLeaf 为 False 时&#xff0c;你可以把 True 或者 False 赋值给节点&#xff0c;两种值都会被判题机制 接受…
阅读更多...
Elasticsearch进阶之（核心概念、系统架构、路由计算、倒排索引、分词、Kibana）

Elasticsearch进阶之（核心概念、系统架构、路由计算、倒排索引、分词、Kibana）

Elasticsearch进阶之&#xff08;核心概念、系统架构、路由计算、倒排索引、分词、Kibana&#xff09; 1、核心概念&#xff1a; 1.1、索引&#xff08;Index&#xff09; 一个索引就是一个拥有几分相似特征的文档的集合。比如说&#xff0c;你可以有一个客户数据的索引&…
阅读更多...
能源消耗监测管理系统，在建筑节能中起到哪些重要作用？

能源消耗监测管理系统，在建筑节能中起到哪些重要作用？

能源是一切活动的基础更是社会经济发展的命脉&#xff0c;但随着经济的建设&#xff0c;能源资源的消耗也越来越大&#xff0c;其中建筑是最大的消耗者。水、电、气等能源的消耗量逐年增长&#xff0c;这种能源并不是取之不尽用之不竭的&#xff0c;能源的日益紧张和环境恶化&a…
阅读更多...
IM即时通讯开发MQ消息队列

IM即时通讯开发MQ消息队列

消息是互联网信息的一种表现形式&#xff0c;是人利用计算机进行信息传递的有效载体&#xff0c;比如即时通讯网坛友最熟悉的即时通讯消息就是其具体的表现形式之一。 消息从发送者到接收者的典型传递方式有两种&#xff1a; 1&#xff09;一种我们可以称为即时消息&#xff1a…
阅读更多...
【FATE联邦学习】Fateboard的使用

【FATE联邦学习】Fateboard的使用

fateboard文档 https://fate.fedai.org/fateboard/ github Fateboard文档 https://github.com/FederatedAI/FATE-Board/blob/master/README-CN.md 背景 Fateboard是FATE框架的任务看板。 在配置FATE时&#xff0c;Fateboard一般是被安装好了的&#xff0c;安装过程查看这里 A…
阅读更多...
你知道如何获取全国省市街道区域信息吗？

你知道如何获取全国省市街道区域信息吗？

随着互联网和快递行业的飞速发展&#xff0c;在中国广袤的大地上&#xff0c;全国行政区域规划星罗棋布&#xff0c;要查询一个行政单元如果不运用科技的手段查询可是非常的不易&#xff0c;现在&#xff0c;全国行政区划查询API的作用越来越大&#xff0c;它可以帮助我们对地址…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023