问题标签 [border-box]

我在谷歌上找不到关于使用 box-sizing:border-box on mobile 的具体答案。我在http://caniuse.com/上看到原生 android 浏览器不完全支持 box-sizing（Android 浏览器不能正确计算 HTML 选择元素的尺寸（宽度和高度）。）。我的问题：在移动设备（chrome/opera/safari/android browser/ie）上使用边框框是 100% 安全的，还是我必须坚持老派？

提及：在我使用的移动版本上：

我在设计两种不同风格的按钮时遇到了麻烦。第一个按钮应该是带有2px 边框的透明背景，而下一个按钮只是foundation 的默认按钮样式，即没有边框。我认为这样*{box-sizing: border-box;}可以使按钮的大小相同，而不管填充/边框/边距如何。我认为这可能不起作用，因为我没有指定宽度/高度，但即使我这样做了，它也只会将普通按钮从对齐位置推开 2px，甚至我仍然希望按钮是根据它们内部的文本的自然宽度。

对我来说，简单的解决方案是在普通按钮上添加一个与背景颜色相同的边框，但最终我还必须为悬停、活动等边框添加样式......似乎应该成为更好的方法。我在这里做错了吗？

这是我所在位置的 jsfiddle：http: //jsfiddle.net/xa4d4bfv/

我有一堆元素彼此相邻浮动，它们不在单独的行中，因此在必要时它们会下降到下一行，因此如果其中一个元素比另一个元素短于它下面的元素应该更高比它的兄弟姐妹，但情况似乎并非如此，所有元素的行为就好像它们在包装行中并且都具有相同的高度。

CodePen：http ://codepen.io/anon/pen/oXLQWg

您可以看到顶部中间元素的高度较小，但它下方的元素不会靠近它，而是与其他元素一起定位。

示例代码：

HTML：

CSS：

从我的测试来看，它似乎与设置有关box-sizing: border-box;。

无论如何要解决这个问题，以便较小的元素在它能够或我必须设置为时直接在其上方的元素下方box-sizing对齐content-box？

我来自这个问题：Understanding offsetWidth, clientWidth, scrollWidth and -Height,分别

我知道这是标准盒子模型的情况，对吗？

但是当你有这样的事情时会发生什么：

offsetWidth 和 clientWidth 现在是否相等？这条规则是否总是发生这种情况？

那么padding-box呢？

我为 设置li了元素width: 50%，以便将ul块分成两li行，如下图所示。例如，这里是带有normalize.css的JS bin。

[图片1]

但是，宽度li需要小于 50%，例如 49.6% 或更小。如果不是，即使我将liand设置为.libox-sizing: border-boxmargin: 0li

[图2]

我知道我可以float: left让它像第一张图片一样工作，但我想知道为什么图片 2 中存在空间。

PS：我的浏览器使用的是 Chrome，如果在 Safari 上，49.5% 没问题。

所以我发现了 flexbox 不尊重box-sizing: border-box;CSS 声明的艰难方式。美好的。但是有没有办法使用 flexbox 布局来获得该功能？

看看这个 JS Fiddle。我们有 3 行，每行有 3 个框。我希望所有的盒子都一样大。中间行的中间框有一些边距和边框属性，使其更大。在盒子模型中，我们会用box-sizing: border-box. flexbox 模型中是否有一些等价物？

现场演示：

我正在使用许多 div，其中包含绝对定位的子 div。

我想要做的是在 div 内放置一个边框，但不与里面的绝对定位元素交互。

（几乎像一个浮动边框）

我尝试过使用大纲，但这不起作用，因为它在 .box div 中确实需要它

我也尝试过盒子阴影插图，但这仍然会移动内容。

我有什么办法可以做到这一点吗？

这是演示

不知道我做错了什么，我认为通过添加边框框，它可以整齐地适合这 4 个框。

http://jsfiddle.net/jzhang172/x3ftdx6n/

我有 3 个嵌套的 div：

.inner div 是绝对位置，它们每个都有 1px 边框：

这种安排会在 .outer div 上产生一个滚动条。

这是一个代码笔

为什么会这样，我需要改变什么来阻止它发生？

如果 .inner div 的边框宽度增加到 3px，那么滚动条就会消失。再次，为什么会发生这种情况？

这个问题是由对此相关问题建议的修复引起的

我有 3 个嵌套 div：外部、内部和项目。

给定以下基本 CSS：

挑战是将“项目” div 垂直居中，上下有相等（或没有）间隙，并且不出现垂直滚动条。

在这里写代码

更新：

正如下面所指出的，我应该补充一点，不同高度的多个项目必须居中。到目前为止，最好的答案是为每个项目添加负边距，结果如下：http ://codepen.io/anon/pen/dYWEYZ

然而，这闻起来很糟糕（对我来说），因为它需要一个取决于其他 3 个属性的偏移量。