框大小：边框框不起作用答案

【问题标题】：Box-sizing: border-box not working框大小：边框框不起作用
【发布时间】：2016-12-17 23:29:06
【问题描述】：

所以，我有一个具有固定宽度和高度的容器 div，并根据我的输入使用 jQuery 在其中创建网格 div。问题是我需要网格上的边框，它们增加了空间，所以 div 不适合容器。我找到了 box-sizing:border-box 属性，但由于某种原因它什么也没做。最初我认为也许我需要 -webkit- 前缀，因为我使用的是 Chrome，但事实并非如此。

有什么帮助吗？请记住，我刚开始学习。

HTML：

<DOCTYPE html>
<html>
    <head>
        <title>jQuery Sketch-pad</title>
        <link rel="stylesheet" href="css/sketch-pad.css">
    </head>
    <body>
        <div id="container">

        </div>

        <button id="clear-grid">Clear grid</button>

        <script src="js/jquery-3.1.0.min.js"></script>
        <script src="js/sketch-pad.js"></script>
    </body>
</html>

CSS：

#container {
    margin: 30px auto;
    border: 1px solid red;
    height: 960px;
    width: 960px;    
}

#container > div {
    border: 1px solid black;
    display: inline-block;
    box-sizing: border-box; 
}

.hovered {
    background-color: black;
}

【问题讨论】：

标签： css

【解决方案1】：

您的固定宽度在 #container 中，而不是在内部 div 中。

box-sizing:border-box 在您为它们定义固定宽度时效果很好，因为它们需要知道容器的最大宽度是多少。

如果您将在#container 上定义box-sizing:border-box，那么您会看到它工作，但您需要在内部div 上定义宽度以使box-sizing:border-box 工作。

阅读本文以供参考：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

【讨论】：

好的，但是我不能在内部 div 上使用固定宽度，因为它们的宽度会根据网格中的数量而变化（基于我的输入）。所以基本上我唯一能做的就是使用outline 而不是border，对吧？