问题标签 [box-sizing]

我问的原因是因为 padding: 25px;添加了它。

在这里添加 box-sizing 是否是个好主意？

盒子尺寸已删除

https://jsfiddle.net/wby16ep8/1/

添加了盒子大小

25 x 2 = 50 + 4 = 54 + 936 = 990

https://jsfiddle.net/wby16ep8/5/

我对以下代码有理解问题：

我理解第二个（橙色）的行为div：它有box-sizing: content-box;，所以它的高度不包括填充或边框。因此，当它的高度设置为 0 时，它基本上缩小了文本“World”的高度，但填充保持原样。由于 padding 超出了原始文本高度，因此文本在 padding 中仍然可见。div只有现在在（由于降低的高度）之外的那部分填充变得不可见（由于overflow: hidden;）。

不过，我不明白第一个（黄色）的行为div。它有box-sizing: border-box;，所以它的高度确实包括填充和边框。因此，当它的高度设置为 0 时，它应该缩小到“真正的”零高度，这意味着文本、填充和边框应该在 之外div，因此应该是不可见的（由于overflow: hidden;）。

谁能解释为什么不是这种情况以及为什么第一个div行为与第二个一样div？

PS 在 Firefox 和 Chrome 中测试，在撰写本文时都是最新的（生产渠道）。

我对我的 HTML 表格有疑问。我使用 JavaScript 将 8 行和 8 列添加到我用 HTML 定义的表中。我还使用 CSS 来格式化单元格和单元格内的图像。问题是我制作的屏幕越大，与它们后面的静态图像相比，表格单元格大小变得越扭曲（我在棋子后面有一个棋盘图像）。

我已经完成了我可以在网上找到的所有 CSS 技巧来消除不需要的填充等，但似乎没有任何方法可以解决这个问题。偏移是一致且明显的，但它只有大约 2 或 3 个像素。

这是右下角的部分应该位于的位置，以它们的正方形为中心：

这是它们在大屏幕时所处的位置；它们略有偏移：

这是我的 HTML：

这是JavaScript：

这是 CSS，我怀疑这是问题所在：

任何帮助将不胜感激！以下是诊断问题可能需要的一些附加信息：

• 背面的蓝色板是根据 设置大小的图像--unit。
• 调整屏幕大小时，单位不会更新，它只设置一次。
• img元素在元素内部，元素td在trthen内部table。
• 我发现每个额外的宽度td正好是半个像素。

非常感谢您的努力。

我有一个div应该完全填充视口，使用height: 100vhand width: 100%，但是（至少在 Chrome 和 Safari 中）稍微大一点，以便生成滚动条。为什么会这样以及如何获得我想要的 div？示例代码是：

我有一个指定高度和宽度的 div 容器 [例如，宽度 = 280 像素和高度 = 30 像素]。div 包含一个带有 css 属性的文本框 [input type=text]： box-sizing=border-box & width=100% 我已经将两个 div 容器相邻放置，并且期望文本框之间应该有间距。

这在 Chrome 和 Mozilla 中运行良好。但是，Microsoft Edge 将文本框扩展到整个 div，并且相邻文本框之间没有空格。我怀疑，Edge 没有考虑盒子尺寸，因此使用了全宽？请指教。

我正在尝试使用 flexbox 创建具有特定装订线大小的基于列的布局。

例如，我想包括将类添加col-2到给定元素的选项，这将使该元素的大小与该行中其他元素的 2 个相同。col-3对于 3 个元素的大小，col-4对于 4 个等。

我通过更改添加类flex的元素的属性来做到这col-n一点。

SCSS 混合

HTML

如果我不使用任何填充，则此方法有效： 但是，如果我添加填充，则尽管我已对所有子元素 进行了设置，但填充的大小会附加到内容（就好像它是一个内容框一样） 。 我相信不适用于弹性物品。box-sizing: border-box;box-sizing: border-box;

我怎样才能简单地将填充包含在每个元素的大小中，就好像它们是boxer-box元素一样？

我遇到了一个问题，即我的元素的边距被添加到它们的总宽度中，而不是在计算宽度之前被考虑在内，尽管使用了该box-sizing: border-box属性。

所以基本上，我有 2 个元素：侧边栏和主要内容div，当没有边距时，它们整齐地堆叠在一起。但是一旦我添加边距，侧边栏就会爬到内容的顶部。

我希望输出在左侧有侧边栏，在它旁边有内容，但能够在不扭曲模型的情况下定义边距/填充。

我一直遇到divflex 容器的 child 占据了它们所在容器的全部高度的问题。我尝试过继承高度和百分比，但它不起作用。理想情况下，我会选择这种格式。

这是我到目前为止的代码。

任何帮助将不胜感激！

我正在创建一个表，并且我已经box-sizing: border-box;为它的父元素使用了属性body。对于某些屏幕分辨率，我在 Chrome 的右侧出现一条垂直红线（尝试放大和缩小以查看它）。我想摆脱这条红线。

当我从其中删除该box-sizing: border-box;属性时，body它工作正常。但它会改变其他元素的外观。有没有办法摆脱它。

更新：我想创建一个具有以下要求的表： 1. 响应式设计，即水平滚动而不是换行或溢出。2. 宽度 100%。3. 箱形阴影。4.不会扭曲其他元素。

这是我的代码：

我是 CSS 新手，我尝试使用 CSS 继承。当我box-sizing:border-box向 body 添加属性时，它不会被它的子元素继承（在我的例子中是一个<section>元素）。它就像其他不可继承的属性（如边距和边框）一样吗？