CSS:为什么这些响应性的方块不是完全正方形的？
CSS:为什么这些响应性的方块不是完全正方形的？
提问于 2018-08-23 02:40:38
我正在尝试制作一个可调整大小的方块网格，里面有一些文本。代码如下：
/* 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，情况会变得更糟，据我所知，数学是正确的。
这里发生了什么事？为什么我会得到这些额外的像素？
回答 2
Stack Overflow用户
发布于 2018-08-23 03:05:50
我之前遇到过这个问题，并且能够通过这个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>
Stack Overflow用户
发布于 2018-08-23 02:58:52
从边界计算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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51973221
复制相关文章
相似问题
腾讯云开发者
