问题标签 [border-box]

在下面的代码片段中，第一行有两个带有flex-grow: 1. 正如预期的那样，每个 div 占据了 50% 的屏幕。

在向左 div 添加填充时，情况不再如此。有人可以解释为什么吗？

我有 3 个 li 项目 - 每个项目的宽度为 33.3%。我试图margin-right在每个之间创建一个间隙<li>- 但是额外的边距使总<li>宽度超过 100% 并在新行上分解。

我可以用一些边框方法对此进行排序吗？试图在全球范围内应用它，但没有运气。

http://codepen.io/anon/pen/jbazaN

见小提琴：http: //jsfiddle.net/vs32rb9w/

如果我明确说为什么会有 1px 白色边框border-color: transparent？

我在 Chrome 和 FireFox 中都检查过 - 边框是白色的，而不是透明的。

它变得透明 - 你猜怎么着 - 当我删除该background属性（或也制作它transparent）时。

这么恶心的虫子？

我有一个固定宽度和 1px 边框的容器 div。它包含两个具有固定宽度和高度的 div，一个向左浮动，另一个向右浮动。我用box-sizing: border-box.

可以在这里看到一个例子https://jsfiddle.net/joker777/6r9dc5pw/5/

问题是当我缩小时边框尺寸会增加，并且会减少容器内的空间，因为我使用border-box. 这导致两个浮动 div 没有足够的空间。

I am trying to set css shadow for top part and also for left and right but with reduced height. I am familiar with blur/radius, but I want the shadow be really short. picture from wix template (cant upload yet, I am sorry)

Can somebody please help me? The last chance I see, I will probably use border-image but I want to avoide it, if possible. Thanks for every suggestion

我正在尝试实现如图所示的右上角三角形，但是当我应用边框半径时，为什么它会将边框应用于所有边，因为我只指定了一个边半径。虽然我申请border-top-right-radius: 5px;而不是border-radius: 0px 5px 0px 0px;得到相同的结果。有什么帮助吗？

HTML：

CSS：

我可以在我的所有 murkup（所有项目）中使用box-sizing: border-box;吗？

例如：

因为计算实际宽度更容易，但是这种方法有什么缺点吗？

我有一个inline-block元素列表，我想为悬停的元素添加边框。但是，请注意边框如何偏移元素，即使我使用box-sizing: border-box并明确定义了元素的宽度和高度。我说明了以下行为：

我找到的最佳解决方案是使用outlineandoutline-offset而不是border，但我真的很想知道为什么我的原始方法不起作用：/

更新：虽然 BoltClock 给出了非常好的解释和建议（这就是我所要求的），但我只想提一下我完全忘记了flexbox，它几乎解决了我在使用内联元素时遇到的所有问题。我将它与 BoltClock 的透明边框技巧相结合，用于我的最终 JSFiddle 解决方案

我一直在创建一个网格，padding用于排水沟。有时需要没有排水沟（完整width图像），所以我只是创建了一个删除padding.

问题是，当使用 a 时50% width，即使它正在使用border-box，也不是真正的50%。

简化的测试用例：

提琴手

代码

有没有一种简单的方法来解决这个问题？

我正在学习为自己建立一个响应式网站。我的一张图像的顶部和底部边框上的 box-sizing 边框框有问题。我有两列不同高度的图像，我希望边缘匹配，但我也想要几个像素的空白来分隔每个图像。

我的问题是，当在顶部和底部边框上使用 box-sizing 边框框时，它们会停留在图像边缘之外，从而将下一个图像向下推几个像素，使其不再与底部边缘的邻居匹配。

我想在继续并在其他图像上添加边框之前解决这个问题。我是 CSS 新手，所以也许有一些非常明显的东西我错了？

任何帮助使边界保持在图像的内侧边缘将不胜感激！

我附上了正在发生的事情的屏幕截图。 边框问题