我主要是从事HTML5和Javascript的C ++程序员。我在布局上遇到麻烦，正在寻求建议和对我的操作方法的批评。
我遇到的一个经常出现的问题是在添加边距或填充时出现不必要的滚动条。这是我正在为Javascript应用程序处理的布局的模型。
每个框都使用“文本行”类来生成我的控件要插入的行。我想添加一个边距，以便成本框项目周围会有一些空间。当我向文本行添加5px的边距时，我的几何框在每个左/右面板中都有滚动条。
这是我要添加边距的地方：
.text-line {
font-size: 1.6em;
box-sizing: border-box;
width: 100%;
margin: 0px; /* no margins */
}
这可能是新手的错误，但是我在做什么错，我该如何解决？我经常遇到这个问题，读了很多材料，但我缺少一些东西。如果我在布局上还有其他重大错误，您能指出这些错误吗？谢谢！
由于.text-line元素具有width:100%;裕量，因此它们自然也会在容器中溢出，因为默认情况下，不会将裕度包括在width值中。
如果您想同时在内容周围留出空间并让元素在宽度上填充其父元素，该怎么办，请删除margin:5px并将此代码添加到.text-line：
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:5px;
上面的代码所做的是在width值中包括填充，因此您可以添加padding，而该元素仍将仅获取width您声明的值。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句