文章摘要

HTML：

1、使用 < model-viewer > 网络组件，加载 3D 模型

< model-viewer > 组件 可让您将 3D 模型托管在您自己的网站上 并 添加到您的网站。 该网络组件支持自适应设计 以及一些设备上的增强现实等应用场景。 它包含无障碍功能、渲染质量和 互动。

代码示例：

<!-- Import the component -->
<script
  type="module"
  src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer id="mv-shark" src="shark.glb" camera-controls></model-viewer>

我们还可以添加动态效果和互动元素（auto-rotate和camera-controls）

<model-viewer src="shark.glb" auto-rotate camera-controls></model-viewer>

CSS：

1、滚动贴靠（在图片滚动的时候，内容总是会完整的显示在屏幕上）

让我们来看看代码：

.snaps {
  /*允许在水平方向上出现滚动条。如果内容超出了容器的宽度，用户可以通过滚动来查看超出部分。*/
  overflow-x: scroll;
  /*
  	这个属性启用滚动捕捉功能。
  	x 表示捕捉发生在水平方向，
  	mandatory 表示滚动时必须对齐到捕捉点。
  	也就是说，当用户滚动时，内容会自动对齐到最近的捕捉点。
  */
  scroll-snap-type: x mandatory;
  /*
  	这个属性控制在滚动容器的边缘时的行为。
  	contain 表示在达到滚动容器的边缘时，滚动不会“溢出”到父容器。
  	这有助于防止在滚动到边缘时触发其他滚动行为。
  */
  overscroll-behavior-x: contain;
}

.snap-target {
  /*
  	这个属性定义了滚动捕捉点的位置。
  	center 表示当滚动到这个元素时，它会在滚动容器的中心对齐。
  	换句话说，使用这个类的元素会在滚动时被捕捉到容器的中心位置。
  */
  scroll-snap-align: center;
}

.snap-force-stop {
  /*
  	这个属性用于控制滚动捕捉的行为。
  	always 表示在滚动时，使用这个类的元素会强制停止滚动并对齐到捕捉点。
  	这意味着即使用户快速滚动，滚动也会在这个元素上停止并对齐。
  */
  scroll-snap-stop: always;
}

2、快速的将多个内容叠加在同一位置（而不需要费时间的使用定位去控制）

/**/
.pile {
  display: grid;
  /*
  	同时设置 align-content 和 justify-content。
  	在这里，它将网格内容在垂直和水平方向上都居中对齐。
  */
  place-content: center;
}
/*
	所有直接子元素都将重叠在网格的第一行和第一列
	并且整个 .pile 容器会将它们居中显示。
*/
.pile > * {
  /*
  	这条规则将每个直接子元素放置在网格的第一行和第一列。
  */
  grid-area: 1/1;
}

---

测试：

1、从技术角度来看，测试或不测试

值得注意的是，无论您是执行单元、集成还是端到端测试，具体的模式和要点都至关重要。

1.1 力求简单：

在测试时要优先考虑简单性，这一点至关重要。测试就应该像是助理，而不是复杂的数学公式。换言之，您应该能够一眼就明白测试的意图。

事实上，测试越复杂，简化就越关键。实现此目的的方法之一是使用扁平测试设计。

在这种设计中，测试尽可能简单，并且仅测试必要的内容。这意味着每个测试应只包含一个测试用例，并且测试用例应侧重于测试单个特定功能或特性。

从这个角度来看待问题：在读取失败测试时，应该能够轻易找出问题所在。因此，确保测试简单且易于理解非常重要。这样您就可以在问题出现时快速发现并解决问题。

1.2 不要测试实现详情

测试中的一个常见问题是，测试通常用于测试实现细节（您的代码用户通常不会使用、看到甚至了解的内容）

在规划测试时，请务必考虑用户将看到的内容或与之互动的内容，并让测试依赖于这些内容，而不是实现细节。