邊界如何影響內部div的大小？

我想了解邊界如何影響內部div的大小和可視化。我在我的應用程序中遇到了這個問題，在帶有錯誤的字段周圍顯示邊框，我似乎無法獲得正確的CSS。（順便說一句，很明顯，我還沒有完全「獲得」CSS，我正在研究它）。邊界如何影響內部div的大小？

考慮一下這個頁面：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Booking Dojo Application</title> 

    <style type="text/css"> 

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

#appContainer { 
    height: 50px; 

    width: 500px; 
    background-color: red; 
} 

#innerContainer { 
    height: 50px; 
    border-width: 5px; 
    border-style: solid; 
    /*width: 100%;*/ 
} 

#ruler { 
    width: 500px; 
    background-color: blue; 
    height: 20px; 

} 

    </style> 

    </head> 

    <body> 
    <div id="ruler"></div> 

    <div id="appContainer"> 
     <div id="innerContainer"> 
     <span>AHAH</span> 
     </div> 
     </div> 
    </body> 

</html>

如果我不指定內部div的寬度，那麼它的寬度是一樣的，包括邊境父。然後，如果我指定內部div的寬度，會發生一些奇怪的事情：Chrome會將邊框放在「外面」，但是......僅限於右側？！？

我明顯錯過了一些東西。所以：

爲什麼我看到我所看到的？

我喜歡做什麼，知道什麼內部div的寬度應該指定爲了獲得相同的結果爲「無寬度」？（除了正在進行的「99％」，這似乎爲「工作」，在我的應用程序，但是.... MEH）

來源

2014-01-18 Merc

http://jsfiddle.net/X3gw6/1/

您需要：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;

更多信息： http://css-tricks.com/box-sizing/

基本上，內部的div高度和寬度更大，因爲邊界......造成的問題...

來源

2014-01-19 00:03:28 sinisake