爲什麼父母和孩子的邊界不重疊？

我試圖創建一個簡單的佈局使用純HTML和CSS：爲什麼父母和孩子的邊界不重疊？

<div class="container"> 
    <div class="left"> 
     <div class="top bordered"></div> 
     <div class="bott bordered"></div> 
    </div> 
    <div class="right bordered"> 
    </div> 
</div> 

.container {height: 500px; background-color: #eeeeee;} 
.left {float: left; width: 49%; height: 80%; position: relative;} 
.right {float: right; width: 50%; height: 80%;} 
.bordered {border: 1px solid #aaaaaa; border-radius: 5px;} 
.top {height: 20%; width: 100%; position: absolute; bottom: 0;} 
.bott {height: 30%; width: 100%;}

請看看http://jsfiddle.net/SLfHf/。我想要兩個底部邊界（左側和右側）顯示在相同的高度。但是，正如你所看到的，一個更高一點。調查我發現，即使沒有任何填充和邊距，兒童邊界不會與父邊界重疊。所以問題是：爲什麼？

來源

2013-07-19 Doob

這是多麼的默認CSS盒模型（稱爲content-box）的作品。框的大小等於其指定的寬度/高度尺寸+填充+邊框。

box-sizing: border-box是一個CSS屬性，用於更改框模型，使填充和邊框位於指定的尺寸範圍內而不是添加到其中（例如，指定的寬度/高度 - 填充 - 邊框）。在過去的幾年中，使用它越來越受歡迎，因爲許多人認爲它是一個更容易使用的盒子模型，它可以使響應式設計變得更容易一些。所有你需要做的就是添加到您的樣式表：

* { box-sizing: border-box; }

邊界從未與相鄰的邊界，無論盒模型或上下文崩潰。您需要單獨設置邊框（即border-top: 1px solid #000）才能完成該行爲。

相鄰盒子在表格外有唯一的摺疊屬性的唯一時間是在某些特定情況下相鄰的邊緣將摺疊：more info here。

來源

2013-07-19 13:50:20 Ennui

如果要包括內boxe的HIGHT/weidth邊界，你應該使用：

box-sizing:border-box;

http://www.w3.org/TR/css3-ui/#box-sizing0 （可能需要前綴:)）

來源

2013-07-19 13:40:32

你的小提琴更新;）http://jsfiddle.net/SLfHf/1/ –

非常感謝，它似乎是一個解決方案。但無論如何，我無法理解默認行爲。如果我們有兩個嵌套div，內部的寬度/高度設置爲100％...爲什麼他們有不同的邊界？ – Doob

+1永遠不會知道那個風格元素。學到了新東西。 – Tombala

爲什麼父母和孩子的邊界不重疊？

回答

相關問題