<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 尺寸(Dimension)</title>
<style>
img.normal{
height: auto;
}
img.big{
height: 120px;
}
p.ex{
height: 50px;
width: 100px;
background: #A7C942;
}
html,body{
height: 100%;
}
img.normal1{
height: auto;
}
img.big1{
height: 30%;
}
img.small1{
height: 10%;
}
p.maxheight{
max-height: 50px;
background: #FF00FF;
}
p.minheight{
min-height: 100px;
background: #FF00FF;
}
p.maxwidth{
max-width: 200px;
background-color: #98bf21;
}
p.minwidth{
min-width: 200px;
background: red;
}
</style>
</head>
<body>
<h2>实例1 设置元素的高度</h2>
<img class="normal" src="http://www.runoob.com/images/logo.png" alt="LOGO"> <br><br>
<img class="big" src="http://www.runoob.com/images/logo.png" alt="LOGO"> <br><br>
<p class="ex">这是一个文本</p>
<h2>实例2 百分比设置图像的高度</h2>
<img class="normal1" src="http://www.runoob.com/images/logo.png" alt="LOGO"> <br><br>
<img class="big1" src="http://www.runoob.com/images/logo.png" alt="LOGO"> <br><br>
<img class="small1" src="http://www.runoob.com/images/logo.png" alt="LOGO"> <br><br>
<h2>实例3 设置元素的最大高度 宽度 最小高度 宽度</h2>
<p class="maxheight">
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本</p>
<p class="minheight">
这是一个文本 这是一个文本</p>
<p class="maxwidth">
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本
这是一个文本 这是一个文本</p>
<p class="minwidth">
这是一个文本 这是一个文本</p>
</body>
</html>
<!--
所有CSS 尺寸 (Dimension)属性
属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。
-->
网友评论