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

Posted 2023-03-06

【中文标题】CSS：为啥这些响应式正方形不是完全正方形的？ [复制]

【英文标题】：CSS: Why aren't these responsive squares totally square? [duplicate]CSS：为什么这些响应式正方形不是完全正方形的？ [复制]

【发布时间】：2019-01-29 02:10:35

【问题描述】：

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

/* 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，情况会变得更糟，据我所知，数学是正确的。

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

【问题讨论】：

我希望它是一个四舍五入的问题，基于你说随着它们变大它会变得更糟的事实。

添加 line-height: 1 有帮助，但并不完美

我不知道为什么，但如果你使用padding-bottom: calc(14.2857% - 18px - 10px);，它似乎适用于所有尺寸

加line-height等于字体大小，padding-bottom减去上下边框。

border 是有道理的，为什么在减法中再添加 2 个像素可以修复它，据我所知，虽然你不需要线高，但没有它对我来说很好。

【参考方案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>

【讨论】：

只需使用 sn-p，小提琴是老派，你的小提琴不显示正方形

【参考方案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

【讨论】：

这有点等同于考虑font-size，无论如何边框都不应该计算在内。也许“秘密”的一部分是明确地建立line-height。

@amedina 是的，因为 font-size 定义了 line-height 但它并不等于它，它将取决于 font-family ...所以如果你知道 line-height 你有很好的计算...检查我的更新，您可以使用 1em 单位使其更灵活；）

【参考方案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>

【讨论】：

哇，你能解释一下它为什么有效吗？

不言自明，伪元素设置为 100% padding top，这与您的宽度百分比相同，无需进行所有计算。如果您不想使用伪元素，也可以在正方形中放置一个元素