CSS:宽度百分比和边框

问题描述 投票:0回答:6

我已经用百分比定义了容器的宽度。我想添加一个边框(宽度右侧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%,但我想要精确地做到这一点。

html css layout
6个回答
103
投票

使用

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

CSS box model

对它的支持并不完美,但是供应商前缀将捕获大多数(如果不是全部)现代浏览器:

.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;
}

更多信息可以在 MDNQuirksmode 上找到。

根据 Quirksmode,使用上面的 3 个供应商前缀(

-moz-
-webkit-
-ms-
),您可以获得对所有浏览器的支持,甚至是 IE8。


5
投票

最简单的跨浏览器方法是不在外部 div 上设置边框,而是将其设置在

.left
内的新 div 上。简单,而且效果很好。


2
投票

这有点棘手,但请查看这篇文章以了解解决它的方法:

您可能也对

box-sizing
房产感兴趣,请查看:


0
投票

在我的例子中,我最终添加了一个外部 div,其填充大小与我想要的原始边距相同,宽度为 100%。这允许我将内部 div 宽度设置为 100%,完全适合填充内部(这将作为我之前设置的边距)


0
投票

一个简单的解决方法是将所有宽度基于视口宽度

可能可能不适合,视情况而定。 一般来说,像智能手机这样的小屏幕看起来很好,边缘、填充和边框更薄(这减少了浪费的屏幕空间),而真正的宽屏幕可以处理更厚的间距和边框,而不会看起来很奇怪。

这会像 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)

两列布局的 HTML 和 CSS 代码示例:

<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 宽屏幕上产生此输出:

在极窄的屏幕上输出:

边距、内边距、边框和列大小在不同的屏幕宽度下似乎保持完全相同。 因为我没有缩放字体,所以它们在窄屏幕尺寸下显得相对更大。


-2
投票

只需将

px
更改为
vw
就像

border-width: 10px;

border-width: 10vw;

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

© www.soinside.com 2019 - 2024. All rights reserved.