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

我有一个问题，我不明白。如果我使用宽度百分比，我会期望元素计算其大小（以百分比）范围内的边框，边距或填充。但实际上这些价值被添加到他们的大小，我认为是错误的。我的期望错了吗？以下示例显示了此问题。我希望这两个“divs”“左”和“右”都在一条线上。如果我删除“边界”，它按预期工作。CSS使用百分比和边距，填充或边框

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

来源

2011-12-25 Alex004

这是完全正常的。这不是你一开始可能期望的，但CSS就是这样工作的。

即使没有百分比：

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

这#width格将占据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; }

来源

2011-12-25 12:29:03 Robin

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

来源

2011-12-25 12:29:35

填充或边框总是添加到元素大小，从里到外。

保证金永远不会增加大小，但会增加元素外的空间。

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

回顾盒模型可以帮助--->HERE

来源

2011-12-25 12:29:55 Scott

，你能做些什么来解决这个问题是使用box-sizing。见http://jsfiddle.net/Marwelln/YYkxK/

box-sizing:border-box

来源

2011-12-25 12:34:04 Marwelln

适用于IE8 + – frnhr 2013-08-08 20:44:08

不适用于Firefox 27（截至2014年3月的当前版本）。列落到两行。 – Loren 2014-03-11 16:49:04

在超现代的浏览器可以使用计算（）来解决这个问题：理论值（80％ - 2像素）。是的，这是正常的。如果您将宽度设置为100px，并将边框设置为150px，那么如果边框未添加，会发生什么情况？

来源

2011-12-25 14:16:14 powerbuoy

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

回答

相关问题