CSS踩坑(4) 为什么设置元素高度使用百分比无效

今天继续学习CSS,在学习尺寸时发现了使用百分比值来设置元素的高度存在问题

上CSS代码:

img.normal{
    height: auto;
}

img.big{
    height: 200%;
}

img.small{
    height: 10px;
}

上HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS尺寸</title>
    <link rel="stylesheet" href="../CSS/0112_03.css">
</head>
<body>
<img class="normal" src="../image0103/eg_smile.gif" alt="">
<br/>
<img class="big" src="../image0103/eg_smile.gif" alt="">
<br/>
<img class="small" src="../image0103/eg_smile.gif" alt="">
</body>
</html>

在这里插入图片描述
很明显,类为big的图片未得到放大,生效应该是2倍大,
原因是需要设置父元素的尺寸作为参考对象
在CSS里加行代码

body{
    height: 100px;
}

在这里插入图片描述
即可生效

发布了20 篇原创文章 · 获赞 17 · 访问量 476

猜你喜欢

转载自blog.csdn.net/qwe122343/article/details/103947849