我目前正在尝试使用HTML和CSS（CSS3，包括Flexbox）设计Mendeleiev表。 基本上我需要每个盒子的窗口宽度的1/18〜= 5.55％才能响应。 但是，CSS似乎高度错误地计算了这个值。
以下是我的代码示例
body {
size: 15px;
background: #ff9999;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.line {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.box {
border: 1px solid #000000;
padding: 10px;
position: relative;
width: 5.56%;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.weight {
font-size: 10px;
text-align: right;
}
.el {
font-size: 25px;
text-align: center;
font-weight: bold;
}
.no {
font-size: 10px;
text-align: left;
}
.right {
justify-content: flex-end;
}
.wrap {
flex-wrap: wrap;
}<div class="container">
<!-- Debut 4e ligne -->
<div class="line wrap">
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
4.00
</div>
<div class="el">
He
</div>
<div class="no">
2
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
</div>
<!-- Fin 4e ligne -->
<div class="line">
</div>
<div class="line">
</div>
<div class="line">
</div>
</div>
这是非常重复的（18列），但正如你在粘贴它时应该看到的那样，即使总共18 * 5.55％= 99.9，也有4个盒子不适合在线上（用flex-wrap证明） ％。
为什么会有这样的差异？
答案 0 :(得分：4)
在此上下文中，宽度是填充和边框的补充。尝试从：
开始.box { box-sizing: border-box; }
你应该看到一个区别。加上5.55％（不是5.56％）的宽度，非常适合我。
答案 1 :(得分：3)
这只是因为您的广告代码框有width和padding。填充是添加，这意味着如果你执行width: 500px; padding: 10px;，结果就是一个520px宽的元素。
您可以做的是将box-sizing: border-box;应用于.box元素，以使填充向内而不是向外，从而保持其设置宽度。
.box {
border: 1px solid #000000;
padding: 10px;
position: relative;
width: 5.56%;
box-sizing: border-box;
}
工作代码段
body {
size: 15px;
background: #ff9999;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
.line {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.box {
border: 1px solid #000000;
padding: 10px;
position: relative;
width: 5.55%;
box-sizing: border-box;
}
.box:before {
content: "";
display: block;
padding-top: 100%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.weight {
font-size: 10px;
text-align: right;
}
.el {
font-size: 25px;
text-align: center;
font-weight: bold;
}
.no {
font-size: 10px;
text-align: left;
}
.right {
justify-content: flex-end;
}
.wrap {
flex-wrap: wrap;
}<div class="container">
<!-- Debut 4e ligne -->
<div class="line wrap">
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
4.00
</div>
<div class="el">
He
</div>
<div class="no">
2
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
<div class="box">
<div class="content">
<div class="weight">
1.00
</div>
<div class="el">
H
</div>
<div class="no">
1
</div>
</div>
</div>
</div>
<!-- Fin 4e ligne -->
<div class="line">
</div>
<div class="line">
</div>
<div class="line">
</div>
</div>