前端常见面试题之html和css篇

文章目录

  • 一、html
    • 1. 如何理解html语义化
    • 2. 说说块级元素和内联元素的区别
  • 二、css
    • 1. 盒模型的宽度offsetWidth如何计算
    • 2. box-sizing:border-box有什么用
    • 3. margin的纵向重叠问题
    • 4. 谈谈你对BFC的理解和应用
    • 5. 清除浮动有哪些方式
    • 6. 使用flex布局实现骰子3
    • 7.position的absolute和relative定位问题
    • 8. 水平居中的实现方式
    • 9.水平垂直居中的实现方式
    • 10. line-height继承问题
    • 11. rem，em，px
    • 12. vw和vh

一、html

1. 如何理解html语义化

HTML语义化是指在编写HTML代码时，使用适当的标签来描述内容的含义和结构。

语义化的好处包括：

  1. 增强代码的可读性;
  2. 提高搜索引擎的理解能力;
  3. 方便开发者阅读和维护代码;
  4. 以及更好地支持无障碍访问等。

理解HTML语义化的关键在于正确使用HTML标签来表示内容的含义。以下是一些常见的HTML标签和它们的语义含义：

  1. <header> 标签用于表示页面或区块的头部，比如页面的标题或导航栏。

  2. <nav> 标签用于表示导航栏。

  3. <main> 标签用于表示页面的主要内容。

  4. <article> 标签用于表示独立的文章内容。

  5. <section> 标签用于表示页面或文章的分段内容。

  6. <aside> 标签用于表示与主要内容相关但不属于主要内容的附加信息。

  7. <footer> 标签用于表示页面或区块的底部，比如版权信息或联系方式。

  8. <h1> - <h6> 标签用于表示标题，其中 <h1> 表示最高级别的标题。

  9. <p> 标签用于表示段落。

  10. <ul> 和 <ol> 标签用于表示无序列表和有序列表。

  11. <li> 标签用于表示列表中的每一项。

  12. <a> 标签用于表示链接。

  13. <img> 标签用于表示图片。

  14. <table> 标签用于表示表格。

举例对比说明，假设有一个网页包含一个标题、一段文字内容和两张图片：

  1. 非语义化的HTML代码：
<div class="header">网页标题</div>
<div class="content">这是内容</div>
<div class="image"><img src="image1.jpg" alt="图片1"></div>
<div class="image"><img src="image2.jpg" alt="图片2"></div>

这段代码使用了一些无具体含义的<div>标签来表示页面的结构。这样的代码在没有样式的情况下很难理解页面结构，也不利于搜索引擎对页面内容的分析。

  1. 语义化的HTML代码：
<header>网页标题</header>
<main>
  <article>
    <h1>文章标题</h1>
    <p>这是内容</p>
  </article>
  <figure>
    <img src="image1.jpg" alt="图片1">
    <figcaption>图片1的描述</figcaption>
  </figure>
  <figure>
    <img src="image2.jpg" alt="图片2">
    <figcaption>图片2的描述</figcaption>
  </figure>
</main>

这段代码使用了具有明确含义的HTML标签来描述页面结构和内容。<header>表示网页的标题，<main>表示主要内容，<article>表示一篇文章等等。这样的代码清晰易读，有助于理解网页结构和内容。

通过对比可以看出，语义化的HTML代码更直观、易理解，也更便于网页的维护和SEO优化。

2. 说说块级元素和内联元素的区别

在HTML中，块级元素和内联元素是两种不同的元素类型。

块级元素（Block-level elements）：

  • 块级元素通常会在页面中生成一个独立的块，占据一行或者多行的空间。
  • 常见的块级元素有<div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>等。

内联元素（Inline elements）：

  • 内联元素不会在页面中生成一个独立的块，而是与其他元素在一行显示。
  • 常见的内联元素有<span>, <a>, <strong>, <em>, <img>, <input>, <br>等。

块级元素和内联元素的区别主要体现在以下几个方面：

  1. 显示方式：块级元素以块的形式显示，即自动换行且占据一整行或多行的宽度；内联元素则与其他元素在一行上显示，不会换行。
  2. 盒模型：块级元素可以设置宽度、高度、内外边距等样式属性，可以直接控制元素的盒模型；内联元素的宽度和高度由其内容决定，不能直接设置。
  3. 默认样式：块级元素的默认样式是display: block;，而内联元素的默认样式是display: inline;。
  4. 嵌套规则：块级元素可以包含其他块级元素和内联元素；内联元素不能包含块级元素，只能包含其他内联元素或者文本内容。

需要注意的是，可以通过CSS的属性display来改变元素的显示方式，将块级元素设置为内联元素或将内联元素设置为块级元素。

二、css

1. 盒模型的宽度offsetWidth如何计算

盒模型的宽度offsetWidth是指一个元素的整体宽度，包括内容区域的宽度(content)、内边距（padding）以及边框（border）。

在计算offsetWidth时，浏览器会将元素的内容区域宽度、内边距宽度和边框宽度都考虑在内。
举例说明：

假设有一个 div 元素，设置了如下样式：

div {
  width: 300px;
  padding: 10px;
  border: 1px solid black;
}

这个 div 元素的盒模型宽度可以这样计算：

  1. 内容宽度：指定的宽度为 300px。

  2. 内边距和边框宽度：左右两侧的内边距为 10px，上下两侧的内边距为 10px；四条边的边框宽度为 1px。

因此，盒模型的总宽度为 300px + 2 * 10px + 2 * 1px = 322px。

2. box-sizing:border-box有什么用

"box-sizing: border-box;"是一个用于 CSS 的属性，它指定了元素的盒子模型计算方式，并将CSS的宽度（width）和高度（height）的计算方式修改为包括边框（border）和内边距（padding）的计算。

举例来说，如果一个元素宽度被设置为200px并且应用了一些边框和内边距，如果没有使用"box-sizing: border-box;"属性，那么元素的实际宽度将会变大，以包括边框和内边距的大小。而如果使用了"box-sizing: border-box;"属性，元素的实际宽度将会保持为200px，并且边框和内边距将会减少自动适应。

下面是一个示例，展示了使用和不使用"box-sizing: border-box;"属性的区别：

HTML:

<div class="example"></div>

CSS:

.example {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  background-color: lightgray; 
  box-sizing: border-box;
}

在上述例子中，使用了"box-sizing: border-box;“属性，因此元素的实际宽度仍然为200px，包括边框和内边距。如果没有使用该属性，元素的实际宽度将会变为230px（宽度 + 左右边距 + 左右边框），因为默认的"box-sizing"属性值是"content-box”，即只包括内容。

这个属性特别有用的一个场景是当需要制作一个带有固定宽度的网格系统时，可以使用该属性确保每列总宽度都是固定的，而不会因为边框和内边距的存在而超出指定的宽度范围。

3. margin的纵向重叠问题

纵向重叠问题是指当相邻的元素都设置了上下边距（margin），并且上一个元素的下边距与下一个元素的上边距之和超过了一定的阈值（常为负数），则两者之间的垂直间距会取两个边距值中的较大者。

举一个具体的例子，假设有两个相邻的块级元素，分别是div1和div2，它们的CSS样式如下：

div1 {
  margin-bottom: 20px;
}

div2 {
  margin-top: 30px;
}

在正常情况下，div1和div2之间的垂直间距应该是20px+30px=50px。然而，因为它们的边距之和超过了一定的阈值，实际渲染结果会取两个边距值中的较大者，即30px，所以div1和div2之间的垂直间距为30px。

这种纵向重叠问题通常出现在嵌套的块级元素中，比如一个列表中的每个列表项（li）都设置了上下边距，而整个列表外又设置了上下边距。当边距值的和超过了阈值时，列表项之间会出现较大的垂直间距，而不是累加所有边距值的和。为了避免这个问题，可以使用其他的方式来实现元素之间的间距，如padding、border等。

4. 谈谈你对BFC的理解和应用

BFC是块格式化上下文（Block Formatting Context）的缩写，BFC可以看作是一个封闭的容器，容器内的元素布局不会影响到容器外的元素。

形成bfc的条件

条件描述
根元素根元素（html）默认就是一个 bfc
浮动元素浮动元素（float不为none）
绝对定位元素绝对定位元素（position为absolute和fixed）
display为inline-block、table-cell等display为inline-block、table-cell等
overflow不为visibleoverflow不为visible的块级元素

常见的bfc应用场景：

  1. 清除浮动：当容器内部有浮动元素时，容器的高度会塌陷，不会撑开容器。我们可以通过创建一个BFC来清除浮动，使得容器能够正常显示高度。可以通过给容器设置overflow: hidden或者display: table来创建BFC。

  2. 防止外边距合并：在正常流布局中，相邻的块级元素的垂直外边距会发生合并，导致元素之间的间距变大。但是在BFC中，相邻块级元素的垂直外边距不会合并。可以通过给元素创建BFC来防止外边距合并，可以通过设置float、position: absolute、overflow: hidden等属性来创建BFC。

  3. 实现多列布局：BFC可以实现多列布局，通过给容器设置column-count或者column-width属性，可以将容器内的内容按照多列进行布局。由于每一列都处于独立的BFC中，因此列与列之间的布局互不影响。

5. 清除浮动有哪些方式

清除浮动的方式有以下几种：

  1. 使用clearfix
    需要在浮动元素的父元素中添加clearfix类，然后通过该类设置clear:both属性来清除浮动。示例代码如下：
<div class="clearfix">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}
  1. 使用空元素添加clear属性
    在浮动元素的父元素中添加一个空元素，然后使用clear属性来清除浮动。示例代码如下：
<div class="clear-float">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
  <div style="clear: both;"></div>
</div>
  1. 使用overflow:hidden
    在浮动元素的父元素中设置overflow属性为hidden，可以使父元素自动包含浮动子元素，从而清除浮动。示例代码如下：
<div class="float-parent">
  <div class="float-left">左浮动元素</div>
  <div class="float-right">右浮动元素</div>
</div>

.float-parent {
  overflow: hidden;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

6. 使用flex布局实现骰子3

效果如下：
在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>骰子三点布局</title>
    <style>
      .dice {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50px;
        height: 50px;
        border: 1px solid #000;
      }

      .dot {
        width: 10px;
        height: 10px;
        background-color: #000;
        border-radius: 50%;
        margin: 2px;
      }

      .dot:nth-child(1) {
        align-self: flex-start;
      }

      .dot:nth-child(3) {
        align-self: flex-end;
      }
    </style>
  </head>
  <body>
    <div class="dice">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>
  </body>
</html>

主要考察的是交叉轴的align-self属性。

7.position的absolute和relative定位问题

position:absolute使元素的位置相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于最初的包含块（通常是浏览器窗口）进行定位。使用position:absolute时，可以使用top、bottom、left和right属性来指定元素相对于其定位父元素的偏移位置。绝对定位的元素会完全从正常的文档流中脱离，并且不保留其空间

position:relative则使元素相对于正常文档流进行定位。在使用position:relative时，可以使用top、bottom、left和right属性来指定元素相对于其原始位置的偏移。相对定位不会从元素在正常文档流中的位置中删除元素。相对定位的元素仍然占据其原始的空间，因此周围的元素不会发生布局变化

为什么常用“子绝父相”进行定位布局？

"子绝父相"是指子元素使用position:absolute进行定位，父元素使用position:relative进行定位的布局方式。这种方式常用于构建复杂的页面布局，具有一些优点：

  1. 父元素的position:relative会创建一个新的定位上下文，使得子元素相对于其定位，而不会影响其他元素的布局。
  2. 子元素的position:absolute允许完全自由的定位。可以通过指定top、bottom、left和right属性来控制子元素在父元素中的精确位置。
  3. 可以方便地创建重叠和层叠效果，使得布局更加灵活。

举个例子，假设我们有以下HTML代码：

<div class="parent">
  <div class="child"></div>
</div>

CSS代码如下：

.parent {
  position: relative;
  height: 200px;
  width: 200px;
  background-color: lightblue;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 50px;
  width: 50px;
  background-color: red;
}

在这个例子中，父元素（class=“parent”）被设置为position:relative，这意味着子元素（class=“child”）将相对于父元素进行定位。子元素使用position:absolute进行定位，并且设置top和left属性使其与父元素的左上角偏移50像素。

8. 水平居中的实现方式

  1. 使用text-align属性：可以在父元素上设置text-align属性为"center"，将其子元素水平居中对齐。
.parent {
  text-align: center;
}

.child {
  display: inline-block;
}
  1. 使用margin属性：通过设置子元素的左右margin值为"auto"，可以将其水平居中对齐。
.parent {
  width: 300px;
}

.child {
  margin-left: auto;
  margin-right: auto;
}
  1. 使用flexbox布局：使用flexbox布局可以轻松实现水平居中对齐。
.parent {
  display: flex;
  justify-content: center;
}

.child {
  /* no additional styling needed */
}
  1. 使用grid布局：通过将子元素放置在父元素的中心单元格中，可以实现水平居中对齐。
.parent {
  display: grid;
  place-items: center;
}

.child {
  /* no additional styling needed */
}
  1. 使用绝对定位与transform属性：通过将子元素的左右偏移设置为50%并且使用transform属性的translateX(-50%)将其平移回来可以实现水平居中对齐。
.parent {
  position: relative;
}

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

9.水平垂直居中的实现方式

  1. 使用绝对定位和transform属性：

    <div class="container">
  <div class="centered">
    <!-- 内容 -->
  </div>
</div>

.container {
  position: relative;
}

.centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

    将父容器设置为相对定位，然后将子容器设置为绝对定位，通过设置left和top为50%，再使用transform属性将内容向左和向上平移50%的宽度和高度，从而实现水平垂直居中对齐。

  2. 使用Flexbox布局：

    <div class="container">
  <div class="centered">
    <!-- 内容 -->
  </div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

    将父容器设置为Flex布局，并使用justify-content: center;和align-items: center;属性使内容在水平和垂直方向上都居中对齐。

  3. 设置容器的text-align属性为center，使文本在容器中水平居中
    根据目标元素的高度，调整line-height的值，使得目标元素在容器中垂直居中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>垂直居中</title>
    <style>
      .container {
        height: 200px;
        line-height: 200px;
        text-align: center;
        border: 1px solid black;
      }

      .target {
        border: 1px solid red;
        display: inline-block;
        line-height: normal;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="target">居中文本</div>
    </div>
  </body>
</html>
  1. 绝对定位加margin:auto实现
    可以使用绝对定位和margin:auto来实现水平垂直居中，可以按照以下步骤进行操作：
  • 父元素需要设置position: relative，用于作为相对定位的基准。
  • 子元素需要设置position: absolute，以便于进行绝对定位。
  • 子元素设置top: 0，left: 0，bottom: 0，right: 0，这样可以将子元素拉伸至父元素的边界。
  • 子元素设置margin: auto，让子元素在父元素中居中。

效果如下:
在这里插入图片描述
示例代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>margin:auto居中</title>
    <style>
      .parent {
        position: relative;
        width: 600px;
        height: 500px;
        background-color: lightgray;
      }

      .child {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 200px;
        height: 100px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="child">垂直水平居中</div>
    </div>
  </body>
</html>

10. line-height继承问题

1.当父元素的line-height属性设置为具体像素值50px时，子元素会继承父元素的line-height属性值。无论子元素的font-size属性值是多少，它的行高将始终是50px。

例如，假设父元素的line-height设置为50px，子元素的font-size设置为20px，那么子元素的行高也将是50px。

<div class="parent">
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

CSS样式如下：

.parent {
  line-height: 50px;
}

.child {
  font-size: 20px;
}

2.当父元素的line-height属性设置为数值3时，子元素会继承该比例。具体取决于子元素的font-size属性值。

假设父元素的line-height属性值为3，子元素的font-size属性值为16px。那么子元素的行高计算如下：

  1. 子元素的行高计算公式是：line-height = 父元素的line-height * 子元素的font-size。
  2. 父元素的line-height属性值是3，子元素的font-size属性值是16px，所以子元素的行高计算公式是：line-height = 3 * 16px。
  3. 子元素的行高计算结果是48px。
    因此，子元素的行高为48px。这意味着子元素的文本内容将在每行之间保留48px的空白区域。

如下

<div class="parent">
  <p class="child">这是子元素</p>
</div>

CSS代码：

.parent {
  font-size: 20px;
  line-height: 3;
}

.child {
  font-size: 16px;
}

3.当父元素的line-height属性设置为百分比200%时，子元素会继承父元素的line-height属性计算后的结果。具体取决于父元素的font-size属性值。

<style>
    .parent {
        font-size: 20px;
        line-height: 200%;
    }
    .child {
        font-size: 16px;
    }
</style>

<div class="parent">
    <div class="child">子元素的文本内容。</div>
</div>

在上述代码中，父元素的line-height属性值设置为200%（即2倍的字体大小），父元素的font-size属性值为20px。子元素的font-size属性值为16px。

根据继承机制和计算规则：

  1. 父元素的line-height属性值会以父元素的font-size属性值为基准进行计算。即父元素的line-height计算结果为20px * 200% = 40px。
  2. 子元素会继承父元素的计算后的line-height属性值。因此，子元素的line-height属性值也为40px。

11. rem，em，px

在CSS中，rem、em和px都是用于指定元素大小的单位。

  1. rem（根元素相对单位）：rem单位是相对于根元素（即元素）的字体大小的单位。如果根元素的字体大小为16px，则1rem等于16px。rem单位的主要优势是能够根据根元素的字体大小进行自适应调整，适用于响应式设计。

  2. em（相对父元素单位）：em单位是相对于最近的父元素的字体大小的单位。如果父元素的字体大小为16px，则1em等于16px。em单位与rem单位不同之处在于，它是根据父元素的字体大小而不是根元素的字体大小进行计算的。因此，em单位也可以用于实现相对父元素的布局。

  3. px（像素单位）：px单位是像素单位，1px表示屏幕上的一个物理像素，不受其他因素影响。px单位是固定大小的单位，无法根据用户设置进行调整。由于设备显示的物理像素不同，使用px单位可能导致在不同设备上显示不一致的问题。

总结：

  • rem单位根据根元素的字体大小进行调整，适用于响应式设计。
  • em单位根据父元素的字体大小进行调整，适用于相对布局。
  • px单位是固定的像素单位，不受其他因素影响，适用于精确布局。

12. vw和vh

在CSS中，vw（Viewport Width）和vh（Viewport Height）是相对于视口大小的单位。

  • vw：1vw等于视口宽度的1%。例如，如果视口的宽度是1000px，那么1vw就等于10px。
  • vh：1vh等于视口高度的1%。例如，如果视口的高度是800px，那么1vh就等于8px。

vw 和 vh 单位的用途是根据设备的视口大小（即浏览器窗口大小）来调整元素的尺寸。这对于创建响应式布局非常有用，可以使元素在不同设备和窗口尺寸下保持一致的比例。

例如，如果你希望一个元素的宽度占据视口宽度的 50%，你可以使用以下代码：

.element {
  width: 50vw;
}

同样地，如果你希望一个元素的高度占据视口高度的 30%，你可以使用以下代码：

.element {
  height: 30vh;
}

通过使用 vw 和 vh 单位，你可以创建具有自适应性质的布局，使得网页在不同大小的屏幕上都能良好地展示。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

喜报！巨蟹数科荣获国家“高新技术企业”认定！

喜报！巨蟹数科荣获国家“高新技术企业”认定！

根据《高新技术企业认定管理办法》&#xff08;国科发火〔2016〕32 号&#xff09;和《高新技术企业认定管理工作指引》&#xff08;国科发火〔 2016〕195号&#xff09;有关规定&#xff0c;经省高新技术企业认定管理机构组织企业申请、专家评审等程序&#xff0c;并经全国高新…
阅读更多...
Linux汇编语言编程-机器语言

Linux汇编语言编程-机器语言

机器语言是处理器看到的语言。 在获取-执行周期【fetch-execute cycle 】中获取的字节是机器码的字节。汇编语言可以定义为一种使程序员能够控制机器码的语言。汇编语言指定机器码。如果不熟悉机器语言&#xff0c;汇编语言的这一特性是不明显的。本章介绍 x86 机器码的主要特征…
阅读更多...
一句话木马是什么？代码实例及绕过方法

一句话木马是什么？代码实例及绕过方法

一句话木马是指一种短小的、通常只有一行代码的恶意软件&#xff0c;它被用来在目标系统中执行攻击者的命令或代码。这种类型的木马通常通过各种途径被注入到目标系统中&#xff0c;一旦成功运行&#xff0c;攻击者就可以远程控制受感染的系统。一句话木马的目的包括窃取敏感信…
阅读更多...
RPC（3）：HttpClient实现RPC之GET请求

RPC（3）：HttpClient实现RPC之GET请求

1HttpClient简介 在JDK中java.net包下提供了用户HTTP访问的基本功能&#xff0c;但是它缺少灵活性或许多应用所需要的功能。 HttpClient起初是Apache Jakarta Common 的子项目。用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包&#xff0c;并且它支持 H…
阅读更多...
关于“Python”的核心知识点整理大全27

关于“Python”的核心知识点整理大全27

目录 10.5 小结 第&#xff11;1 章 测试代码 11.1 测试函数 name_function.py 函数get_formatted_name()将名和姓合并成姓名&#xff0c;在名和姓之间加上一个空格&#xff0c;并将它们的 首字母都大写&#xff0c;再返回结果。为核实get_formatted_name()像期望的那样工…
阅读更多...
【超图】SuperMap iClient3D for WebGL/WebGPU ——地形影像

【超图】SuperMap iClient3D for WebGL/WebGPU ——地形影像

作者&#xff1a;taco 号外&#xff01;号外&#xff01;开新坑了&#xff01;开新坑了&#xff01;对于一个代码小白来讲&#xff0c;设置可能是刚接触开发的人&#xff08;还没接触准备接触&#xff09;的人来说。对于读代码或是在对产品的使用上会存在许许多多的疑惑。接下来…
阅读更多...
uniapp笔记

uniapp笔记

/pages/component/swiper/swiper /pages/component/button/button navigator image 设置界面标题 页面跳转 设置TabBar 发起一个请求 网络请求
阅读更多...
计算机组成原理——中央处理器cpu1-20

计算机组成原理——中央处理器cpu1-20

1、中央处理器&#xff08;CPU&#xff09;是指什么。C A、 运算器 B、 控制器 C、 运算器和控制器 D、 运算器、控制器和主存储器 2、在CPU中跟踪指令后继地址的寄存器是什么。B A、 主存地址寄存器 B、 程序计数器 C、 指令寄存器 D、 状态条件寄存器 3、操作控制器的…
阅读更多...
VR党建：VR全景技术如何助力党建知识传播

VR党建：VR全景技术如何助力党建知识传播

导语&#xff1a; 随着科技的不断发展&#xff0c;虚拟现实技术逐渐深入人们生活的方方面面。VR全景技术作为一种全新的沉浸式体验方式&#xff0c;被广泛应用于娱乐、教育、医疗等领域。而在党建学习中&#xff0c;VR全景技术也展现出了巨大的潜力&#xff0c;成为了一种创新…
阅读更多...
项目中webpack优化配置（持续更新）

项目中webpack优化配置（持续更新）

项目中webpack优化配置 1. 开发效率&#xff0c; 体验 DLL&#xff08;开发过程中减少构建时间和增加应用程序的性能&#xff09; 使用 DllPlugin 进行分包&#xff0c;使用 DllReferencePlugin(索引链接) 对 manifest.json 引用&#xff0c;让一些基本不会改动的代码先打包…
阅读更多...
java-sec-code中的文件上传

java-sec-code中的文件上传

java-sec-code中的文件上传 这里仅讨论文件上传&#xff0c;不讨论后续利用(中间件解析漏洞等不做讨论) 任意文件伤害上传 any-->uploada.html-->upload访问any路由时&#xff0c;会出现upload.html的上传文件界面&#xff0c;指向upload路由 GetMapping("/any&qu…
阅读更多...
java SSM教师业绩管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

java SSM教师业绩管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM教师业绩管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…
阅读更多...
谷歌发布Gemini 1.0，开启生成式AI模型新时代！

谷歌发布Gemini 1.0，开启生成式AI模型新时代！

&#x1f3a5; 屿小夏 &#xff1a; 个人主页 &#x1f525;个人专栏 &#xff1a; IT杂谈 &#x1f304; 莫道桑榆晚&#xff0c;为霞尚满天&#xff01; 文章目录 &#x1f4d1;前言一. Gemini的发布前期1.1 Gemini的准备1.2 DeepMnid 二. Gemini的三大杀手锏2.1 多模态能力2…
阅读更多...
Linux 音视频SDK开发实践

Linux 音视频SDK开发实践

一、兼容性适配处理 为什么需要兼容处理&#xff1f; 1、c兼容处理 主要有ABI兼容性问题&#xff0c;不同ubuntu系统依赖的ABI版本如下&#xff1a; ubuntu 18.04ubuntu 16.04ubuntu 14.04g7.55.44.8stdc版本libstdc.so.6.0.25libstdc.so.6.0.21libstdc.so.6.0.19GLIBCXXG…
阅读更多...
详解YOLOv5网络结构/数据集获取/环境搭建/训练/推理/验证/导出/部署

详解YOLOv5网络结构/数据集获取/环境搭建/训练/推理/验证/导出/部署

一、本文介绍 本文给大家带来的教程是利用YOLOv5训练自己的数据集&#xff0c;以及有关YOLOv5的网络结构讲解/数据集获取/环境搭建/训练/推理/验证/导出/部署相关的教程&#xff0c;同时通过示例的方式让大家来了解具体的操作流程&#xff0c;过程中还分享给大家一些好用的资源…
阅读更多...
电脑备忘录小工具怎么添加？怎么在电脑桌面添加备忘录？

电脑备忘录小工具怎么添加？怎么在电脑桌面添加备忘录？

作为一名天天用电脑办公的上班族&#xff0c;如果你需要对某个项目或问题进入深入思考&#xff0c;想要快速记录想法和思路&#xff0c;这时候会选择什么样的记事方式呢&#xff1f;如果你需要记录常用的工作文字内容、工作注意事项、项目流程、待办的工作安排等&#xff0c;用…
阅读更多...
vue 将后端返回的二进制流进行处理并实现下载

vue 将后端返回的二进制流进行处理并实现下载

什么是二进制流文件&#xff1f; 二进制文件是一种计算机文件格式&#xff0c;它的数据以二进制形式存储&#xff0c;与文本文件不同。二进制文件可以包含任意类型的数据&#xff0c;例如图像、音频、视频、可执行文件、压缩文件等&#xff0c;而文本文件则仅仅包含 ASCII 码或…
阅读更多...
PCL 点云匹配 之NICP(Normal ICP)

PCL 点云匹配 之NICP(Normal ICP)

一、概述 上面一篇中我们已经得出了一个结论&#xff0c;就是ICP虽然简单&#xff0c;但是也有明显的缺点 1、计算速度慢&#xff0c;收敛慢&#xff0c;迭代次数多 2、对内存的开销比较大 3、很容易陷入局部最优的困局 因此我们在经典ICP的基础上添加一两个约束&#xff1a; 第…
阅读更多...
鸿蒙开发之简单登录页面

鸿蒙开发之简单登录页面

Entry Component struct Index {State loading:booleanfalse;build() {Row() {Column({ space: 5 }) {Image($r("app.media.app_icon")).width(100).height(100).borderRadius(10).margin({top: 60})Text("登录界面").fontSize(40).fontWeight(FontWeight.…
阅读更多...
Apollo Planning——PathLaneBorrowDecider

Apollo Planning——PathLaneBorrowDecider

引用 组件数据缓存 DependencyInjector DependencyInjector&#xff1a;依赖注入器&#xff0c;这是一个过于专业的名词&#xff0c;来自软件设计模式的依赖倒置原则的一种具体实现方式&#xff0c;起到模块解耦作用。“依赖倒置原则(Dependence Inversion Principle)是程序要…
阅读更多...
最新文章

Copyright @ 2022~2023