盒子大小調整+邊框+絕對子女

至於我，大綱的行爲錯了，不是嗎？ .outside元素的盒子模型不應包含其邊框，以便absolute定位的子元素也概括了這些邊框？

這是一個已知的問題？這真的是正確的行爲嗎？如果是這樣，有人可以向我解釋爲什麼它是？

請不要對如何解決這個問題發表評論。但請解釋問題出現的原因。

感謝提前:)

問候 PHLIPS

您沒有設置'border'但'outline' ...這是問題 – jakob

https://jsfiddle.net/2mytb43a/1/ - 現在有邊框 - 同樣的問題 – phlipsgeisler

等待..你究竟在問什麼？你想從div內的邊界到哪裏？ – jakob

這是正常的，因爲position: absolute這將一個元件相對於容器位置。默認情況下，容器是瀏覽器窗口，但是如果父元素上設置了position: relative或position: absolute，那麼它將作爲爲其子項定位座標的父級。

與父母，你有2個屬性：

border-right: 50px #f5f solid; 
border-bottom: 50px #f5f solid;

如果你刪除它，輪廓將是全尺寸的，因爲你設置4個屬性：top, right, bottom, left爲0（將其更改爲看到的變化）。

2016-05-25 09:55:59

好的。但是由於'box-sizing：border-box'，不應該將邊框放在我的父容器中嗎？因此，子元素覆蓋父母的邊界？ – phlipsgeisler

我想你讓我錯了。有了這個代碼（https://jsfiddle.net/2mytb43a/）我期待這個結果（https://jsfiddle.net/2mytb43a/2）。 – phlipsgeisler

只是box-sizing: border-box是不夠的，你需要從父母繼承的寬度和高度：

.inside { 
    position: absolute; 
    outline: #00f solid 2px; 
    width: inherit; 
    height: inherit; 
}

2016-05-25 10:16:34 jakob

好的，謝謝。但爲什麼'top/left/right/bottom：0'在這裏沒有工作？ – phlipsgeisler

因爲你沒有設置寬度/高度..沒有寬度/高度繼承，所以孩子不知道什麼是新的大小設置的新的盒子大小。 – jakob

回答