4.24css

一、今日学习内容

 

CSS 尺寸 (Dimension)

 

所有CSS 尺寸 (Dimension)属性

属性描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

设置元素高度

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>1</title> 
<style>
img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}
</style>
</head>

<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" />
<p class="ex">这个段落的高和宽是 100px.</p>
<p>这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本。
这是段落中的一些文本。这是段落中的一些文本.</p>
</body>
</html>
复制代码

 

 使用百分比设置图像高度

 

复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>1</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="logocss.gif" width="95" height="84" /><br>
<img class="big" src="logocss.gif" width="95" height="84" /><br>
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>
复制代码

 

 

二、遇到的问题

 暂无

三、明日计划

暂无

posted @ 2021-04-24 21:58  居酿圆子  阅读(60)  评论(0)    收藏  举报