我目前正在尝试制作一个内部有 4 个小方 block 的正方形,但我在尝试做的方式上遇到了麻烦。 所以这是代码:
#grandbox {
position: absolute;
width: 204px;
height: 204px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
我想制作边框的 css 样式:
border: 2px solid black
但如果我这样做,盒子就会脱离更大的盒子并垂直显示。
我是新手,因为我目前刚开始我的职业生涯,但我不明白为什么它不起作用。
PS:对不起,如果英语不好,不是我的母语。
最佳答案
通常,边框宽度会添加到给定的宽度上。使用 box-sizing: border-box;
规则,您可以将边框包含在宽度中,这样您就不会再中断了。看到这个片段:
#grandbox {
position: absolute;
width: 200px;
height: 200px;
border: solid thin black;
left: 40%;
top: 8%;
}
div.smallbox {
border: solid thin black;
text-align: center;
width: 100px;
height: 100px;
float: left;
line-height: 100px;
box-sizing: border-box;
}
<div id="grandbox">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
参见 https://developer.mozilla.org/de/docs/Web/CSS/box-sizing有关框大小调整的更多信息。
关于html - CSS 边框问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38790132/