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

Posted 2023-02-22

【中文标题】关于我的 CSS 网格中奇怪对象放置的问题

【英文标题】：Questions on odd object placement within my CSS grid

【发布时间】：2018-12-29 20:17:21

【问题描述】：

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

为什么C、CE、退格与数字之间的间距小于数字与+-、0、.的间距。 ? 为什么我需要在 textarea 元素上将填充设置为 0？如果我不这样做，两边会向右延伸而不是向左延伸。 如果我将#backspace 设置为位置：绝对；去掉了，为什么退格会上移一个像素？ 为什么我必须使用弹性框来使清晰的网格区域正确显示，而不用退格到底部？最下面一行不需要。 为什么我的方法 > * 调用没有为所有子级设置边距？它不应该将它们分开吗？有没有更好的方法在右侧自动设置方法的子项？

下面是我的 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;

我想我可能对其中某些部分的工作方式存在误解，因此非常感谢您提供的任何建议、提示、更正或解决方法。

【参考方案1】：

为什么C、CE、退格与数字之间的间距小于数字与+-、0、.的间距。 ?

因为align-content 的网格容器上的默认设置是stretch。那是在容器的高度上扩展您的行。

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

您可以通过将align-self: center、start、end 等应用于.numbers 元素来进行测试。

最好的办法是将align-content: center 应用于整个容器，这会将线条均匀地填充到垂直中间。

将此添加到您的代码中：

.buttons 
    align-content: center;

---

为什么我需要在 textarea 元素上将填充设置为 0？如果我不这样做，两边会向右延伸而不是向左延伸。

因为<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 */
 

---

如果我的#backspace 到position: absolute 的设置被取消了，为什么退格会上移一个像素？

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

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 */

---

为什么我必须使用弹性框来使清晰的网格区域正确显示，而不用退格到底部？最下面一行不需要。

clear 网格区域上没有任何弹性属性。布局结构与bottom网格区域相同。

---

为什么我的method > * 调用没有为所有孩子设置边距？它不应该将它们分开吗？有没有更好的方法在右侧自动设置方法的子项？

因为你有语法错误：

...

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

  .method > * 
    margin-top: 1px;
  

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

forked sandbox demo

【讨论】：

感谢您提供详细而翔实的答案，这是最有帮助的。