问题标签 [box-sizing]

这是一个棘手的问题，我已经为此苦苦挣扎了很久——是时候问问那些可能比我更了解 CSS 布局的人，以及为什么我的布局是一场噩梦。

考虑这张图片：

蓝线代表视口。应用程序强制布局为水平/横向。用户理解这一点，所以不是问题。

约束... 左侧的列不能占用可用视口空间的 30% 以上。这很容易。右边的井字游戏网格将占据其余部分。在左列和网格之间，大约有 12px 的空间（边距、填充，无论做什么）。在这个例子中，右边的网格有 9 个盒子，但可以少一些，需要相应地流动。网格中列的宽度必须相等。网格中行的高度必须相等。网格中每个框的文本不能强制大小变得不平衡（宽度或高度），意味着溢出：隐藏是可以接受的或截断并添加省略号。

这可以显示在台式电脑、手机、平板电脑等上。布局应该适应，但这不是一个大问题。保持比率/大小是。

所以，就是这样。棘手。我故意没有发布代码，因为我的代码已经变得如此可怕以至于变得毫无用处，并且可能会污染这里开明的人们可能拥有的任何想法。

想法？帮助？非常感谢您！

正如标题所说：

width: 0由于填充和边框，无法关闭第二个 div 。

做什么？

我不知道我可以添加什么更多细节。这是一个设置为display: flex. 每个弹性项目都有一个边框和填充以及一些（文本）内容。总共有2个。然后其中一些将使用 width: 0 关闭，并关闭边框和填充。box-sizing: border-box用来。

但它不起作用。谢谢你。

编辑：好的，抱歉没有解释清楚，但是宽度需要动画，这就是为什么动画播放时需要有填充，如果可能的话我也不想动画填充。

我有以下 CSS3 按钮动画：

HTML::

CSS：

:before现在的问题是我使用和伪元素创建的边框:after并没有完全对齐锚标记的边框顶部，它看起来像按钮内的 2px。

我已经添加了box-sizing:border-box属性，但我仍然得到相同的结果，为什么我无法对齐锚边框顶部的伪元素？

在这里提琴

如您所见，我使用了以下属性，但仍然没有得到想要的结果：

在下面的代码片段中，添加 svg 元素会导致出现垂直滚动条。删除 svg 会删除滚动条。我想了解它为什么会发生以及是否有一个不可怕的解决方案（例如 width:99%; height:98% 解决了它，但那是一个令人作呕的解决方案）。

我不能真正删除上面的 DIV 样式，因为其他 html 结构也位于这些需要它们存在的容器中。

svg 上的绿色边框和框大小仅存在，因此我们可以看到 svg 的边缘，最终不需要它

如果我将 svg 更改为 div，并将 svg css 应用于该 div，则不会出现滚动条，因此 svg 元素似乎有所不同。

我已经在 Firefox 和 IE 中对此进行了测试。两者都显示滚动条，但 IE 显示的可滚动内容稍微多一些

在登录页面上，输入字段前面有很棒的字体图标。为了在两者周围有一个漂亮的框边框，我为图标和输入字段应用了边框属性，并分别删除了右边框和左边框，使其看起来像一个单独的框。

我现在面临的问题是当我切换到移动视图时，两者的边框重叠清晰可见（请看截图），但桌面版看起来不错。

如何解决移动视图上的此边框重叠问题？

我正在尝试使用 flexbox 从头开始​​构建一个表，并且我想使用属性 flex 实现 rowspan 和 colspan。但这不起作用，我是因为边框，即使设置了边框框

我的结果是：

解决我的问题

我看到了这个问题flex-box box-sizing: border-box not working 和这个问题（以及许多其他问题），但它们并不是我的具体问题。（以防万一这是角度组件无关紧要，但可以）。

我正在努力弄清楚为什么我有一个 height:100% 的元素，它比它的容器大，尽管 box-sizing 被设置为 border-box;

我在这里做了一个小提琴：https ://jsfiddle.net/a8v9a8ok/6/

我已将元素设置为 100% 高度并将 box-sizing 设置为边框框，但包含在名为“left”的部分中的文章正在流过该部分，并且它包含的文本 textarea 也正在流过。

我不只是想隐藏溢出，我希望元素保持包含在它们的容器中并将相应的容器填充到 100%。

我敢肯定这是一个简单的解决方法，但我一直在尝试几个小时无济于事，所以任何帮助将不胜感激！

编辑：我只是想让所有元素都适合它们各自的容器，而不会垂直重叠。我希望将 textarea 高度设置为 100% 应该会导致它填充其容器中的剩余空间。

谢谢

根据我对边界框的弹性算法的理解，用于计算剩余空间（用于将可用空间分配给弹性项目），除了弹性项目的主要尺寸属性外，仅包括边距。但似乎浏览器甚至对边框框也采用了边框宽度。这是演示该问题的jsfiddle ：

这里第一个和第二个 div 的宽度分别为 250 和 250，第三个 div 的宽度为 100。这对我来说似乎是错误的。我对么？

我们知道，Bootstrap 将border-box 设置为reset.css 中box-sizing 的值。但是 box-sizing 的默认值是 content-box。在我目前的使用中，由于规则约定优于配置，我总是使用默认值。你更喜欢哪个？请分享你的理由，谢谢。

在下面的代码中，孩子的(inline-block)宽度扩展到其父计算宽度的 100%，但我不知道为什么height不.child扩展到.parent's计算高度。

我对了解这种行为背后的逻辑而不是解决方案更感兴趣。有人可以解释一下这种情况。

谢谢