CSS max-width/min-width設定元素尺寸

admin發表於2018-08-06
CSS

使用CSS設定元素的尺寸是最為簡單基礎的操作，估計也是初學者最先掌握的技能之一。

使用width和height屬性設定極為簡單，因為這兩個屬性功能非常直觀。

max-width和max-height等屬性相較而言稍微難一點。

下面分別通過程式碼例項對幾個屬性分別做一下介紹。

一.width和height屬性:

通過width和height個屬性即可實現設定元素的長度和寬度：

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  border:1px dotted red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

上面的程式碼設定元素的寬度為100px，高度為50px。

特別說明：元素的寬度預設是100%，也就是會在橫向上填滿父元素。

二.max-width和min-width屬性：

用來設定元素的最大寬度和最小寬度。

看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  max-width:900px;
  min-width:700px;
  height:120px;
  background-color:#ccc;
}
#ant {
  background:#F00;
  width:700px;
  height:100px;
}
</style>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
</body>
</html>

設定元素最大寬度為900px，最小寬度為700px，這意味著什麼？

（1）.寬度可以在橫向上儘量填滿父級元素，但會被限定在max-width之內，所以如果父元素足夠寬，外層div元素表現為900px。

（2）.當父元素寬度介於700px-900px，那麼寬度自適應。

（3）.如果父元素寬度小於700px，它的寬度保持在700px。

三.max-height和min-height屬性:

用來設定元素的最大高度和最小高度。

看如下程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width:500px;
  max-height:600px;
  min-height:300px;
  background-color:#ccc;
}
#ant {
  background:#F00;
  width:400px;
  height:400px;
}
</style>
<script>
window.onload = function () {
  var ant = document.getElementById("ant");
  var rang = document.getElementById("range");
  rang.onmousemove = function () {
    ant.style.height = this.value + "px";
  }
}
</script>
</head>
<body>
<div id="box">
  <div id="ant"></div>
</div>
<input type="range" min="0" max="700" value="400" id="range"/>
</body>
</html>

上述程式碼設定最大高度為600px，最小高度為300px，這意味著：

（1）.與寬度不同，高度不會在垂直方向上儘可能填滿父元素，不過同樣最大高度被限定在max-height。

（2）.如果元素內容介於300px-600px之間，那麼高度會自適應。

（3）.如果內容高度小於300px，那麼高度會保持在min-height規定的值。

拖動滑動軸可以檢視效果，外層div的高度能夠自適應內部元素的高度，但是被限定在min-height和max-height屬性規定的值之間。

相關文章