您的位置:首页> 前端教程> CSS教程
文章导航

CSS max-width/min-width设置元素尺寸

2018-8-6 00:34| 作者: admin| 查看: 1701| 评论: 0|来自: 蚂蚁部落

使用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属性规定的值之间。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

最新评论

返回顶部