我已经用百分比定义了容器的宽度。我想添加一个边框(宽度右侧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 上找到。
根据 Quirksmode,使用上面的 3 个供应商前缀(
-moz-
、-webkit-
和 -ms-
),您可以获得对所有浏览器的支持,甚至是 IE8。
最简单的跨浏览器方法是不在外部 div 上设置边框,而是将其设置在
.left
内的新 div 上。简单,而且效果很好。
这有点棘手,但请查看这篇文章以了解解决它的方法:
box-sizing
房产感兴趣,请查看:
在我的例子中,我最终添加了一个外部 div,其填充大小与我想要的原始边距相同,宽度为 100%。这允许我将内部 div 宽度设置为 100%,完全适合填充内部(这将作为我之前设置的边距)
可能或可能不适合,视情况而定。 一般来说,像智能手机这样的小屏幕看起来很好,边缘、填充和边框更薄(这减少了浪费的屏幕空间),而真正的宽屏幕可以处理更厚的间距和边框,而不会看起来很奇怪。
这会像 PDF 一样缩放网页,其中线条粗细根据视口宽度而变化。 如果您想要完全可缩放,您还应该为更大的屏幕缩放更大的字体,这样边框就不会看起来比文本更粗。
100vw - (margin_left x 3) - (padding x 4) - (border x 4) = (column_width x 2)
100vw - (margin_left x 4) - (padding x 6) - (border x 6) = (column_width x 3)
<style>
div.column {
float : left;
width : 41.5vw;
margin-left : 4vw;
margin-top : 3vw;
padding : 1vw;
background-color : #777;
border : 0.25vw solid #000;
}
</style>
<div class="column">
Aut dolor facere qui impedit quod rem mollitia dolorem ab iste culpa
qui quia eaque. Et dolor voluptatum ab voluptatibus beatae eum illo
tenetur in galisum excepturi.
</div>
<div class="column">
Qui totam saepe ut dolor sunt aut nihil consequatur cum quis minus
architecto. Aut aliquam dolore eum ipsum atque et fugiat quo maiores
similique. Ut sequi excepturi id laboriosam dolor hic illum iste.
</div>
我使用了以下数学:
(column_width / 2) = 100vw - (margin_left x 3) - (padding x 4) - (border x 4)
(column_width / 2) = 100vw - (4vw x 3) - (1vw x 4) - (0.25vw x 4)
(column_width / 2) = 83vw
(column_width) = 41.5vw
在 4K 宽屏幕上产生此输出:
在极窄的屏幕上输出:
边距、内边距、边框和列大小在不同的屏幕宽度下似乎保持完全相同。 因为我没有缩放字体,所以它们在窄屏幕尺寸下显得相对更大。
只需将
px
更改为 vw
就像
border-width: 10px;
到
border-width: 10vw;
它的作用就是百分比的作用......