CSS里的min-height與max-height如何使用

Css min-height應(yīng)用地方解釋

我們有時(shí)設(shè)置一個(gè)對(duì)象盒子時(shí)候避免對(duì)象沒有內(nèi)容時(shí)候不能撐開，但內(nèi)容多少不能確定所以又不能固定高度，這個(gè)時(shí)候我們就會(huì)需要css來設(shè)置min-height最小高度撐高對(duì)象盒子。當(dāng)內(nèi)容少時(shí)候最小高度能將內(nèi)容顯示出，如果內(nèi)容多余最小高度能裝下時(shí)候，對(duì)象也會(huì)再隨內(nèi)容增多而增高。

Css max-height最大高度應(yīng)用解釋

此屬性很少使用，可能是為了避免內(nèi)容太多將高度撐太高影響布局美化統(tǒng)一，這個(gè)時(shí)候我們?cè)O(shè)置最大高度限制。比如一個(gè)table tr td表格對(duì)象里裝一個(gè)圖片，而圖片高度不確定，如果太高了不想圖片撐破tr td表格，這個(gè)時(shí)候通過css max-height限制圖片最大高度是有必要的。

CSS最大最小高度目錄

語法與結(jié)構(gòu)

最大最小高度用法案例

max-height min-height最大最小高度總結(jié)

擴(kuò)展閱讀：

1、CSS隱藏超出溢出內(nèi)容

2、隱藏html內(nèi)容

3、css隱藏集合

4、css height

5、css min-width

6、css max-width

語法與結(jié)構(gòu)

min-height和max-height的值為數(shù)字+html單位

Exp

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

CSS用法結(jié)構(gòu)

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

最大最小高度用法案例

我們?cè)O(shè)置2個(gè)對(duì)象盒子一個(gè)最小高度(min-height:)與最大高度(max-height)限制,為了便于觀察應(yīng)用案例效果，我們?cè)O(shè)置2個(gè)盒子CSS寬度相同和css border 邊框樣式。

1、對(duì)應(yīng)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>

我們將兩個(gè)對(duì)象內(nèi)容增多

Html代碼：

<div class="div-min"> 
    最小高度為60px<br /> 
   增加內(nèi)容<br /> 
    增加內(nèi)容<br /> 
    增加內(nèi)容 
</div> 
<div class="div-max"> 
    最大高度為60px<br /> 
    www.php.cn<br /> 
    增加內(nèi)容<br /> 
     增加內(nèi)容<br /> 
    增加內(nèi)容 
</div>

這里我們都將2個(gè)對(duì)象盒子里內(nèi)容增加超出60px高度限制

小技巧，這里如果對(duì)css命名“.div-max”加入overflow:hidden樣式即可隱藏最大高度顯示溢出內(nèi)容。

我們?cè)O(shè)置2個(gè)盒子一個(gè)限制最小高度，一個(gè)設(shè)置限制最大高度，最小高度限制的對(duì)象如果內(nèi)容不多不會(huì)超出限制最小高度，此時(shí)對(duì)象會(huì)顯示最小高度限制值，如果內(nèi)容比較多超過了最小高度限制能裝下單，此時(shí)對(duì)象會(huì)自動(dòng)增高。而后者最大高度max-height限制，內(nèi)容少時(shí)候不會(huì)有什么區(qū)別，但內(nèi)容多時(shí)候，而最大高度限制也裝不下時(shí)候，內(nèi)容會(huì)超出最大高度限制，但對(duì)象本身還是最大高度，這樣就出現(xiàn)內(nèi)容溢出超出對(duì)象盒子，我們即可使用css overflow屬性隱藏溢出內(nèi)容。

min-height和max-height的使用方法就這么多，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML里空格字符怎么輸入

在HTML里p段落行高行距怎么設(shè)置

怎樣知道瀏覽器支不支持html5

以上就是CSS里的min-height和max-height怎么使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！