我已经用百分比定义了容器的宽度。我想添加一个边框(宽度右侧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%,但我想做到精确。
最佳答案
使用 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.
关于html - CSS:宽度百分比和边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11070071/