html - 关于 CSS 网格中奇怪对象放置的问题

Question

我对 CodeSandbox 中的 CSS 网格样式有一些疑问，因为它的行为与我预期的不同: https://codesandbox.io/s/rw0j2orqmp

1. 为什么C、CE、退格与数字之间的间距小于数字与+-、0、.之间的间距。 ？
2. 为什么我需要将 textarea 元素上的 padding 设置为 0？如果我不这样做，两侧会比向左延伸得更远。
3. 如果我将#backspace设置为position:absolute;被拿走了，为什么退格键上移了一个像素？
4. 为什么我必须使用 flexbox 来使清晰的网格区域正确显示而不将退格键包裹到底部？这对于底行来说不是必需的。
5. 为什么我的方法 > * {} 调用没有为所有子元素添加边距？难道不应该把它们分开吗？有没有更好的方法来自动调整右侧方法子项的间距？

下面是我的 scss 脚本:

.calculator {
  margin: auto;
  vertical-align: center;
  width: 215px;
  height: 330px;
  background-color: blue;
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: auto;
  grid-template-areas:
    "display"
    "buttons";

  #display {
    grid-area: display;
    margin: 5px;
    padding: 0;
    resize: none;
    text-align: right;
    font-size: 40px;
    width: 95%;
    height: 100px;
  }

  .buttons {
    grid-area: buttons;
    display: grid;
    margin: 0px 5px 5px 5px;
    padding: 0;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(4, auto);
    grid-template-areas:
      "clear clear clear method"
      "number number number method"
      "number number number method"
      "number number number method"
      "bottom bottom bottom method";

    .clear {
      grid-area: clear;

      #backspace {
        position: absolute;
      }
    }

    .method {
      display: flex;
      flex-direction: column;
      grid-area: method;

      .method > * {
        margin-top: 1px;
      }
    }

    .number {
      grid-area: number;
    }

    .bottom {
      grid-area: bottom;
    }
  }
}

button {
  width: 50px;
  height: 40px;
  padding: 0;
}

我认为我可能对其中一些部分的工作原理有误解，因此我们将非常感谢您提供的任何建议、提示、更正或解决方法。

Answer 1

1. Why is the spacing between C, CE, backspace and the numbers smaller than the spacing between the numbers and +-, 0, . ?

因为网格容器上的默认设置为 align-content 是 stretch 。这就是将行扩展到容器的高度。

.numbers容器(按住键 1-9)无法在垂直空间中均匀居中，因为可用空间不能被 2 整除。因此一侧将比另一侧拥有更多/更少的空间。

您可以通过应用align-self: center来测试这一点, start , end等至.numbers元素。

您最好的选择是申请align-content: center到整个容器，将线条均匀地排列到垂直中间。

将其添加到您的代码中:

.buttons {
    align-content: center;
}

---

2. Why do I need to set my padding to 0 on the textarea element? If I don't, the sides extend out to the right farther than to the left.

因为 <textarea>带有默认填充。它因浏览器而异，但在 Chrome 中所有边都是 2px。

您的padding: 0覆盖默认值。

请注意，您还可以添加 box-sizing: border-box 到您的代码，这将在您的宽度/高度计算中考虑填充和边框长度。

将其添加到您的代码中:

#display {
   grid-area: display;
   /* padding: 0; */ /* option 1, to override defaults */
   /* OR, option 2: */
   box-sizing: border-box; /* NEW */
   justify-self: center;   /* NEW */
 }

---

3. If my setting of #backspace to position: absolute is taken away, why does the backspace shift up one pixel?

因为button元素是行内元素。这意味着vertical-align属性(property)开始发挥作用。

The default value of vertical-align is baseline 。该特定值将内联级元素与其内容对齐，在本例中为 text ( see demo )。

由于退格符号比相邻按钮中的字母短，因此该按钮需要升高一点才能实现基线对齐。

要对此进行测试，请将退格符号替换为大写字母。该按钮不会移动(与行中的其他按钮均匀对齐)。

与 position: absolute上面的观点没有实际意义，因为该元素已从文档流中删除。 It's natural offset position is auto ，因此它保持在原位(直到您定义偏移属性 – top 、 bottom 、 left 或 right 。)

对您的代码进行以下调整:

/* #backspace { position: absolute; } */

button {
  vertical-align: bottom; /* NEW */
}

---

4. Why do I have to use flex box to make the clear grid area appear correctly without wrapping backspace to the bottom? This is not necessary on the bottom row.

您在 clear 上没有任何 Flex 属性网格区域。它具有与bottom相同的布局结构。网格区域。

---

5. Why does my method > * {} call not put the margins in for all the children? Should it not space them apart? Is there a better way to auto-space the children of method on the right side?

因为您有语法错误:

...

.method {
  display: flex;
  flex-direction: column;
  grid-area: method;         <------ missing a closing bracket here

  .method > * {
    margin-top: 1px;
  }

}

如果您想分隔网格元素，更好的方法可能是使用 grid-gap属性。

forked sandbox demo