gpt4 book ai didi

html - 为什么html,body {height 100%}同时影响宽高,而width 100%只影响宽度?

转载 作者:行者123 更新时间:2023-11-28 05:16:10 25 4
gpt4 key购买 nike

给定以下代码,为什么 html,body {height:100%} 允许图像在高度和width 属性,但是 html, body{width:100%} 只允许宽度响应?如果您能详细说明浏览器如何处理 width/height:auto(我认为如果未选择任何内容,这是默认值),那就太好了!

JSBin:https://jsbin.com/dafejayasi/edit?html,output

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>

html, body{
height: 100%;
margin:0;
padding:0;
}

.image{
height:40%;
width:50%;
}
</style>
<body>
<img class = "image" src="http://www.placehold.it/700x300" alt="Image of storefront">
</body>
</html>

最佳答案

在这种情况下,将 body 或 html 的宽度 100% 或高度 100% 或两者同时设置不会对 body 产生任何影响!

现在给定的代码将让您简要了解百分比在浏览器中的工作原理

 .image{
width:100%;
//height not mention!
}

在这种情况下浏览器将选择高度 auto ,这意味着图像的实际高度。只有当宽度改变时,高度才会根据宽度改变。如果宽度变大,高度也会变大。如果只有高度变化,则没有什么重要的

.image{
height:100%;
//width not mention
}

现在完全相反的情况会发生在上面!

.image{
width:100%;
height:100%;
}

这里如果宽度改变不会影响高度,反之亦然!谢谢!

关于html - 为什么html,body {height 100%}同时影响宽高,而width 100%只影响宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39302688/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com