CSS 战斗 #1 - Simply Square

我就是那种觉得只懂 HTML 和 CSS 不够的人。我知道这很不公平，我甚至不需要向自己证明什么。CSS 极其难，至少对我来说是这样。所以，我决定尝试一下。幸运的是，有一个很棒的互动网站，里面有 CSS 挑战。谁不喜欢挑战呢？

你需要仅给定一张图片来重新创建样式表。你会得到一个输出匹配度的百分比近似值，如果你用尽可能少的字符实现匹配，就能获得加分。

在看到第一道题的最短解法后，我决定不再纠结于高分，而是专注于学习。如果你想知道为什么，下面就是解法：

<img style=box-shadow:0+0+0+2in#b5e0ba,0+0+0+5in#5d3a3a>

因为分数要求答案第一题正确，第二题简短，所以我更倾向于关注正确性。而且由于 CSS 提供了非常强大的替代方案，我会尝试针对相同的问题给出不同的答案。

1.绝对值

第一个非常简单。我们创建一个 200 x 200 像素的正方形分区，并为其添加背景色。由于正常的文档流向是从上到下、从左到右，因此正方形应该位于屏幕的左上角。但事实并非如此。我们需要移除浏览器默认的边距。
移除浏览器默认设置称为规范化，有一个很棒的库可以做到这一点（任何东西都有相应的库）。我建议通读源代码——它很短，并且有描述性注释。由于我们只关心边距，因此我们将在 body 标签中将其设置为零，并且 body 标签也会获得背景色。

<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>

2.相对值

为了不将自己绑定到硬编码值，我们可以用 替换宽度calc(100vw / 2)，用 替换高度calc(100vh * 2 / 3)。

<div></div>
<style>
  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: calc(100vw / 2);
    height: calc(100vh * 2 / 3);
    background: #b5e0ba;
  }
</style>

calc()允许我们在同一次计算中混合使用不同的单位。或者，由于宽度显而易见，您可以直接将其写为50vw。66vh高度不会被接受为正确答案。66.6vh然而，高度会被接受。

3. 边框

到目前为止，这些解决方案遵循的逻辑基本相同，仅在尺寸计算上有所不同。这里有另一种方法。如果我们放置相同的正方形，但这次我们不再为主体背景着色，而是创建边框，会怎么样？

<div></div>
<style>
  div {
    margin: -8px;
    width: 200px;
    height: 200px;
    background: #b5e0ba;
    border-right: 200px solid #5d3a3a;
    border-bottom: 200px solid #5d3a3a;
  }
</style>

在此处将边距设置为负值只是为了消除默认边距的影响并避免设置两个标签的样式。

4. 盒子阴影

最后一个灵感来自最短的解决方案。显然，可以复制现有对象来创建阴影。box-shadow，正如其名称所示，用于创建固定效果。甚至还有一个生成器！前两个值是 X 和 Y 偏移量，可以为负数。第三个是模糊半径。颜色之前的最后一个是扩展半径，它负责缩放，在我们的例子中，我将其任意设置为足够大的值以覆盖整个屏幕400 x 300。

<div></div>
<style>
  div {
    margin: -8px;
    width: 50vw;
    height: 66.6vh;
    background: #b5e0ba;
    box-shadow: 0 0 0 200px #5d3a3a;
  }
</style>

您会选择哪种解决方案？您还知道其他方案吗？