CSS：百分比宽度和边框答案

【问题标题】：CSS: Width in percentage and BordersCSS：百分比宽度和边框
【发布时间】：2012-06-19 16:02:50
【问题描述】：

我已经以百分比定义了容器的宽度。我想添加一个边框（宽度右侧 3px），因为容器宽度以 % 为单位，而边框宽度以 px 为单位，如何调整容器的宽度？

<div class="wrap">
  <div class="left">...</div>
  <div class="right">...</div>
</div>

.wrap{
    width:100%;
}

.left{
    width:30%;
}

.right{
    width:70%;
}

我想在 .left 的右侧添加 3px 边框。例如：

.left{
    width:30%;
    border:3px solid #000;
}

既然我已经在 % 中定义了宽度，那么重新调整 .left 宽度的最佳方法是什么。我可以大致将宽度减小到 29%，但我想精确地做。

【问题讨论】：

添加 padding 到容器？请注意，您应该删除 width: 100% 然后。
How do I add 1px border to a div whose width is a percentage?的可能重复

标签： html css layout

【解决方案1】：

使用box-sizing: border-box 属性。它修改了盒子模型的行为，将填充和边框视为元素总宽度的一部分（但不是边距）。这意味着元素的设置宽度或高度包括为填充和边框设置的尺寸。在您的情况下，这意味着元素的宽度和边框的宽度将占用 30% 的可用空间。

对它的支持并不完美，但是供应商前缀将捕获大多数（如果不是所有）现代浏览器：

.left {
    width: 30%;
    border: 3px solid #000;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

更多信息请访问MDN 和Quirksmode。

According to Quirksmode，使用上面的 3 个供应商前缀（-moz-、-webkit- 和 -ms-），您可以获得对所有浏览器的支持，甚至是 IE8。

【讨论】：

为什么这不是默认行为
上面提到的“所有浏览器”的意思是：caniuse.com/#search=border-box - 即没有IE6和IE7。
@Emil 从 2014 年起，它们真的不值得支持，除非有充分的商业理由这样做
@Bojangles：我只是想确保人们不会错过那里的“除非”。
由于编辑需要至少六个字符长，我将其作为评论发布：MDN 链接当前指向 404，因为链接区分大小写。 /En/ 应更改为 /en/ 以避免 404。

【解决方案2】：

最简单的跨浏览器方法是不在外部 div 上设置边框，而是将其设置在 .left 内的新 div 上。简单，而且效果很好。

【讨论】：

【解决方案3】：

这有点棘手，但请查看这篇文章以绕过它：

Percentage Plus Pixel Sizing（和Example）
Box Sizing on CSS-Tricks（和Example）

您可能也对box-sizing 属性感兴趣，请查看：

How do I add 1px border to a div whose width is a percentage?

【讨论】：

【解决方案4】：

在我的情况下，我最终添加了一个外部 div，其填充大小与我希望原始边距的大小相同，宽度为 100%。这允许我将内部 div 宽度设置为 100%，完全适合填充内（这将作为我之前设置的边距）

【讨论】：

【解决方案5】：

只要把px改成vw就好了

border-width: 10px;

到

border-width: 10vw;

它的作用是百分比......

【讨论】：

vw 和 vh 不做百分比所做的事情。它们是视口单位，它们基于视口的宽度，忽略视口内的元素。