CSS 使用百分比和边距、填充或边框
Posted
技术标签:
【中文标题】CSS 使用百分比和边距、填充或边框【英文标题】：CSS using percentage and margin, padding or border 【发布时间】：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>
【问题讨论】：
【参考方案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;
【讨论】：
以上是关于CSS 使用百分比和边距、填充或边框的主要内容，如果未能解决你的问题，请参考以下文章
css（字体，文本，边距，边框，阴影，背景，渐变，多重背景，列表）