CSS：为什么这些响应式正方形不是完全正方形的？ [复制]

Question

我正在尝试制作一个可调整大小的正方形网格，其中包含一些文本。代码如下：

/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 18px;
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 18px - 8px);
}

<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

我们可以看到，有一排正方形可以适应窗口的大小。问题是，如果我们检查它们，我们会发现它们并不完全是正方形（它们大约比宽度高 3 像素）。如果我们增加font-size，情况会变得更糟，据我所知，数学是正确的。

这里发生了什么？为什么我会得到这些额外的像素？

Answer 1

考虑到边框的 2px 为我修复了它：

padding-bottom: calc(14.2857% - 18px - 10px);

/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 1em;
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 18px - 10px);
}

<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

Answer 2

确切的计算应该是（14.2857% - 8px - 2px - Lpx）我们删除了padding-top和border和line-height（不是font-size），所以你应该知道line-height的值或者你设置它：

/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 18px; 
  line-height:1em; /*equal to font-size*/
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 8px - 2px - 18px);
}

<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

如果我们引用the documentation，line-height 是定义线条高度的值，默认值设置为normal：

line-height CSS 属性设置用于行的空间量， 例如在文本中。

还有

正常

取决于用户代理。桌面浏览器（包括 Firefox） 使用大约 1.2 的默认值，具体取决于元素的 字体系列。

如您所见，line-height 不一定等于 font-size

Answer 3

我前段时间遇到了这个问题，通过这个solution使用伪元素解决了这个问题

/* Dirty quick CSS reset */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
  width: 14.2857%;
  /* 100% / 7 */
  font-size: 18px;
  padding: 8px;
}

.square:before {
  content: '';
  float: left;
  padding-top: 100%;
}

<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>