CSS1.0最小高度指的是一個元素最小可以設(shè)置的高度值。在CSS1.0中,可以使用“height”屬性來設(shè)置元素的高度,但是如果元素的內(nèi)容太少,導(dǎo)致高度不夠,這時候就需要使用最小高度來保證元素的高度不會小于一定值。
.box { height: 50px; /* 設(shè)置高度為50px */ min-height: 30px; /* 設(shè)置最小高度為30px */ }
通過上面的代碼,元素.box的高度將會被設(shè)置為50px,但是如果元素的內(nèi)容不足50px,將會顯示出空白區(qū)域,這時候最小高度就派上了用場。
CSS1.0中的最小高度有以下幾個特點:
- 只適用于塊級元素
- 無法設(shè)置成百分比值,只能是固定值或自適應(yīng)值
- IE6/7不支持最小高度屬性
使用最小高度的場景比較多,例如:
1. 控制輸入框、文本框等表單元素的高度;
2. 控制圖片、文本等元素的高度,保證元素不會出現(xiàn)過多空白區(qū)域;
3. 控制容器元素的高度,確保裝載內(nèi)容的高度不會小于一定值。
.text { border: 1px solid #ccc; height: 50px; min-height: 30px; padding: 5px; margin-bottom: 10px; } .img { width: 200px; height: 200px; min-height: 150px; background: #f5f5f5 url('loading.gif') center center no-repeat; }
上面的代碼中,我們分別給輸入框和圖片設(shè)置了最小高度,以確保它們不會因內(nèi)容過少而出現(xiàn)過多的空白區(qū)域。
盡管CSS1.0的最小高度不夠靈活,但是已經(jīng)為后來的CSS版本提供了思路,現(xiàn)在我們已經(jīng)可以使用更多的方法來控制元素的最小高度,比如CSS3中的“min-content”、 “minmax()”等。