CSS:百分比宽度和边框
Posted
技术标签:
【中文标题】CSS:百分比宽度和边框【英文标题】:CSS: Width in percentage and Borders 【发布时间】: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?的可能重复 【参考方案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
属性感兴趣,请查看:
【讨论】:
【参考方案4】:在我的情况下,我最终添加了一个外部 div,其填充大小与我希望原始边距的大小相同,宽度为 100%。这允许我将内部 div 宽度设置为 100%,完全适合填充内(这将作为我之前设置的边距)
【讨论】:
【参考方案5】:只要把px
改成vw
就好了
border-width: 10px;
到
border-width: 10vw;
它的作用是百分比......
【讨论】:
vw 和 vh 不做百分比所做的事情。它们是视口单位,它们基于视口的宽度,忽略视口内的元素。以上是关于CSS:百分比宽度和边框的主要内容,如果未能解决你的问题,请参考以下文章