使用填充將元素高度更改爲0px

Question

請考慮下面的示例。我有利潤率爲橙色元素，邊框爲黑色，填充是藍色和內容框爲紅色。

重現

1. 切換箱縮放邊框盒的.box的內容框和之間。請注意，填充和邊框包含在高度中。保留到邊框。

2. 現在開始減少.box的的高度財產。首先要52px，然後再向下0像素

問題

1. 的.box的高度不受影響52px和之間 0像素。爲什麼是這樣？有沒有辦法進一步降低高度？

2. 假設.box包含通過websocket實時接收的數據。我想通過使用css3來動畫數據進入屏幕。該框應增加其高度從0到全高，類似jquery .slideDown()。我設置了全部轉換爲0.3s。什麼是最初的CSS和後數據的CSS？ style="padding:0;height:0;"到style="padding:16px;height:auto"？有沒有硬件加速的方式來動畫？

.box { 
 
    background-image: linear-gradient(to bottom, #C33838, #C33838), linear-gradient(to bottom, #0012FF, #0012FF), linear-gradient(to bottom, #000000, #000000); 
 
    background-clip: content-box, padding-box, border-box; 
 
    border: 0 solid transparent; 
 
} 
 
.container { 
 
    overflow: hidden; 
 
    background: #926C0C; 
 
}

<div class="container"> 
 
    <div class="box" style=" 
 
    box-sizing: border-box; 
 
    height: 100px; 
 
    padding: 16px; 
 
    border-width: 10px; 
 
    margin: 30px;"> 
 
    Hello 
 
    </div> 
 
</div>

Answer 1

的什麼 「邊界框」 的解釋是：

邊界框：的寬度和高度屬性（和最小/最大屬性） 包含內容，填充和邊框，但不包括邊距

通常，如果未專門設置爲border-box，則高度和寬度僅指內容。在其上添加填充和邊框。

---

你舉的例子：

所以，當你你的高度設置爲52px，內容不見了，這一切仍然（不包括保證金）爲填充和邊框的52px價值。

padding total = 32px 
border total = 20px 
total   = 52px 

---

原因，你不能降低它更多：

每developer.mozilla.org's 'box-sizing' page，你不能讓內容負，而你的情況是什麼，比52px低的高度。

內容框不能爲負數並且會被置爲0，因此無法使用邊框使 使元素消失。