训练营 坚持完成打卡任务 报名费全额返 更多>>
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
-
208人报名 05月11日 开班
搜索
历史记录 清除记录
- 你还没搜索过喔。
点击刷新
使用像素值设置图像的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
img.normal
{
height:auto;
}
img.big
{
height:120px;
}
p.ex
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img class="normal" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png" width="95" height="84" />
<p class="ex">该段落的高度和宽度为100px.</p>
<p>这是一个段落中的一些文本. 这是一个段落中的一些文本.
这是一个段落中的一些文本.这是一个段落中的一些文本.
这是一个段落中的一些文本. 这是一个段落中的一些文本.</p>
</body>
</html>
使用百分比设置图像的高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="small" src="/attachments/cover/cover_css.png" width="95" height="84" />
</body>
</html>
使用像素值来设置元素的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
img {width:200px;}
</style>
</head>
<body>
<img src="/attachments/cover/cover_css.png" width="95" height="84" />
</body>
</html>
使用百分比来设置元素的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
img.normal {width:auto;}
img.big {width:50%;}
img.small {width:10%;}
</style>
</head>
<body>
<img class="normal" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="big" src="/attachments/cover/cover_css.png" width="95" height="84" /><br>
<img class="small" src="/attachments/cover/cover_css.png" width="95" height="84" />
</body>
</html>
设置元素的最大高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p
{
max-height:50px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这个段落的最大高度设置为50px. 这个段落的最大高度设置为50px. 这个段落的最大高度设置为50px. 这个段落的最大高度设置为50px. 这个段落的最大高度设置为50px. 这个段落的最大高度设置为50px.这个段落的最大高度设置为50px.这个段落的最大高度设置为50px. 这个段落的最大高度设置为50px. 这个段落的最大高度设置为50px.</p>
</body>
</html>
使用像素值设置元素的最大宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p
{
max-width:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>此段落的最大宽度设置为100px.</p>
</body>
</html>
使用百分比来设置元素的最大宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p
{
max-width:20%;
background-color:yellow;
}
</style>
</head>
<body>
<p>这是一些文本. 这是一些文本. 这是一些文本.
这是一些文本. 这是一些文本. 这是一些文本.
这是一些文本. 这是一些文本.这是一些文本.</p>
</body>
</html>
设置元素的最低高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p
{
min-height:100px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这个段落的最小高度设置为100px.</p>
</body>
</html>
使用像素值来设置元素的最小宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习猿地</title>
<style>
p
{
min-width:150px;
background-color:yellow;
}
</style>
</head>
<body>
<p>这个段落的最小宽度设置为150px.</p>
</body>
</html>
使用百分比来设置元素的最小宽度
<!DOCTYPE html>
<html>
<head>
<style>
p
{
min-width:200%;
background-color:yellow;
}
</style>
</head>
<body>
<p>这是一些文本. 这是一些文本. 这是一些文本.
这是一些文本. 这是一些文本.这是一些文本.
这是一些文本. 这是一些文本. 这是一些文本.</p>
<img src="/attachments/cover/cover_css.png" width="95" height="84" />
</body>
</html>
© 著作权归作者所有
举报
综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论
发表评价或提出疑问（可获得2-8个猿宝）
文章评分：
请选择内容评分
难易程度：
太简单
简单
适中
有点难
太难了
请选择课程难易程度 (+2个猿宝)