你能解释一下下面代码中的 CSS 吗

Question

能否请您解释一下这段代码中的 CSS，我的意思是水平滚动输出是如何产生的？

body {
  margin: 0;
}

<div style="max-width: 200vw; height: 100vh; overflow-x: scroll">
  <div class="parent" style="width: 200vw; height: 100vw">
    <div class="child" style="float: left; width: 100vw; height: 100vh">Hi</div>
    <div class="child" style="float: right; width: 100vw; height: 100vh">
      Hi
    </div>
  </div>
</div>

Answer 1

正如您在下面的代码片段中看到的，我有 2 个 div。

一个parent和一个child.

Parent 的宽度为 200px，而 child 的宽度为 300px，所以显然 child 会溢出。所以为了避免溢出，我们提供了overflow-x: scroll

.parent {
  max-width: 200px;
  overflow-x: scroll;
  padding: 10px;
  border: 1px solid #ddd;
}

.child {
  width: 300px;
  padding: 10px;
  background-color: blue;
}

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

你能解释一下下面代码中的 CSS 吗

Can you explain me the CSS in the below code

css

animation

css-position