<style type="text/css">
* {
box-sizing: border-box;
}
#max-box {
width: 500px;
height: 500px;
background-color: aliceblue;
margin: 0 auto;
/*position: relative;*/
/*padding: 10px 10px;*/
}
#min-box {
/*position: absolute;*/
width: 300px;
height: 300px;
background-color: #4169E1;
margin: 30px 100px 100px;
}
</style>
<body>
<p id="max-box">
<p id="min-box">
</p>
</p>
</body>
如图、我并没有给父元素 max-box 加 margin，但是也被撑高了
首先，這和
box-sizing無關，無論是否設置，都會發生題主所說的情況。這個現象叫做外邊距合併（Collapsing Margins），在w3c的css2.2規範文件 - collapsing margins中提到了：
這裡提到的就是垂直外邊距發生合併的條件，它們必須同時滿足。題主的例子裡，就屬於"top margin of a box and top margin of its first in-flow child"的情況，此外，它們之間沒有任何行內文字，內邊距等“隔離元素”，因此會變成這樣。
對應的，只要改變一些狀態，就可以避免垂直外邊距合併，題主註解掉的
position: absolute;就是其中一種。這是CSS樣式margin疊加的問題：
如果相鄰兩個元素都有margin，那麼間距會取兩者較大的作為間距距離；
同理，對於包含的兩個元素也是一樣，特殊的是如果包含的兩個元素，父元素沒有margin，而子元素有margin，並且父元素沒有border和padding的話，那麼子元素的margin會溢出到父元素外，要解決這個問題有很多方法，如設定1px的padding，或是設定透明的border等方法來防止margin溢出。
為父級元素設定：overflow：hidden；
小的p的margin-top是30px
不是因為box-sizing的問題，min-box的margin-top為30px,會影響父級元素跟著一起有一個margin-top，給max-box添加一個overflow：hidden；就可以了
有關 margin 摺疊的細節和用法Collapsing Margins