CSS边界问题

我正在试图做一个有4个小方块的广场，而我一直在用我想要做的一种方式遇到麻烦。所以这是代码：CSS边界问题

#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

但如果我这样做的箱子刚打出来的更大的盒子并垂直显示。

我很喜欢这个，因为我现在开始我的carreer，但我不明白为什么它不起作用。

PS：对不起，如果英语不好，不是我的第一语言。

来源

2016-08-05 Yacomini

通常，边框宽度被添加到给定的宽度。使用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。

来源

2016-08-05 13:16:39 andreas

所以，我没有告诉浏览器如何大小呢？谢谢你解释这个！ – Yacomini

你没有告诉浏览器在你的宽度指令中包含边框。这就是为什么'.smallbox'元素因其边框宽度而大于100px。 – andreas

浏览器使用_by default_标准盒子模型。使用'box-sizing：border-box'，你告诉它切换到相当于IE6盒子模型，这是被高度鄙视和实际上更好的咳嗽方式。非常好的总结在https://css-tricks.com/box-sizing/（你不需要盒子大小伪IMHO但除此之外，这个通用盒...是天才。你可以混合一个使用另一个盒子模型的插件，无论你使用的是什么盒子模型） – FelipeAls

外箱应放置在relative和四个内箱absolute。那么你只需要使用leftrighttopbottom属性来定位它们。

#grandbox { 
 
    position: relative; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
} 
 
div.sb1 { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div.sb2 { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
div.sb3 { 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
div.sb4 { 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox sb1"> 
 

 
    </div> 
 
    <div class="smallbox sb2"> 
 

 
    </div> 
 
    <div class="smallbox sb3"> 
 

 
    </div> 
 
    <div class="smallbox sb4"> 
 

 
    </div> 
 
</div>

这里有一个jsbin版本。

来源

2016-08-05 13:13:48

编辑：我的回答是更多的黑客解决方案。 上面的接受的答案合并框自动包含边框的宽度是一个更好的答案。

在你原来的高度和宽度（204）的计算中，我认为你没有考虑到每个正方形的两边都增加了4个像素。

将宽度和高度调整为208像素即可解决您的问题。

#grandbox 
 
    { 
 
     position: absolute; 
 
     width:208px; 
 
     height:208px; 
 
     border: 2px solid black; 
 
     left:40%; 
 
     top: 8%; 
 
    } 
 

 
div.smallbox 
 
    { 
 
     border: 2px solid black; 
 
     text-align: center; 
 
     width: 100px; 
 
     height: 100px; 
 
     float: left; 
 
     line-height: 100px; 
 

 
    }

<body> 
 
    <div id="grandbox"> 
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    </div> 
 
</body>

来源

2016-08-05 13:17:11 Adam

回答

相关问题