问题标签 [border-box]

你好 SO 社区！

我知道这个问题有很多变体，但是似乎没有人像我一样尝试做一些非常重要的事情。我的场景不能轻易使用width: 100%. 所以让我们开始这个派对吧！

在准备好 Chris Coyier 关于从对象边界破解 CSS 三角形的文章后，我部分地得到了这个想法。

重要让我首先声明，我知道在大多数情况下，您会使用width:100%，但是，我正在使用边框，您不能使用带边框的百分比 :(

我也真的真的很想避免在这个解决方案中使用 javascript。请不要使用 javascript 解决方案来回答，因为我已经知道如何使用 javascript 来解决这个问题。我也不喜欢将 body max-width 设置为 100% 的想法。我不想限制这个项目的任何溢出约束。非常感谢你。:)

HTML

CSS

现场演示

单击此处查看实时演示（我无法使用 codepen，因为我使用的是 vw 和 vh）

目标

1. 将&&元素.divider-blue-red扩展.divider-red-green到视图窗口的 100%，不包括滚动条
2. 不使用 javascript（纯 CSS 解决方案）
3. 未将正文设置为“最大宽度：100%”
4. 有一个很酷的流体设计，随着设备的宽度和高度滚动！:)

可以选择放置盒子阴影的位置会很可爱。目前我有一个带有一些填充的 div。背景颜色设置为剪辑内容框。那挺好的。但是，我在悬停时出现的框阴影开始于边框框。也许有一些我不知道的超级秘密 css（可以希望，对吧？）

我知道我可以在 .wrapper 之后添加另一个 div，但我希望避免这种情况。更好奇是否真的可以将 box-shadow 定位在 content-box 上。

所以我得到了这个主题http://demo.theme.co/ethos-1/ 并想让顶部的正方形变成圆形。

我能得到它们的唯一方法就是如果我改变

问题是它使网站上的每个盒子都像圆形一样。因为我只希望顶部的帖子预览是圆形的。

任何想法将不胜感激。谢谢！

当我更改浏览器窗口的宽度时，图像不会在 IE 11 或更低版本上缩放。我确实使用谷歌浏览器。我试图添加位置：绝对，但它破坏了整个布局。
图片CSS：

Parent 和 img 都有display: block; box-sizing: border-box;
HTML：

它在两种浏览器上都是如此。 图片

我目前在我的网站和我们正在尝试实施的聊天服务方面遇到问题。我已将其范围缩小到与border-box 属性相关的CSS 问题。

该问题也仅存在于 Internet Explorer 11 中。该框在 Mozilla、Chrome 甚至更早版本的 IE 中都能正确显示。一旦用户点击网站左侧的“需要帮助，在线聊天”按钮，他们就无法看到他们的输入文本。我知道正在输入数据并且可以正常工作，但由于某种原因，该字段不显示用户键入的内容。我认为这是一个大小问题，通过在 IE 11 中显示没有 CSS 的页面证明这是正确的，我可以看到框中的条目，但是一旦启用了 CSS，它就会再次从该字段中消失。我已经尝试了许多编辑以使其无法成功工作，但最终切换到填充框只是为了查看它是否有效。这似乎在两种浏览器中都有效，但在 IE 11 中，文本拥抱底部边框并且看起来很糟糕。

有没有一种方法可以修复边框框以使文本显示在正确的区域，或者有没有一种方法可以在使用填充框使其看起来更好的同时向上浮动文本？

这是启用聊天代码的页面：https ://www.sundancevacations.com/company/privacy-statement/

这是我目前正在使用的代码。

目前我的盒子尺寸如下所示：

任何帮助将不胜感激。

每当单击它时，我都会使用.clickJQuery 方法来添加.clicked。包含一个边框和属性设置为.<td>.clickedbox-sizingborder-box

<td>当我水平或垂直单击两个连续的 s 时，它们的大小似乎发生了变化。为什么会这样？

这是我的代码：

帮助将不胜感激。

我使用 html 实体 ⬤ 设置了一个圆形 div，里面有一个圆圈，该 div 的宽度和高度为 20px，边框为 2px，box-sizing: border-box以阻止大小的增加。

通常用圆圈填充整个 div，我还将圆圈的font-sizeand设置line-height为 20px，但由于 div 的 4px 现在被边框占用，我将 line-height 设置为 16px。这说明了垂直居中，但水平居中仍然关闭。

我怎样才能完美地居中？

https://jsfiddle.net/3drve2xn/

我在使用时遇到了一个问题box-sizing: border-box：我有 3 个div尺寸，min-height: 24px我想在添加水平边框时保持高度。

问题是如果在内容高度计算一次之后添加水平边框，那么内容高度不会改变，并且会div随着边框的值而增长。

在我的例子中，当元素悬停时，边框是由 CSS 本身添加的。

_{悬停时firstdiv的高度增加，增加整个页面的高度}↑<BR>

如果这是相关的：

• 该页面实际上用作Firefox webextension中的弹出窗口。

• 我正在使用两个样式表，一个我无法修改 ( extension.css)，另一个用于扩展和覆盖第一个 ( page-small.css)。

• 在受保护的 CSSdiv中覆盖的每个样式都应用一种样式，以允许元素随内容增长。height: 24pxmin-height: 24px;

当元素悬停时，如何在不改变外部大小的情况下管理这种增长？

我有一个任意高度的元素。元素具有 box-sizing:border-box 属性。如果使用 jquery 指定 100px 高度，结果将是元素的高度等于 120。可能有什么问题？

js：

CSS：

https://jsfiddle.net/yurri_87/8sLovkba/

我有两个父元素，里面有 3 个子元素。( #grandParent>#parent>#children*3)grandParent具有设定的高度和宽度，并parent应用了填充。所有元素都有box-sizing: border-box.

应用border-box后，填充应该children变小，但相反，它会将其向下推，并保持其大小。children为什么应用填充时不会变小？

JSFiddle