阿狗工具
CSS基础-06-元素大小（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）
2024-04-09 18:50:11 阅读数 1185
1. 设置元素尺寸（height/width）
语法示例
- 自动大小
height:auto;width:auto;
- 像素设置
height:100px;width:100px;
- 百分百设置
height:50%;width:10%;
完整示例
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-SONG</title>
<style>
p {
border: 1px solid black;
height:100px;width:100px;
}
</style>
</head>
<body>
<p>元素大小测试</p>
</body>
</html>
- 结果显示
image.png
2. 最大值、最小值（max-height|width、min-height|width）
语法示例
- 设置元素最大值
max-height: 50px;
max-width:500px;
- 设置元素最小值
min-height: 50px;
min-width:500px;
完整示例（最大值限制）
当元素高设置为400px，但是最大值限制为200px，最后元素高度为200px。
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-SONG</title>
<style>
p {
border: 1px solid black;
height: 200px;
width: 400px;
max-width: 200px;
}
</style>
</head>
<body>
<p>元素大小测试</p>
</body>
</html>
-
结果显示
image.png
完整示例（最小值限制）
设置对打宽度100px，自小宽度设置为50%。
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-SONG</title>
<style>
p {
border: 1px solid black;
height: 200px;
width: 100px;
min-width: 50%;
}
</style>
</head>
<body>
<p>元素大小测试</p>
</body>
</html>
-
结果显示
image.png
3. 设置行间距（line-height）
语法示例
- 用像素设置
line-height:10px;
line-height:50px;
- 用百分比设置
line-height:30%;
line-height:200%;
- 用数值设置
line-height:0.3;
line-height:2;
完整示例
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CROW-SONG</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<p>平生无用是逍遥，</p>
<p>应悔曾效楚歌狂。</p>
</body>
</html>
-
结果
image.png
image.png