max-height和height屬性的區別簡單介紹

antzone發表於2017-03-22

本章節簡單介紹一下max-height屬性和height屬性的區別。

當然這個問題是非常的簡單，不過還是寫一下，寄希望能夠給需要的朋友帶來一定的幫助。

這兩個屬性的最大區別就是，height屬性定死了一個高度值，而max-height是規定的了一個高度範圍，可允許的返回區間是0-max-height屬性規定的值，程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#left,#right{
  width:400px;
  height:200px;
  background-color:red;
}
#left{float:left}
#right{float:right}
#left #inner{
  width:140px;
  max-height:80px;
  background-color:blue;
  margin:0px auto;
}
#right #inner{
  width:140px;
  height:80px;
  background-color:blue;
  margin:0px auto;
}
</style>
</head>
<body>
<div id="left">
  <div id="inner">螞蟻部落成立於2014年，位於青島</div>
</div>
<div id="right">
  <div id="inner">螞蟻部落成立於2014年，位於青島</div>
</div>
</body>
</html>

相關文章