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使用百分比和邊距，填充或邊框

回答

相關問題