42道CSS高频题整理(附答案背诵版)

1、简述CSS3选择器优先级及计算?

CSS的选择器优先级是一个相对复杂的概念,它规定了在一组样式冲突时,哪些样式将被浏览器采纳。选择器优先级是通过一个四位的值来计算的,形式为:[内联样式, ID选择器, 类选择器/属性选择器/伪类, 元素选择器/伪元素]。这四个等级的优先级从左到右递减,左边的优先级最高,右边的优先级最低。

  1. 内联样式:直接在HTML元素中的"style"属性里定义的样式,优先级最高,记为1000。
  2. ID选择器:通过元素的id选择元素,记为0100。
  3. 类选择器、属性选择器、伪类:通过元素的class、属性或者伪类选择元素,记为0010。
  4. 伪元素、元素选择器:通过元素名称或者伪元素选择元素,记为0001。

比如:

  • h1 { color: red; } // 优先级为0001
  • .class { color: blue; } // 优先级为0010
  • #id { color: green; } // 优先级为0100
  • < p style=“color: yellow;”> // 优先级为1000

如果一个选择器同时包含多个部分,那么优先级就是这些部分的和。比如:#id .class h1 { color: black; } 的优先级为0111 (0100 + 0010 + 0001)。

在实际应用中,如果我们想要覆盖掉某些已经定义好的样式,就需要利用这个优先级规则,通过增加选择器的优先级来实现。

需要注意的是,!important规则的优先级最高,它可以覆盖所有其他的样式,但是过度使用可能会导致代码难以维护,所以一般情况下我们应尽量避免使用。

2、详细说明CSS3新特性 ?

CSS3引入了许多新特性,使得前端开发者能够创建更加丰富和交互性强的网页。以下是一些主要的新特性:

  1. 选择器:CSS3引入了许多新的选择器,例如属性选择器、结构伪类选择器、否定伪类选择器等,这些新的选择器使得开发者能够更精准地选中需要的元素。

  2. 盒模型:CSS3引入了box-sizing属性,使得开发者能够更方便地控制元素的大小。此外,还引入了flex布局和grid布局,大大增强了CSS的布局能力。

  3. 颜色:CSS3支持更多种类的颜色值,例如RGBA、HSLA等,这些颜色值支持透明度设置,使得颜色控制更加灵活。

  4. 渐变:CSS3支持线性渐变(linear-gradient)和径向渐变(radial-gradient),使得开发者能够创建更丰富的背景效果。

  5. 阴影:CSS3引入了box-shadowtext-shadow属性,使得开发者能够为元素和文本添加阴影效果。

  6. 2D/3D转换:CSS3的transform属性支持2D和3D转换,使得开发者能够创建出各种各样的动画效果。

  7. 过渡和动画:CSS3的transition属性和animation属性支持过渡和动画效果,使得元素状态的变化能够更加平滑和生动。

  8. 媒体查询:CSS3的媒体查询功能使得开发者能够根据设备的特性(例如屏幕宽度、设备类型等)来应用不同的样式,这对于响应式设计非常重要。

以上只是CSS3新特性的一部分,还有许多其他的新特性等待开发者去发现和利用。

3、Padding和Margin有什么区别?

PaddingMargin 都是 CSS 中用来控制元素周围空白区域的属性,但它们的用途和效果有一些不同。

  1. Padding(内边距):Padding 是元素的内边距,它位于元素的边框和内容之间。增加 Padding 可以增大元素的总尺寸,因为 Padding 是添加到元素内容的宽度和高度之上的。如果元素有背景色或背景图,Padding 区域也会显示这个背景。

    例如:

    div {background-color: lightblue;padding: 10px;
    }
    

    这会创建一个 div,其内容周围有 10px 的 lightblue 背景色区域。

  2. Margin(外边距):Margin 是元素的外边距,它位于元素的边框和其他元素之间。增加 Margin 不会增大元素本身的尺寸,但会增大元素周围的空白区域。Margin 区域是透明的,不显示元素的背景色或背景图。

    例如:

    div {background-color: lightblue;margin: 10px;
    }
    

    这会创建一个 div,其周围有 10px 的透明区域,这个区域会将 div 与其他元素分开。

总结一下,Padding 是元素的内部空间,它会影响元素的尺寸,并且会显示元素的背景。Margin 是元素的外部空间,它不影响元素的尺寸,只影响元素与其他元素的距离,并且不显示元素的背景。

4、CSS引入的方式有哪些? link和@import的区别是?

CSS可以通过以下三种方式引入:

  1. 内联样式:直接在HTML元素中使用"style"属性来定义样式。这种方法的优先级最高,但不利于样式的复用和维护。
    例如:

    <div style="color: red;">This is a red text.</div>
    
  2. 内部样式:在HTML文档的<head>中使用<style>标签来定义样式。这种方法可以在一个HTML文档中复用样式,但在多个HTML文档中仍然需要重复定义。
    例如:

    <head><style>.red-text {color: red;}</style>
    </head>
    <body><div class="red-text">This is a red text.</div>
    </body>
    
  3. 外部样式:通过<link>标签或者@import规则来引入外部的CSS文件。这种方法可以在多个HTML文档中复用样式,是最推荐的方法。
    例如:

    <head><link rel="stylesheet" href="styles.css">
    </head>
    

    或者

    <head><style>@import url('styles.css');</style>
    </head>
    

<link>@import的主要区别在于:

  1. 加载顺序<link>是HTML方式,与页面同时加载;@import是CSS方式,需要等到页面加载完才加载CSS。

  2. 兼容性<link>标签几乎被所有浏览器所支持;@import是CSS2.1提出的,低版本的浏览器可能不支持。

  3. 使用限制<link>可以定义RSS等其他事务;@import只能加载CSS。

  4. DOM可控<link>是HTML标签,因此可以通过JS操作DOM,插入标签来改变样式;而@import不行。

因此,一般情况下更推荐使用<link>方式来引入CSS。

5、简述CSS选择符有哪些?

CSS选择符(或称选择器)是用来选中页面中特定元素并应用样式的工具。以下是主要的CSS选择器:

  1. 元素选择器:这是最基础的选择器,它根据HTML元素的类型进行选择。例如,h1 { color: blue; }会将所有的h1元素的文字颜色设置为蓝色。

  2. ID选择器:通过元素的id属性进行选择,id选择器在CSS中具有很高的优先级。例如,#myId { color: blue; }会将id为myId的元素的文字颜色设置为蓝色。

  3. 类选择器:通过元素的class属性进行选择。例如,.myClass { color: blue; }会将class为myClass的所有元素的文字颜色设置为蓝色。

  4. 属性选择器:通过元素的属性进行选择。例如,[href] { color: blue; }会将所有含有href属性的元素的文字颜色设置为蓝色。

  5. 后代选择器:选中某元素的后代元素。例如,div p { color: blue; }会将所有在div元素内部的p元素的文字颜色设置为蓝色。

  6. 子元素选择器:选中某元素的直接子元素。例如,div > p { color: blue; }会将所有直接在div元素下一级的p元素的文字颜色设置为蓝色。

  7. 相邻兄弟选择器:选中某元素的下一个兄弟元素。例如,h1 + p { color: blue; }会将所有紧跟在h1元素后面的p元素的文字颜色设置为蓝色。

  8. 通用选择器:选中所有元素。例如,* { color: blue; }会将所有元素的文字颜色设置为蓝色。

此外,CSS3还引入了一些新的选择器,如:

  • 结构伪类选择器:例如:first-child:last-child:nth-child()等,用来选择特定位置的元素。
  • 否定伪类选择器:例如:not(),用来选择除某些元素以外的元素。
  • 伪元素选择器:例如::before::after,用来选择元素的一部分,或者在元素前后插入内容。

以上只是一部分选择器,CSS中还有许多其他的选择器等待你去发现和使用。

6、CSS居中(包括水平居中和垂直居中)的方案有哪些 ?

CSS中实现元素居中的方法很多,具体的方法取决于你的布局需求和要居中的元素的特性。以下是一些常见的水平居中和垂直居中的方法:

  1. 行内元素的水平居中:可以通过设置父元素的 text-align: center; 来实现。

  2. 块级元素的水平居中:如果元素的宽度已知,可以通过设置 margin-leftmargin-rightauto 来实现。

  3. 绝对定位元素的水平居中:如果元素使用了绝对定位,可以通过设置 left: 50%;transform: translateX(-50%); 来实现。

  4. Flex布局的水平居中和垂直居中:设置父元素为Flex布局,然后通过 justify-content: center;(水平居中)和 align-items: center;(垂直居中)来实现。

  5. 单行文本的垂直居中:可以通过设置 line-height 等于元素的高度来实现。

  6. 绝对定位元素的垂直居中:如果元素使用了绝对定位,可以通过设置 top: 50%;transform: translateY(-50%); 来实现。

  7. Grid布局的水平居中和垂直居中:设置父元素为Grid布局,然后通过 justify-items: center;(水平居中)和 align-items: center;(垂直居中)来实现。

以上只是一部分方法,CSS中还有许多其他的方法可以实现元素的居中。不同的方法有各自的优点和适用场景,需要根据实际需求来选择合适的方法。

7、解释CSS的盒子模型?

CSS的盒模型是一个用于设计和布局的基本概念,它将HTML元素视为一个矩形的盒子,这个盒子由内到外包含以下几个部分:

  1. 内容(Content):这是盒子里面的实际内容,比如文本、图片等,由widthheight属性定义。

  2. 内边距(Padding):围绕在内容周围的空间,由padding属性定义。内边距是可选的,它的大小会影响到元素的最终尺寸,因为它会增加到内容的宽度和高度上。

  3. 边框(Border):围绕在内边距和内容外的线,由border属性定义。边框是可选的,它的大小同样会影响到元素的最终尺寸。

  4. 外边距(Margin):围绕在边框外部的空间,由margin属性定义。外边距是可选的,它不会影响元素本身的尺寸,但会影响元素与其他元素的距离。

在CSS中,盒模型的尺寸计算有两种模式:标准模式和怪异模式(Quirks Mode)。在标准模式下,元素的总宽度(或高度)= 内容宽度(或高度)+ 左右(或上下)内边距 + 左右(或上下)边框。在怪异模式下,元素的总宽度(或高度)= 内容宽度(或高度),但内容宽度(或高度)包含了左右(或上下)的内边距和边框。

CSS3引入了一个新的box-sizing属性,通过设置这个属性为border-box,可以使元素始终按照怪异模式来计算尺寸,这在很多情况下会使布局更加方便。

8、CSS 选择符有哪些?哪些属性可以继承?

CSS 选择符(选择器)的种类非常多,下面是一些常见的选择器:

  1. 元素选择器:选择特定类型的HTML元素,例如pdivh1等。

  2. 类选择器:通过元素的class属性进行选择,例如.myClass

  3. ID选择器:通过元素的id属性进行选择,例如#myId

  4. 属性选择器:通过元素的属性进行选择,例如[href][type="text"]等。

  5. 子代选择器:选择某元素的直接子元素,例如div > p

  6. 后代选择器:选择某元素的所有后代元素,例如div p

  7. 相邻兄弟选择器:选择某元素的下一个兄弟元素,例如h1 + p

  8. 一般兄弟选择器:选择某元素后面所有的兄弟元素,例如h1 ~ p

  9. 伪类选择器:选择特定状态的元素,例如:hover:focus:active:visited:first-child等。

  10. 伪元素选择器:选择元素的某个部分,或者在元素前后插入内容,例如::before::after::first-letter等。

CSS中,有一些属性是可以继承的,这意味着如果没有为某个元素指定这些属性,那么它会继承其父元素的属性值。可以继承的属性有很多,下面是一些常见的可以继承的属性:

  • 文本相关的属性,如colorfontletter-spacingline-heighttext-aligntext-indenttext-transform等。
  • 列表相关的属性,如list-stylelist-style-typelist-style-positionlist-style-image等。
  • 表格布局相关的属性,如border-collapseborder-spacing等。
  • 光标相关的属性,如cursor等。
  • 可见性相关的属性,如visibility等。

但是大多数盒模型相关的属性(如widthheightmarginpaddingborder等)和定位相关的属性(如positiontopbottomleftrightz-index等)是不可继承的。具体哪些属性可以继承,可以查阅相关的CSS文档。

9、请阐述CSS3新增伪类举例?

CSS3 引入了许多新的伪类,这些伪类提供了更加强大的选择器功能,使得我们可以更加方便地选择到特定的元素。以下是一些常见的CSS3新增伪类:

  1. :nth-child(n): 选取每个父元素下的第n个子元素。例如,p:nth-child(2) 会选取每个父元素下的第二个 <p> 元素。
p:nth-child(2) {color: red;
}

以上代码将会使得每个父元素的第二个 <p> 元素的文本颜色为红色。

  1. :nth-last-child(n): 这个伪类的作用与 :nth-child(n) 类似,但是它是从后往前计数的。例如,p:nth-last-child(1) 会选取每个父元素下的最后一个 <p> 元素。

  2. :last-child: 选取每个父元素的最后一个子元素。例如,p:last-child 会选取每个父元素的最后一个 <p> 元素。

  3. :first-of-type: 选取父元素的第一个特定类型的子元素。例如,p:first-of-type 会选取每个父元素的第一个 <p> 元素。

  4. :last-of-type: 选取父元素的最后一个特定类型的子元素。例如,p:last-of-type 会选取每个父元素的最后一个 <p> 元素。

  5. :nth-of-type(n): 选取父元素的第n个特定类型的子元素。例如,p:nth-of-type(2) 会选取每个父元素的第二个 <p> 元素。

  6. :nth-last-of-type(n): 这个伪类的作用与 :nth-of-type(n) 类似,但是它是从后往前计数的。例如,p:nth-last-of-type(1) 会选取每个父元素下的最后一个 <p> 元素。

  7. :only-child: 选取父元素下唯一的子元素。例如,如果一个元素下只有一个 <p> 元素,那么 p:only-child 就可以选取到这个 <p> 元素。

  8. :only-of-type: 选取父元素下唯一的特定类型的子元素。例如,如果一个元素下只有一个 <p> 元素,那么 p:only-of-type 就可以选取到这个 <p> 元素。

  9. :empty: 选取不包含子元素或者文本的元素。

以上就是CSS3新增的一些伪类,它们使得我们能够更加灵活地选择到页面上的特定元素。

10、为什么要初始化CSS样式?

初始化 CSS 样式,也被称为 CSS Reset,主要是为了解决不同浏览器之间的默认样式差异问题。因为不同浏览器对于一些标签的默认样式可能会有所不同,这可能会导致你的网页在不同的浏览器下看起来不一样。

例如,某些浏览器可能会对 <h1> 标签应用较大的外边距,而其他浏览器可能不会。如果你没有明确设置 <h1> 标签的外边距,那么它在不同浏览器下可能会有不同的显示效果。

初始化 CSS 样式的方法通常是在你的 CSS 文件的开始部分,添加一段 CSS 代码,明确设置所有元素的一些基本样式,例如外边距,内边距,字体大小等。这样可以确保你的网页在所有浏览器下都有一致的基本样式。

例如,以下是一个非常简单的 CSS 初始化代码:

* {margin: 0;padding: 0;box-sizing: border-box;
}

以上代码将所有元素的外边距和内边距设置为0,并且设置所有元素的盒模型为 box-sizing。这样可以确保你的布局在不同浏览器下都有一致的效果。

总的来说,初始化 CSS 样式是为了解决浏览器之间的样式差异,确保你的网页在所有浏览器下都有一致的显示效果。

11、使用 CSS 预处理器的优缺点有哪些?

CSS 预处理器如 Sass、Less 和 Stylus 等,可以帮助我们编写更加结构化、可维护的 CSS 代码,提高开发效率。它们的优缺点如下:

优点:

  1. 嵌套语法:CSS 预处理器支持选择器的嵌套,这使得我们的 CSS 代码更加结构化,更易于阅读和维护。

  2. 变量和混合:CSS 预处理器允许我们定义可重用的 CSS 规则和值。例如,我们可以定义一个颜色变量,然后在整个样式表中使用这个变量,如果需要改变这个颜色,只需要改变变量的值即可。

  3. 函数和运算:CSS 预处理器支持一些编程特性,如条件语句,循环,函数等,使得我们可以编写更加动态的 CSS 代码。

  4. 导入和模块化:CSS 预处理器支持导入其他 CSS 文件,这使得我们可以将 CSS 代码分割成多个小的、可重用的模块,提高代码的可维护性。

  5. 厂商前缀自动化:一些 CSS 预处理器支持自动添加厂商前缀,这可以帮助我们解决 CSS3 在不同浏览器下的兼容性问题。

缺点:

  1. 需要编译:CSS 预处理器的代码需要编译成 CSS 代码才能在浏览器中运行,这增加了开发流程的复杂性。

  2. 学习成本:虽然 CSS 预处理器的语法通常都比较简单,但是对于初学者来说,还是需要花一些时间来学习。

  3. 调试困难:因为浏览器读取的是编译后的 CSS 文件,所以当出现问题时,直接在浏览器端调试可能会比较困难。不过现在有 Source Maps 技术可以映射到原始的预处理器文件,缓解了这个问题。

  4. 可能导致过度设计:CSS 预处理器的强大功能,如果使用不当,可能会导致过度设计,生成冗长和复杂的 CSS 代码。

总的来说,选择是否使用 CSS 预处理器,主要取决于项目的需求和团队的技术栈。

12、你用过媒体查询,或针对移动端的布局/CSS吗?

是的,我非常熟悉媒体查询和针对移动端的布局/CSS。

媒体查询是 CSS3 的一个重要特性,它允许我们根据设备的特性,如视窗宽度,像素密度等,来应用不同的 CSS 规则。这在创建响应式设计的网站时非常有用,因为我们可以根据用户设备的屏幕大小来调整布局和样式。

例如,以下的 CSS 代码会将视窗宽度小于600px的设备的背景颜色设置为灰色:

@media (max-width: 600px) {body {background-color: lightgray;}
}

针对移动端的布局/CSS,我们通常需要考虑的问题有:

  1. 触摸友好:移动设备主要通过触摸来操作,所以我们需要确保所有的可点击的元素都足够大,且有足够的间距,以避免误点击。

  2. 简洁的设计:移动设备的屏幕通常较小,所以我们需要保持设计的简洁,避免过多的元素导致界面显得拥挤。

  3. 优化图片:移动设备的网络连接可能较慢,所以我们需要优化图片,减少页面的加载时间。

  4. 流式布局:使用百分比、flexbox、grid 等技术来创建可以自适应屏幕大小的布局。

总的来说,媒体查询和针对移动端的布局/CSS 是现代前端开发中非常重要的技能。

13、简述写高效CSS时会有哪些问题需要考虑?

编写高效的 CSS 是一项重要的技能,需要考虑的问题包括但不限于以下几点:

  1. 选择器性能:尽量避免使用过于复杂的选择器,尤其是深度嵌套的选择器,因为它们会影响浏览器的渲染性能。通常来说,ID 选择器、类选择器和标签选择器的性能都比较好。

  2. 避免冗余代码:尽量避免编写重复的 CSS 规则,可以使用 CSS 预处理器的混合或 CSS 自定义属性来重用 CSS 规则。

  3. 代码组织:合理地组织你的 CSS 代码,可以提高代码的可读性和可维护性。你可以按功能、组件或者页面来组织你的 CSS 代码。

  4. 使用 CSS 预处理器:CSS 预处理器如 Sass、Less 和 Stylus 等,可以帮助你编写更加结构化、可维护的 CSS 代码。

  5. 媒体查询的使用:媒体查询可以帮助你创建响应式的布局,但是过度使用媒体查询可能会导致 CSS 代码变得复杂。一个好的做法是先设计移动版的布局,然后使用媒体查询来适应更大的屏幕。

  6. CSS 动画性能:并非所有的 CSS 属性都适合用来创建动画,一些属性的变化可能会导致浏览器重新布局或者重绘,这会影响动画的性能。通常来说,使用 transformopacity 来创建动画的性能比较好。

  7. 使用外部样式表:将 CSS 代码放在外部样式表中,可以利用浏览器的缓存机制,减少页面的加载时间。

  8. 减少 HTTP 请求:可以使用 CSS 雪碧图或者字体图标来减少 HTTP 请求的数量,提高页面的加载速度。

以上就是编写高效 CSS 时需要考虑的一些问题,希望对你有所帮助。

14、解释下浏览器是如何判断元素是否匹配某个CSS选择器?

浏览器判断元素是否匹配某个 CSS 选择器的过程,实际上是从右向左进行的。这种方式可以更快地确定是否有元素匹配选择器。

例如,对于选择器 div p span,浏览器首先会查找所有的 <span> 元素,然后向上查找其父元素是否有 <p> 元素,如果有,再继续向上查找其父元素中是否有 <div> 元素。如果所有条件都满足,则该 <span> 元素就匹配这个选择器。

这种从右向左的匹配方式的优点是,可以尽早地排除大部分不匹配的元素。因为页面中的大部分元素都是叶子节点(即没有子元素的节点),例如 <span><a><img> 等,如果从左向右匹配,可能会浪费大量时间去检查这些元素和其子元素,但是实际上它们大部分都不会匹配选择器。从右向左匹配则可以尽早地排除这些元素,提高匹配的效率。

需要注意的是,虽然选择器的匹配效率很重要,但是通常不会对页面的性能产生太大影响。相比之下,选择器的复杂性以及相应规则的数量和复杂性,对页面的性能影响更大。因此,编写简单、高效的 CSS 选择器是很重要的。

由于内容太多,更多内容以链接形势给大家,点击进去就是答案了

15. CSS浮动元素引起的问题和解决方法是什么?

16. 解释一下 CSS Sprite,以及如何在页面或网站中使用它 ?

17. 简要描述CSS中 content属性的作用 ?

18. 简述你对IFC规范的理解?

19. 简述GFC规范的理解 ?

20. 简述对FFC规范的理解?

21. 简述CSS什么是外边距重叠?重叠的结果是什么?

22. 简述CSS中,自适应的单位都有哪些?

23. 简述rem和em的区别 ?

24. 解释first-child与first-of-type的区别是什么?

25. 简述content-box盒模型 ?

26. 简述padding-box盒模型 ?

27. 简述Animation属性值有哪些?

28. CSS如何把一个元素旋转30°?

29. 简述CSS盒阴影的原理 ?

30. 简述CSS3中 transition属性值及含义 ?

31. 简述CSS中background-clip和 background- origin的区别?

32. CSS如何实现文本换行?

33. 简述CSS如何实现超出隐藏省略?

34. 简述CSS3实现动画的方式 ?

35. 简述CSS实现自适应正方形、等宽高比矩形 ?

36. 简述CSS实现两栏布局的方式 ?

37. 简述什么是Grid布局?

38. 简述元素⽔平垂直居中的方法有哪些?如果元素不定宽高呢?

39. 简述如何实现单行/多行文本溢出的省略样式 ?

40. 简述深入理解设备像素、CSS像素、设备独立像素、 DPR、PPI之间的区别与适配⽅案 ?

41. 简述如何使用Animation 实现自定义动画 ?

42. 简述transform、translate、transition 分别是什么属性?CSS 中常 用的实现动画方式 ?

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

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

相关文章

Eclipse_01_如何设置代码文件背景颜色为护眼沙绿色

设置方法 Window --> Preference 参考文档 参考文档 1

uni-app ucharts中饼图与圆环图区别

项目情况&#xff1a; uni-app的用于移动端H5项目&#xff0c;包使用uni_modules目录存放。 图表引用ucharts中的echarts配置的组件方式 区别1 饼图与圆环图在echarts使用的配置都是pie类型。但是配置raduis使用&#xff1a; radius: [40%, 70%] 区别2 组件type指明&#xf…

Linux 非阻塞网络IO模式

非阻塞网络IO模式介绍 当用户线程发起一个 read 操作后&#xff0c;并不需要等待&#xff0c;而是马上就得到了一个结果。如果结果是一个 error 时&#xff0c;它就知道数据还没有准备好&#xff0c;于是它可以再次发送 read 操作。一旦内核中的数据准备好了&#xff0c;并且又…

修复泰坦陨落2缺少msvcr120.dll的5种方法,亲测有效

游戏《泰坦陨落2》缺少msvcr120.dll的问题困扰着许多玩家。这个问题的主要原因可能是系统环境不完整、软件或游戏版本不匹配、DLL文件丢失或损坏以及杀毒软件误判等。msvcr120.dll是Microsoft Visual C 2013 Redistributable的一个组件&#xff0c;它包含了许多运行库文件&…

Linux——安装ESMF和ESMPY

1、下载esmf git clone https://githubfast.com/esmf-org/esmf.git2、安装 2.1 指定文件路径、安装路径和编译器 2.1.1Gfortran编译器 export ESMF_DIR/home/yuh/ESMF export ESMF_INSTALL_PREFIX/home/yuh/ESMF/esmf export ESMF_COMMmpiuni export ESMF_COMPILERgfortran…

BMS专有名词英文总称

1、BMS : battery management system 电池管理系统 2、EMS : energy management system 能源管理系统 3、PCS : power conversion system 储能变流器 4、SOC : state of charge 剩余容量 5、SOH : state of healthy 电池健康状态 6、E…

【百度PARL】强化学习笔记

文章目录 强化学习基本知识一些框架Value-based的方法Q表格举个例子 强化的概念TD更新 Sarsa算法SampleSarsa Agent类 On_policy vs off_policy函数逼近与神经网络DQN算法DQN创新点DQN代码实现model.pyalgorithm.pyagent.py总结&#xff1a;举个例子 实战 视频&#xff1a;世界…

elasticsearch|大数据|低版本的elasticsearch集群的官方安全插件x-pack的详解

前言&#xff1a; elasticsearch集群说实话是比较好部署的&#xff0c;也就是从开箱即用这方面来说&#xff0c;是比较简单的&#xff0c;大体步骤就是首先处理好集群的环境&#xff0c;比如时间服务器&#xff0c;域名映射&#xff0c;内核层面的文件打开数这些小问题&#x…

力扣刷题日常(一)

136.只出现一次的数字 给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间 示例 1 &#xf…

Js中浅拷贝和深拷贝有什么区别,如何实现?

在 JavaScript 中&#xff0c;浅拷贝&#xff08;Shallow Copy&#xff09;和深拷贝&#xff08;Deep Copy&#xff09;是两种常见的数据拷贝方式&#xff0c;它们的区别在于拷贝的程度。 浅拷贝&#xff1a;浅拷贝仅拷贝对象或数组的引用&#xff0c;而不是拷贝其内部的值。这…

苏宁开放平台API接口全攻略:掌握电商数据,提升业务效率

一、概述 苏宁平台提供了丰富的API接口&#xff0c;用于开发人员与平台进行交互&#xff0c;实现各种功能。本文将介绍苏宁平台API接口的基本概念、使用方法和注意事项&#xff0c;帮助开发人员更好地利用这些接口&#xff0c;提高开发效率和质量。 二、API接口介绍 商品详情…

html之CSS的高级选择器应用

文章目录 一、CSS高级选择器有哪些呢&#xff1f;二、高级选择器的应用1、层次选择器后代选择器子选择器相邻兄弟选择器通用兄弟选择器 2、结构伪类选择器&#xff08;不常用&#xff09;3、属性选择器E[attr]E[attrval]E[attr^val]E[attr$val]E[attr*val] 一、CSS高级选择器有…

Golang中方法定义及使用

一、介绍 方法是与特定类型关联的函数。它允许在类型上执行操作&#xff0c;并可以访问和修改该类型的字段。方法的定义包括接收者类型、方法名和参数列表。接收者类型可以是结构体、接口或其他自定义类型。 方法的接收者可以是值或指针类型。如果接收者是值类型&#xff0c;…

excel该如何实现生成条形码/二维码?

如何在Excel中制作条形码/二维码&#xff1f; 1.首先&#xff0c;打开电脑上的Excel。进入后&#xff0c;在上方菜单栏中找到并点击“开发工具”。如果没有找到开发工具&#xff0c;就先点击“文件”&#xff0c;在弹出菜单中再点击“选项”。 2.打开Excel选项窗口后&#xff0…

【Flink-cdc-Mysql-To-Kafka】使用 Flinksql 利用集成的 connector 实现 Mysql 数据写入 Kafka

【Flink-cdc-Mysql-To-Kafka】使用 Flinksql 利用集成的 connector 实现 Mysql 数据写入 Kafka 1&#xff09;环境准备2&#xff09;准备相关 jar 包3&#xff09;实现场景4&#xff09;准备工作4.1.Mysql4.2.Kafka 5&#xff09;Flink-Sql6&#xff09;验证 1&#xff09;环境…

java:Lambda函数式编程

作为一个前端同学&#xff0c;今天惊叹的发现&#xff0c;原来 java 也可以使用函数式编程&#xff0c;赶紧来看看怎么玩 简介 当Java 8引入Lambda表达式和函数式编程特性时&#xff0c;它开启了一个全新的编程范式。这些功能使得Java语言更加现代、灵活&#xff0c;并支持更…

VuePress安装及使用——使用 Markdown 创建你自己的博客网站和电子书

目录 前言一、依赖环境二、vuepress 安装和使用1.初始化2.将 VuePress 安装为本地依赖3. package.json 中添加脚本4. 新建 docs 文件夹5.启动6. 效果 三、进阶使用1.新增配置文件2.安装搜索插件3.config.js 中增加配置4.效果展示5.注意 四、使用主题1.安装2. 目录结构说明&…

MeterSphere 和 Yapi 接口测试功能对比

一、产品介绍 MeterSphere 是一站式开源持续测试平台&#xff0c;涵盖测试跟踪、接口测试、UI 测试和性能测试等&#xff0c;全面兼容 JMeter、Selenium 等主流开源标准&#xff0c;有效助力开发和测试团队在线共享协作&#xff0c;实现端到端的测试管理跟踪可视化、自动化测试…

Hadoop3.x完全分布式模式下slaveDataNode节点未启动调整

目录 前言 一、问题重现 1、查询Hadoop版本 2、集群启动Hadoop 二、问题分析 三、Hadoop3.x的集群配置 1、停止Hadoop服务 2、配置workers 3、从节点检测 4、WebUI监控 总结 前言 在大数据的世界里&#xff0c;Hadoop绝对是一个值得学习的框架。关于Hadoop的知识&…

git修改远程commit信息

git 修改远程commit信息 如果你已经把本地commit的信息push到远程了&#xff0c;此时需要修改远程中的commit信息 第一步&#xff1a;git log 查看提交的信息,看下提交的commit日志 如下入所示 第二步&#xff1a;然后确定你需要修改的那一次commit&#xff0c;比如&#xf…