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>

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

这是怎么回事？为什么我得到那些多余的像素？

Answer 1

前一段时间我遇到了这个问题，并且能够通过使用伪元素通过此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>

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

从边界算起2像素对我来说是固定的：

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>

CSS：为什么这些响应式正方形不完全正方形？

3 个答案: