首頁  >  文章  >  web前端  >  CSS裡的min-height和max-height怎麼使用

CSS裡的min-height和max-height怎麼使用

php中世界最好的语言
php中世界最好的语言原創
2017-11-23 09:53:262564瀏覽

最大最小高度的樣式使用非常方便,滿足固定高度弊端.這篇文章就給大家介紹一下,CSS裡如何使用min-heightmax-height

Css min-height應用地方解釋

我們有時設定一個物件盒子時候避免物件沒有內容時候不能撐開,但內容多少不能確定所以又不能固定高度,這個時候我們就會需要css來設定min-height最小高度撐高物件盒子。當內容少時候最小高度能將內容顯示出,如果內容多餘最小高度能裝下時候,物件也會再隨內容增加而增加。

Css max-height最大高度應用解釋

此屬性很少使用,可能是為了避免內容太多將高度撐太高影響佈局美化統一,這個時候我們設置最大高度限制。例如一個table tr td表格物件裡裝一張圖片,而圖片高度不確定,如果太高了不想圖片撐破tr td表格,這個時候透過css max-height限制圖片最大高度是有必要的。

CSS最大最小高度目錄

語法與結構

最大最小高度用法案例

max-height min-height最大最小高度總結

擴充閱讀:

1、CSS隱藏超出溢出內容

2、隱藏html內容

3、css隱藏集合

#4、css height

5、css min-width

6、css max-width

語法與結構 

min-height和max-height的值為數字+html單位

Exp

min-height:50px 最小高度50px
max-height:50px 最大高度50px

CSS用法結構

div{min-height:50px }
div{max-height:50px }

最大最小高度用法案例

#我們設定2個物件盒子一個最小高度(min-height:)與最大高度(max-height)限制,為了方便觀察應用案例效果,我們設定2個盒子CSS寬度相同和css border 邊框樣式。

1、對應css程式碼

.div-min,.div-max{ width:300px; border:1px solid #F00} 
.div-min{ min-height:60px} 
.div-max{ max-height:60px; margin-top:10px}

2、案例html原始碼片段:

<div class="div-min"> 
    最小高度为60px 
</div> 
<div class="div-max"> 
    最大高度为60px 
</div>


我們將兩個物件內容增多

Html程式碼:

<div class="div-min"> 
    最小高度为60px<br /> 
   增加内容<br /> 
    增加内容<br /> 
    增加内容 
</div> 
<div class="div-max"> 
    最大高度为60px<br /> 
    www.php.cn<br /> 
    增加内容<br /> 
     增加内容<br /> 
    增加内容 
</div>

這裡我們都將2個物件盒子裡內容增加超出60px高度限制

小技巧,這裡如果對css命名“.div-max”加入overflow:hidden樣式即可隱藏最大高度顯示溢位內容。

我們設定2個盒子一個限制最小高度,一個設定限制最大高度,最小高度限制的物件如果內容不多不會超出限制最小高度,此時物件會顯示最小高度限制值,如果內容比較多超過了最小高度限制能裝下單,此時物件會自動增高。而後者最大高度max-height限制,內容少時候不會有什麼差別,但內容多時候,而最大高度限制也裝不下時候,內容會超出最大高度限制,但物件本身還是最大高度,這樣就出現內容溢出超出物件盒子,我們即可使用css overflow屬性隱藏溢出內容。

min-height和max-height的使用方法就這麼多,更多精彩請關注php中文網其它相關文章!

相關閱讀:

HTML裡空格字元怎麼輸入

#在HTML裡p段落行高行距怎麼設定

怎麼知道瀏覽器支不支援html5

#

以上是CSS裡的min-height和max-height怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn