前端面试——CSS面经（持续更新）

news2024/12/17 19:56:24

1. CSS选择器及其优先级

!important > 行内样式 > id选择器 > 类/伪类/属性选择器 > 标签/伪元素选择器 > 子/后台选择器 > *通配符

2. 重排和重绘是什么？浏览器的渲染机制是什么？

重排(回流)：当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树，然后再次渲染。

重绘：计算好盒模型的位置，大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制。

浏览器的渲染机制：当dom的大小，位置发生改变时进行重排，当dom的样式如color、background-color改变时进行重绘。

3. display有哪些属性值

属性值作用
none元素不显示，并且会从文档流中移除
block块类型，默认宽度为父元素宽度，可设置宽高，换行显示
inline行内元素类型，默认宽度为内容宽度，不可设置宽高，同行显示
inline-block默认宽度为内容宽度，可设置宽高，同行显示
table此元素会作为块级表格来显示，子元素可设置display:table-row、table-cell等
flexflex布局
grid网格布局
inherit规定应该从父元素继承display属性的值

网格布局笔记：网格布局

表格布局可以看下面代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .table {
            display: table;  /* 表格 */
            width: 800px;
            height: 500px;
            margin: 20px auto;
			border: 3px solid #000;
        }
        .row {
            display: table-row;  /* 表格行 */
        }
        .cell {
            display: table-cell;    /* 表格单元 */
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="table">
        <div class="row">
            <div class="cell">1</div>
            <div class="cell">2</div>
            <div class="cell">3</div>
        </div>
        <div class="row">
            <div class="cell">4</div>
            <div class="cell">5</div>
            <div class="cell">6</div>
        </div>
    </div>
</body>

</html>

结果如下：

在这里插入图片描述

4. display的block、inline和inline-block的区别

block：独占一行，宽度继承至父盒子，多个元素会另起一行，可设置宽高以及margin和padding属性。

inline：元素不会独占一行，宽度、高度由内容撑开，不可设置宽高，但可以设置水平方向的margin和padding。

inline-block：行内块，将对象设置为inline对象，但对象的内容作为block对象呈现，也就是说内容排列在一行内显示，但是可以设置宽高。

5. 隐藏的元素的方法有哪些

  1. display: none
  2. visibility: hidden
  3. opacity: 0
  4. position: absolute 移到可视区之外
  5. z-index: 负值 定位的前提下，使其他元素盖住该元素，以此实现隐藏
  6. transform：scale(0, 0) 将元素缩放为0，来实现元素的隐藏，元素仍占据位置。

6. link和@import的区别

两者都是外部引用css的方式，他们的区别如下：

  • 功能上：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务，@import属于CSS范畴，只能加载CSS
  • 效果上：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载
  • 兼容性上：link是XHTML标签，没有兼容性问题；@import是CSS2.1提出的，低版本浏览器不支持
  • js支持上：link支持使用js控制dom去改变样式；而@import不支持

7. transition和animation的区别

  • transition是过渡属性，强调过渡，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画，类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧
  • animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画，它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

8. display:none和visibility:hidden的区别

  • 渲染树上：display:none会让元素从渲染树中消失，渲染时不会占据任何空间，visibility：hidden会占据空间，只是不可见
  • 是否是继承属性：display是非继承属性，子孙节点会随父节点消失，修改显示子孙节点的属性也无法显示，而visibility是继承属性，子孙节点消失是因为子孙节点从父节点继承了hidden，通过设置子孙节点visibility:visible可以让子孙节点显示。
  • 重排与重绘：修改常规文档流的display通常会造成文档的重排，但是修改visibility只会造成重绘
  • 读屏器：如果使用读屏器，设置display:none的内容不会被读取，而visibility:hidden可以被读取

9. li与li之间有看不见的空白间隔是什么原因引起的？如何解决？

li原本是块级标签，如下图

在这里插入图片描述

但当li设置为行内块元素或行元素时，li标签与li标签之间会有看不见的空隙，如下图：

在这里插入图片描述

原因：当元素是行内元素/行内块元素排版时，浏览器会将元素之间的空白符，如空格，换行，tab等渲染成一个空格处理，上图的换行就被渲染成了空格，因此会有上面的结果。

解决方案：

  1. li设置为float:left，缺点：很多容器是不适合设置浮动，并且浮动会将display变为block。
  2. 将所有li写在一行，比较简单粗暴的方法，但是代码会不太美观
  3. ul内的字符尺寸设置为0，缺点：可能会影响到其他字符，其他字符需要额外重新设置font-size
  4. 设置ul的字符间隔letter-spacing: -8px，缺点跟上条一样

10. 什么是物理像素、逻辑像素、像素密度，为什么移动端开发要用到@2x、@3x的图片

物理像素（physical pixel）：又叫设备像素，是显示屏幕上的实际物理点，它是显示设备的最小可控制单元，我们常说的1920×1080像素分辨率就是用的物理像素。

逻辑像素（device independent pixel）：又叫设备独立像素，与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包含了css像素。

逻辑像素就是在物理像素的基础上人为定义的一层逻辑像素，举个例子，一个屏幕的物理像素是2560×1440，但是我们可以人为的定义定义这个屏幕就是1280×720，所以1个逻辑像素就用4个设备像素显示。

传统的pc屏幕，1个逻辑像素就等于1个物理像素，但是市面上有很多高清屏幕，比如苹果的Retina屏幕，高清就是因为这种屏幕1个逻辑像素点使用多个物理像素显示，所以高清屏的画质就更加锐利，没有颗粒感，显示效果出众。

像素密度通常使用dpr（设备像素比device pixel ratio）来表示，dpr = 物理像素 / 逻辑像素，传统的pc屏幕dpr是1，像上面所的苹果Retina高清屏幕dpr是2。简单来说，设备像素比dpr的意义在于规定设备以多少个物理像素来显示1px的css像素。

@2x、@3x在移动端开发中，不同设备有不同的dpr，为了确保在不同设备上显示的图像保持一致的视觉效果，引入了倍图的概念，其中@2x和@3x是两个常见的倍图标识。

为什么Retina上使用@1x的图片会模糊？

举个例子，一张375px*200px的一倍位图，其拥有375*200=75000个位图像素，如果我们在常规pc屏（dpr=1）上看这张图，将会以375*200=75000个物理像素来显示，因此在pc上显示的清晰度不变。那么，如果在Retina屏（dpr=2）上预览这张图片，将会以375*200*4=300000个物理像素来显示这张图片，而实际上这张一倍位图转换成物理像素只有375*200=75000个有效物理像素，不足以填充300000个物理像素，因此剩下的300000-75000=225000个物理像素将采用就近取色的填充的方法来显示图片，这也是造成图片模糊的原因，下面这张图片解释的十分形象：

在这里插入图片描述

因此使用375px*200px的二倍图，在Retina（dpr=2）屏上会转换为375*200*4=300000个物理像素来正常填充300000个物理像素，才不会出现图片模糊的情况。

浏览器打开控制台，输入：devicePixelRatio后回车，可以查看当前屏幕的dpr。

11. 谈谈你对CSSSprites的理解

CSSSprites精灵图，将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image,background-repeat,background-position属性进行背景定位。

优点：

  1. 性能方面：能够很好的减少网页的http请求，从而大大提高了页面的性能，这是最大的优点。
  2. 存储方面：能减少图片的字节，把3张图片合成1张图片的字节总是小于这3张图片的字节总和。

缺点：

  1. 设计方面：在图片合并时，要把多张图片有序、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景，相对麻烦
  2. 程序猿开发方面：雪碧图在开发的时候相对来说麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置
  3. 维护方面：维护就更麻烦了，页面背景有少许改动就要改这整个合并的图片，很容易影响无需改动的地方，如果在原来的地方放不下，就只能往下加图片，这样图片的字节增加了，还要改动css。

12. CSS优化和提高性能的方法有哪些？

加载性能

  1. css单一样式：举个例子，当需要使用下边距和左边距的时候，推荐使用margin-bottom:10px;margin-left:10px;，而不是margin: 0 0 10px 10px，因为前者执行效率会更高。
  2. 减少使用@import，建议使用link标签，因为link标签引入css资源时，会在页面加载时一起加载，而@import需要等待页面加载完成后再进行加载，也就是说link是并行加载的，而@import是串行加载的，因此使用link加载性能更好。
  3. css压缩：将写好的css进行打包压缩，可以减小文件体积。

选择器性能

  1. 如果规则拥有ID选择器作为其关键选择器（选择器的最后面的部分为关键选择器，即用来匹配目标元素的部分），则不要为规则增加其他标签，这样就能过滤掉无法规则，样式系统就不会浪费时间去匹配它们了
  2. 避免使用通配符*规则，因为*{}计算次数惊人，只对需要用到的元素进行选择就行
  3. 尽量少的去对标签进行选择，而是用class，使用标签计算量太大了
  4. 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

渲染性能

  1. 慎重使用高性能属性：浮动、定位
  2. 尽量减少页面的重排和重绘
  3. 去除空规则，减少css文档体积
  4. 不使用@import，它会影响css的加载速度
  5. 合理使用雪碧图

可维护性、健壮性

  1. 将具有相同属性的样式抽离出来，整合并通过class在页面中使用，提高css的可维护性
  2. 样式与内容分离，将css代码定义到外部css中

13. CSS预处理用过吗

如less，sass，它们为css增加了一些编程特性，可以在css中使用变量，简单的逻辑程序等。层级，混入mixin，变量，循环，函数等对编写以及开发ui组件都极为方便

优点：

  1. 结构清晰，便于扩展
  2. 可以轻松实现多重继承
  3. 完美兼容css代码，可以用在老项目中
  4. 可以很方便的屏蔽浏览器私有语法的差异

14. 谈谈你对媒体查询的理解

媒体查询（media queries）是一种css3的技术，用于根据设备的特性和属性来应用不同的样式规则，通过媒体查询，可以使网页在不同的设备上或不同的浏览器条件下采用不同的样式表，从而实现响应式设计，提供更好的用户体验。

link元素中使用css媒体查询

当视口宽度小于等于800px时应用的样式

<link ref="stylesheet" media="(max-width: 800px)" href="example.css"/>

样式表中使用css媒体查询

  • 媒体类型（media type）：指定样式规则适用的设备类型，如all:适用于所有设备，screen：适用于屏幕（电脑、平板、手机等），print：适用于打印机和打印机预览，speech：适用于语音设备（屏幕阅读器等），默认是all

    @media screen {
	/* 样式规则适用于屏幕设备 */
	/* ... */
}

  • 媒体特性（media feature）：包括视口宽度、设备宽度、分辨率等，用于根据设备属性应用样式。

    @media screen and (max-width: 600px) {
	/* 当视口宽度小于等于600px时应用的样式 */
	/* ... */
}

  • 逻辑运算符：可以使用逻辑运算符如and or not来组合多个媒体查询条件

    @media (min-width: 600px) and (max-width: 1200px) {
	/* 当视口宽度在600px~1200px的范围内应用的样式 */
	/* ... */
}

15. 常用页面布局的代码实现

1. 两栏布局

一般的两栏布局指的是左边一栏宽度固定，右边一栏宽度自适应。

实现方法1：利用浮动，左边盒子设置宽度，并设置向左浮动，右边盒子使用margin-left左边盒子宽度，宽度设不用设置，因为block盒子默认宽度为auto自动撑满父盒子

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .outer {
        height: 100vh;
    }

    .left {
        /* 核心代码 */
        float: left;
        width: 100px;
        height: 100%;
        background-color: tomato;
    }

    .right {
        /* 核心代码 */
		margin-left: 100px;
        height: 100%;
        background-color: gold;
    }
</style>
<body>
    <div class="outer">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

结果如下：

在这里插入图片描述

实现方法2：使用flex布局，左侧固定宽度，右侧设置flex:1

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .outer {
        height: 100vh;
        /* 核心代码 */
        display: flex;
    }
    .left {
        width: 100px;
        height: 100%;
        background-color: tomato;
    }
    .right {
        /* 核心代码 */
        flex: 1;
        height: 100%;
        background-color: gold;
    }
</style>

实现方法3：利用浮动，左侧宽度固定，并左浮动，右侧设置overflow：hidden，这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .outer {
        height: 100vh;
    }
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: tomato;
    }

    .right {
        overflow: hidden;
        height: 100%;
        background-color: gold;
    }
</style>

实现方法4：父盒子相对定位，左侧盒子绝对定位并固定宽度，右侧盒子margin-left左侧盒子宽度

或者左侧盒子固定宽度，右侧盒子绝对定位，并left：左侧盒子宽度。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .outer {
        height: 100vh;
        position: relative;
    }
    .left {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: tomato;
    }

    .right {
        margin-left: 100px;
        height: 100%;
        background-color: gold;
    }
</style>

2. 三栏布局（圣杯布局）

三栏布局，又叫圣杯布局，一般指的是页面中一共有三栏，左右两栏宽度固定，中间自适应的布局。

方法1：flex布局

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .outer {
        height: 100vh;
        display: flex;
    }
    .left {
        width: 100px;
        height: 100%;
        background-color: tomato;
    }

    .right {
        width: 100px;
        height: 100%;
        background-color: gold;
    }

    .center {
        flex: 1;
        height: 100%;
        background-color: black;
    }
</style>
<body>
    <div class="outer">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</body>

方法2：定位，外部盒子设置左右盒子宽度的padding并设置相对定位，左右盒子设置绝对定位，左盒子定位在左，右盒子定位在右

或者外部盒子不设padding，中间盒子设置margin

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .outer {
        height: 100vh;
        padding: 0 100px;
        position: relative;
    }
    .left {
        position: absolute;
        top: 0;
        left: 0;

        width: 100px;
        height: 100%;
        background-color: tomato;
    }

    .right {
        position: absolute;
        top: 0;
        right: 0;

        width: 100px;
        height: 100%;
        background-color: gold;
    }

    .center {
        width: 100%;
        height: 100%;
        background-color: black;
    }
</style>

16. 谈谈你对BFC的理解，以及如何创建BFC

BFC容器通常是指“块级格式化上下文容器（Block Formatting Context Container）”，它是CSS中用来管理和控制元素在页面上布局和排列的一种机制，它会形成独立的渲染区域，从而使内部元素的渲染不会影响到外界。

下面我们通过例子来简单理解一下什么叫做内部元素不会影响到外界

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bfc容器</title>
    <style>
        img {
            /* float: left; */
        }
        /* .bfc {
            overflow: hidden;
        } */
    </style>
</head>
<body>
    <div class="outer bfc">
        <img src="./img.png" alt="">
        <p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
    </div>
</body>
</html>

运行如上代码可以看到：

在这里插入图片描述

我们如何实现文字围绕图片渲染呢？

我们可以使用浮动来实现，浮动产生的目的最初就是为了做文字环绕效果，浮动的元素会压住标准流的盒子，和定位比较像，但是浮动和定位有区别，浮动的元素不会压住标准流的文字，图片，而固定定位、决定定位会压住标准流的所有内容，包括文字及图片

下面我们来试试浮动的效果：我们取消上述代码的浮动注释，得到下面效果：

在这里插入图片描述

但是我们打开开发者工具查看页面元素，会发现一个问题，父盒子的高度并没有被子元素img撑开，如下图：

在这里插入图片描述

也就是说子元素img高度已经在父盒子外面了，这就是上面所说的内部元素影响到外界，造成这种情况的原因是：对子元素设置浮动后，它脱离了父元素的文档流，因此父元素高度并不会受这个子元素的影响，这就是常说的高度塌陷问题，我们可以使用BFC容器来解决此问题，下面我们取消上面代码中bfc类的注释，再看看结果如下：

在这里插入图片描述

可以看到高度塌陷问题得到解决，内部元素将不会影响到父元素以外的元素，它只会影响父元素。

下面我们详细介绍BFC。

BFC除了拥有内部元素不会影响到外部元素特性，还有许多其他实用的特性，下面汇总了BFC的所有特性：

  • BFC是独立的容器，容器内部的元素不会影响到外部元素
  • BFC区域不会与浮动的容器发生重叠
  • BFC和文档流的排列方式一致，垂直方向上，自上而下排列

形成BFC的条件：

  • 元素设置overflow：overflow不是visible的值，如hidden，auto，scroll。上面代码的bfc类就是用的hidden

  • 元素设置浮动：float除了none以外的值

  • 元素设置定位：position设置absolute或者fixed

  • 元素设置display：flex，inline-block，table-cell等

BFC的作用：

  • 解决高度塌陷问题（也可以说是清除浮动）：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度不会被这个设置了浮动的元素撑开。

  • 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变成两个BFC，就解决了margin重叠问题。

  • 创建自适应的两栏布局：左边盒子宽度固定，右边盒子设置overflow:hidden使盒子变成bfc盒子，bfc的区域不会与浮动元素发生重叠，所以两侧不会发生重叠，实现了自适应两栏布局。

    .left {
	width: 100px;
	height: 200px;
	background: tomato;
	float: left;
}
.right {
	height: 300px;
	background: gold;
	overflow: hidden;
}
<div class="left"></div>
<div class="right"></div>

17. 什么是margin重叠问题？以及如何解决margin重叠问题

两个块级元素的上外边距和下外边距可能会合并（重叠）为一个外边距，其大小会取其中外边距值大的那个(如果两个边距都为正值的话)，这种结果就是外边距重叠。另外，margin重叠只会出现在垂直方向上。

需要注意的是：浮动和绝对定位这种脱离文档流的元素的外边距不会折叠。

计算原则：

  • 如果两者都是正数，那么就取最大值

    在这里插入图片描述

  • 如果是一正一负，就会取正值减去负值的绝对值

    在这里插入图片描述

  • 两个都是负值时，用0减去两个中绝对值大的那个

    在这里插入图片描述

解决办法：

对于折叠的情况，主要有两种：

  1. 兄弟盒子间重叠（经实测，下面方式只有在两个margin都为正值时才生效，存在负值不生效）

    • 底部元素变成行内盒子：display:inline-block【也就是底部盒子变bfc】

    • 底部元素设置浮动：float: left除了none【也就是底部盒子变bfc】

    • 底部元素设置绝对或固定定位：position: absolute/fixed【也就是底部盒子变成bfc】

      综上所述，只要把底部盒子变成bfc即可。

  2. 父子盒子间重叠

    在这里插入图片描述

    • 父盒子加入：overflow: hidden【即父盒子变bfc】
    • 父盒子变成行内盒子：display: inline-block【即父盒子变bfc】
    • 父盒子增加边框：border: 1px solid transparent
    • 子盒子变成行内盒子：display: inline-block【即子盒子变bfc】
    • 子盒子设置定位：position: absolute/fixed【即子盒子变bfc】
    • 子盒子设置浮动：float: left除none均可【即子盒子变bfc】

18. absolute与fixed定位的共同点和区别有哪些

共同点：

  • 都使文档脱离文档流不再占据文档物理空间

  • 都改变行内元素的呈现方式，将display自动设置为inline-block

  • 覆盖非定位文档元素

不同点：

  • absolute与fixed的根元素不同，absolute的根元素可以设置，fixed根元素固定为浏览器。
  • 在有滚动条的页面，absolute会跟着父元素进行移动，而fixed始终固定在页面的具体位置。

19. 谈谈你对sticky定位的理解

粘性定位通俗来说，它就是相对定位relative和固定定位fixed的结合体，在最近可滚动容器没有触发滑动之前，sticky盒子的表现为相对定位relative【第一阶段】，但当最近可滚动容器触发滚动，父元素出现在最近可滚动容器的可视区并且滚动距离达到粘性定位sticky的要求时（比如top: 100px），sticky盒子的表现为固定定位fixed【第二阶段】，接着滚动，当sticky盒子的父元素消失在最近可滚动容器的可视区时，sticky盒子会重新表现为相对定位relative【第三阶段】，也就是说它不再固定，会随着父元素消失在最近可滚动容器的可视区。

结合上面的描述，我们可以总结粘性定位的位置受两个东西的影响：

  1. 父元素：父盒子不在最近可滚动容器可视区时，sticky盒子始终表现为相对定位。
  2. 最近可滚动的容器：设置sticky时使用的top、left等属性是相对的就是可滚动的容器，只要容器的overflow不是visible【容器不设置overflow就默认是visible】那么容器就是可滚动容器，如果盒子的祖先们没找到可滚动容器，那么body就作为可滚动容器，因为body是默认可滚动的。

下面我们结合代码来理解：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin重叠问题</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .parent {
            width: 400px;
            height: 600px;
            background-color: tomato;
            overflow: visible;
        }

        .sticky {
            width: 200px;
            height: 200px;
            background-color: gold;
			/* 粘性定位 */
            position: sticky;
            top: 0px;
        }

        .box-top,
        .box-bot {
            width: 400px;
            background-color: pink;
        }

        .box-top {
            height: 200px;
        }

        .box-bot {
            height: 1000px;
        }
    </style>
</head>

<body>
    <div class="box-top"></div>
    <div class="parent">
        <div class="sticky">吸顶盒子</div>
    </div>
    <div class="box-bot"></div>
</body>

</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

sticky失效情况有：

  • 未指定top、right、bottom或left其中的一个
  • 父元素的高度小于sticky元素
  • 没有找准sticky元素需要参考的最近可滚动元素
  • 如果参考的可滚动元素是body，那么父元素的overflow必须是visible，不能是其他任意值

参考博客：position：sticky失效问题剖析

参考视频：[粘性定位](

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

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

相关文章

SLAM算法与工程实践——SLAM基本库的安装与使用（4）：Sophus库

SLAM算法与工程实践——SLAM基本库的安装与使用（4）：Sophus库

SLAM算法与工程实践系列文章 下面是SLAM算法与工程实践系列文章的总链接&#xff0c;本人发表这个系列的文章链接均收录于此 SLAM算法与工程实践系列文章链接 下面是专栏地址&#xff1a; SLAM算法与工程实践系列专栏 文章目录 SLAM算法与工程实践系列文章SLAM算法与工程实践…
阅读更多...
数据结构之交换排序

数据结构之交换排序

目录 交换排序 冒泡排序 冒泡排序的时间复杂度 快速排序 快速排序单趟排序的时间复杂度 快速排序的时间复杂度 快速排序的优化 优化1&#xff1a;三数取中法 优化2&#xff1a;小区间优化法 交换排序 在日常生活中交换排序的使用场景是很多的&#xff0c;比如在学校做…
阅读更多...
第76讲：MySQL数据库中常用的命令行工具的基本使用

第76讲：MySQL数据库中常用的命令行工具的基本使用

文章目录 1.mysql客户端命令工具2.mysqladmin管理数据库的客户端工具3.mysqlbinlog查看数据库中的二进制日志4.mysqlshow统计数据库中的信息5.mysqldump数据库备份工具6.mysqllimport还原备份的数据7.source命令还原SQL类型的备份文件 MySQL数据库提供了很多的命令行工具&#…
阅读更多...
Linux系统---简易伙伴系统

Linux系统---简易伙伴系统

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、题目要求 1.采用C语言实现 2.伙伴系统采用free_area[11]数组来组织。要求伙伴内存最小为一个页面&#xff0c;页面大小为4KB…
阅读更多...
2023年电工（初级）证模拟考试题库及电工（初级）理论考试试题

2023年电工（初级）证模拟考试题库及电工（初级）理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年电工&#xff08;初级&#xff09;证模拟考试题库及电工&#xff08;初级&#xff09;理论考试试题是由安全生产模拟考试一点通提供&#xff0c;电工&#xff08;初级&#xff09;证模拟考试题库是根据电工&…
阅读更多...
esxi全称“VMware ESXi

esxi全称“VMware ESXi

esxi全称“VMware ESXi”&#xff0c;是可直接安装在物理服务器上的强大的裸机管理系统&#xff0c;是一款虚拟软件&#xff1b;ESXi本身可以看做一个操作系统&#xff0c;采用Linux内核&#xff0c;安装方式为裸金属方式&#xff0c;可直接安装在物理服务器上&#xff0c;不需…
阅读更多...
Kubernetes架构及核心部件

Kubernetes架构及核心部件

文章目录 1、Kubernetes集群概述1.1、概述1.2、通过声明式API即可 2、Kubernetes 集群架构2.1、Master 组件2.1.1、API Server2.1.2、集群状态存储2.1.3、控制器管理器2.1.4、调度器 2.2、Worker Node 组件2.2.1、kubelet2.2.2、容器运行时环境2.2.3、kube-proxy 2.3、图解架构…
阅读更多...
大数据Doris（三十五）：Unique模型（唯一主键）介绍

大数据Doris（三十五）：Unique模型（唯一主键）介绍

文章目录 Unique模型（唯一主键）介绍 一、创建doris表 二、插入数据
阅读更多...
LANDSAT_7/02/T1/TOA的Landsat7_C2_TOA类数据集

LANDSAT_7/02/T1/TOA的Landsat7_C2_TOA类数据集

Landsat7_C2_TOA数据集是将数据每个波段的辐射亮度值转换为大气层顶表观反射率TOA&#xff0c;是飞行在大气层之外的航天传感器量测的反射率&#xff0c;包括了云层、气溶胶和气体的贡献&#xff0c;可通过辐射亮度定标参数、太阳辐照度、太阳高度角和成像时间等几个参数计算得…
阅读更多...
P9 LinuxC 进程概述 终端启动的程序父进程是终端

P9 LinuxC 进程概述 终端启动的程序父进程是终端

前言 &#x1f3ac; 个人主页&#xff1a;ChenPi &#x1f43b;推荐专栏1: 《C_ChenPi的博客-CSDN博客》✨✨✨ &#x1f525; 推荐专栏2: 《Linux C应用编程&#xff08;概念类&#xff09;_ChenPi的博客-CSDN博客》✨✨✨ &#x1f6f8;推荐专栏3: ​​​​​​《链表_ChenP…
阅读更多...
Qt实现二维码生成和识别

Qt实现二维码生成和识别

一、简介 QZxing开源库: 生成和识别条码和二维码 下载地址&#xff1a;https://gitcode.com/mirrors/ftylitak/qzxing/tree/master 二、编译与使用 1.下载并解压&#xff0c;解压之后如图所示 2.编译 打开src目录下的QZXing.pro&#xff0c;选择合适的编译器进行编译 最后生…
阅读更多...
Ansible中执行流控制

Ansible中执行流控制

1.ansible中的迭代循环 创建目录和文件 vim createfile.yaml - name: create file playbook hosts: all tasks: - name: create file file: path: "/mnt/{{item[name]}}" state: …
阅读更多...
华为ensp实验——基于全局地址池的DHCP组网实验

华为ensp实验——基于全局地址池的DHCP组网实验

目录 前言实验目的实验内容实验结果 前言 该实验基于华为ensp&#xff0c;版本号是1.3.00.100 V100R003C00SPC100&#xff0c;只供学习和参考&#xff0c;不作任何商业用途。 具体的DHCP命令可以看系列文章链接&#xff0c;计算机网络实验&#xff08;华为eNSP模拟器&#xff…
阅读更多...
机场信息集成系统系列介绍（2）：机场航班报文处理系统

机场信息集成系统系列介绍（2）：机场航班报文处理系统

本文介绍机场航班报文处理系统。#机场##sita##AFTN##航空# 一、定义 机场航班报文处理系统是一种基于计算机技术的自动化处理系统&#xff0c;用于接收、解析、处理和传递与航班相关的报文信息。这些报文可能包括航班计划、航班状态更新、旅客信息等&#xff0c;通常来源于航…
阅读更多...
UniGui使用CSSUniTreeMenu滚动条

UniGui使用CSSUniTreeMenu滚动条

有些人反应UniTreeMenu当菜单项目比较多的时候会超出但是没有出滚动条&#xff0c;只需要添加如下CSS 老规矩&#xff0c;unitreemeu的layout的componentcls里添加bbtreemenu&#xff0c;然后在css里添加 .bbtreemenu .x-box-item{ overflow-y: auto; } 然后当内容超出后就会…
阅读更多...
AI 赋能 | 智能制造的 AI 算法开发和工程实现

AI 赋能 | 智能制造的 AI 算法开发和工程实现

谈到智能制造、智慧工厂&#xff0c;愿景是美好的&#xff0c;借助计算机视觉技术和 AI 算法&#xff0c;为自动化生产线赋予环境感知的能力&#xff0c;从而改善工艺流程&#xff0c;提高生产效率。但是&#xff0c;随着柔性化生产的需求增长&#xff0c;产线的布局调整和功能…
阅读更多...
文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑源网荷效益的峰谷电价与峰谷时段双层优化模型》

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑源网荷效益的峰谷电价与峰谷时段双层优化模型》

这个标题涉及到电力定价和能源效益的优化模型。让我来分解一下&#xff1a; 峰谷电价&#xff1a;这是一种电力定价策略&#xff0c;即在一天内不同时间段设定不同的电价。通常&#xff0c;高峰时段&#xff08;需求高&#xff09;的电价相对较高&#xff0c;而低谷时段&#x…
阅读更多...
Spring AOP面向切面编程

Spring AOP面向切面编程

AOP将通用的、与业务无关的功能抽象封装为切面类。 切面可配置在目标方法的执行前、后运行&#xff0c;真正做到即插即用。实现了在不修改源码的情况下对程序行为进行扩展。 Spring AOP与AspectJ的关系&#xff1a; Eclipse AspectJ 是基于Java平台的面向切面编程的语言。 Sp…
阅读更多...
DNSLog漏洞探测(二)之常用DNSLog平台

DNSLog漏洞探测(二)之常用DNSLog平台

常用DNSLog平台 我们在上一篇文章中我们介绍了什么是DNSLog&#xff0c;如果我们自己要去搭建一个DNSLog的服务平台&#xff0c;还是比较复杂和麻烦的&#xff0c;所以我们可以直接去使用一些公开免费的DNSLog平台&#xff0c;DNSLog的平台非常的多&#xff0c;但是实际上大部…
阅读更多...
Spring基于xml半注解开发

Spring基于xml半注解开发

目录 Component的使用 依赖注解的使用 非自定义Bean的注解开发 Component的使用 基本Bean注解&#xff0c;主要是使用注解的方式替代原有的xml的<bean>标签及其标签属性的配置&#xff0c;使用Component注解替代<bean>标签中的id以及class属性&#xff0c;而对…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023