Question

我有一个我不明白的问题。如果我在宽度上使用百分比，我希望元素计算其大小（百分比）内的边框，边距或填充。但事实上，这些值被添加到它们的大小，我认为这是错误的。我的期望是错的吗？下面的例子显示了这个问题。两个＆＃34; divs＆＃34; ＆＃34;左＆＃34;和＆＃34;对＆＃34;我希望能在一条线上。如果我删除＆＃34; border＆＃34;它按预期工作。

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  border: 1px solid black;
  width: 100%;
  overflow: auto;
}

.left {
  border: 1px solid black;
  width: 20%;
  float: left;
}

.right {
  border: 1px solid black;
  width: 80%;
  float: left;
}
</style>
</head>
<body>
<div class="center">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
</body>
</html>

Answer 1

解决此问题的方法是使用box-sizing。见http://jsfiddle.net/Marwelln/YYkxK/

box-sizing:border-box

Answer 2

这是完全正常的。这不是你最初可能期望的，但CSS就是这样。

即使没有百分比：

#width {
    width: 100px;
    padding: 0 20px;
}

这个#width div将占用140px。百分比的工作方式相同。

所以你可能需要内部div才能达到你想要的效果。

<div class="left">
   <div class="inner">

   </div>
</div>
<div class="right">
   <div class="inner">
   </div>
</div>


.inner { padding: 10px; }
.right .inner { border-left: 1px solid #ccc; }

Answer 3

填充或边框总是在内部添加元素大小。

保证金永远不会增加尺寸，但会在元素之外增加空间。

百分比或设定值无关紧要。以上总是如此。

查看盒子模型可能会有所帮助---＆gt; HERE

Answer 4

当您使用百分比作为宽度（或高度）值时，这些是父块元素（包含块）的宽度（或高度）的百分比。

Answer 5

在超现代浏览器中，你可以使用calc（）来解决这个问题：calc（80％ - 2px）。是的，这是正常的。如果您将宽度设置为100px并将边框设置为150px，那么如果添加了border ，会发生什么？

CSS使用百分比和边距，填充或边框

5 个答案: