歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:阿森纳热刺 > DIV+CSS基礎 >

阿森纳热刺 www.tzxsac.com.cn 阿森纳热刺之min-height最小高度與max-height最大高度教程篇

為什么我們要使用min-height和max-height樣式屬性?

Css min-height應用地方解釋
我們有時設置一個對象盒子時候避免對象沒有內容時候不能撐開,但內容多少不能確定所以又不能固定高度,這個時候我們就會需要阿森纳热刺來設置min-height最小高度撐高對象盒子。當內容少時候最小高度能將內容顯示出,如果內容多余最小高度能裝下時候,對象也會再隨內容增多而增高。

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

CSS最大最小高度目錄
  1. 語法與結構
  2. 最大最小高度用法案例
  3. max-height min-height最大最小高度總結

擴展閱讀
1、CSS隱藏超出溢出內容
2、隱藏html內容
3、css隱藏集合
4、css height
5、css min-width
6、css max-width

一、語法與結構   -   TOP

1、語法
min-height和max-height的值為數字+html單位

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

2、CSS用法結構
阿森纳热刺{min-height:50px }
div{max-height:50px }

二、最大最小高度用法案例   -   TOP

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

1、對應css代碼

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

2、案例html源代碼片段:

  1. <div class="divcss5-min"> 
  2.     最小高度為60px 
  3. </div> 
  4. <div class="divcss5-max"> 
  5.     最大高度為60px 
  6. </div> 

3、最大最小高度案例截圖

css最大高度最小高度案例截圖
阿森纳热刺之最小最大高度樣式案例截圖

4、我們將兩個對象內容增多
Html代碼

  1. <div class="divcss5-min"> 
  2.     最小高度為60px<br /> 
  3.     DIVCSS5增加內容<br /> 
  4.     增加內容<br /> 
  5.     divcss5增加內容 
  6. </div> 
  7. <div class="divcss5-max"> 
  8.     最大高度為60px<br /> 
  9.     阿森纳热刺 www.tzxsac.com.cn<br /> 
  10.     增加內容<br /> 
  11.     divcss5增加內容<br /> 
  12.     增加內容 
  13. </div> 

這里我們都將2個對象盒子里內容增加超出60px高度限制

5、實驗截圖

瀏覽器中min-height max-height案例截圖
瀏覽器測試min-height與css max-height截圖

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

CSS解決max-height樣式bug案例截圖
阿森纳热刺案例之解決最大高度max-height兼容

6、阿森纳热刺案例解釋
我們設置2個盒子一個限制最小高度,一個設置限制最大高度,最小高度限制的對象如果內容不多不會超出限制最小高度,此時對象會顯示最小高度限制值,如果內容比較多超過了最小高度限制能裝下單,此時對象會自動增高。而后者最大高度max-height限制,內容少時候不會有什么區別,但內容多時候,而最大高度限制也裝不下時候,內容會超出最大高度限制,但對象本身還是最大高度,這樣就出現內容溢出超出對象盒子,我們即可使用css overflow屬性隱藏溢出內容。

三、max-height min-height最大最小高度總結   -   TOP

最大最小高度樣式使用非常方便,滿足固定高度弊端,但現在IE6卻不支持,IE7及以上瀏覽器和其它瀏覽器均支持,在接下來文章中我們會介紹ie6 min-height兼容ie6 max-height兼容。

如需轉載,請注明文章出處和來源網址://www.tzxsac.com.cn/rumen/r422.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
阿森纳热刺文章修訂日期:2018-08-14 17:37 原創:阿森纳热刺
本文阿森纳热刺 www.tzxsac.com.cn DIVCSS5版權所有。