Css 框大小：边框框不工作_Css

Css 框大小：边框框不工作

css

Css 框大小：边框框不工作,css,Css,因此，我有一个具有固定宽度和高度的容器div，并根据我的输入使用jQuery在其中创建网格div。问题是我需要网格上的边框，它们会增加空间，这样div就不能放在容器中。我找到了box sizing:border box属性，但由于某些原因它什么也不做。起初，我认为可能我需要-webkit-prefix，因为我使用的是Chrome，但事实并非如此有什么帮助吗？记住我刚开始学习 HTML: 您的固定宽度在#容器中，而不是在内部div中 box size:border box在定义固定宽度时效果良好

因此，我有一个具有固定宽度和高度的容器div，并根据我的输入使用jQuery在其中创建网格div。问题是我需要网格上的边框，它们会增加空间，这样div就不能放在容器中。我找到了box sizing:border box属性，但由于某些原因它什么也不做。起初，我认为可能我需要-webkit-prefix，因为我使用的是Chrome，但事实并非如此

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

HTML:

您的固定宽度在

#容器中，而不是在内部div中
box size:border box
在定义固定宽度时效果良好，因为它们需要知道容器的最大宽度是多少
如果您将在#container
上定义框大小：边框框
，则您将看到它正在工作，但您需要在内部div上定义宽度，以使框大小：边框框
工作
阅读此内容以供参考：
您的固定宽度在#容器中
不在内部分区中
box size:border box
在定义固定宽度时效果良好，因为它们需要知道容器的最大宽度是多少
如果您将在#container
上定义框大小：边框框
，则您将看到它正在工作，但您需要在内部div上定义宽度，以使框大小：边框框
工作
请阅读以下内容以供参考：
Ok，但我不能在内部div上使用固定宽度，因为它们的宽度会根据网格中的div数量（基于我的输入）而变化。所以基本上我唯一能做的就是使用outline
而不是border
，对吗？好吧，但我不能在内部div上使用固定宽度，因为它们的宽度会根据网格中的多少而变化（基于我的输入）。所以基本上我唯一能做的就是使用outline
而不是border，对吗？
<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>

#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;
}