CSS 使用百分比和边距、填充或边框答案

【问题标题】：CSS using percentage and margin, padding or borderCSS 使用百分比和边距、填充或边框
【发布时间】：2012-01-27 14:40:30
【问题描述】：

我有一个我不明白的问题。如果我使用宽度百分比，我希望元素在其大小（百分比）内计算边框、边距或填充。但实际上这些值被添加到它们的大小上，我认为这是错误的。我的期望错了吗？下面的示例显示了该问题。我希望“divs”“left”和“right”都在一行中。如果我删除“边框”，它会按预期工作。

<!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>

【问题讨论】：

标签： css border margin padding

【解决方案1】：

在超现代浏览器中，您可以使用 calc() 来解决此问题：calc(80% - 2px)。是的，这很正常。如果您将宽度设置为 100 像素，边框设置为 150 像素，那么如果添加了边框 wasnt 会发生什么情况？

【讨论】：

【解决方案2】：

您可以使用box-sizing 来解决此问题。见http://jsfiddle.net/Marwelln/YYkxK/

box-sizing:border-box

【讨论】：

不适用于 Firefox 27（截至 2014 年 3 月的当前版本）。列分为两行。

【解决方案3】：

填充或边框总是会增加元素的大小，由内而外。

边距从不增加尺寸，而是在元素外增加空间。

百分比或设定值无关紧要。以上都是真的。

查看盒子模型可能会有所帮助 ---> HERE

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

即使没有百分比：

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

这个#width div 将占据 140 像素。百分比也一样。

所以你可能需要内部 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; }

【讨论】：