CSS基础-06-元素大小（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）
CSS基础-06-元素大小（设置元素尺寸height/width、最大值max-height max-width、最小值min-height min-width、设置行间距 line-height）
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>结果显示
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>结果显示
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>
结果
粤公网安备 44130202000819号