Question

考虑到以下代码，为什么html,body {height:100%}允许图像在高度和宽度属性上响应（允许测量其子项以百分比+值编写），但html, body{width:100%}仅允许宽度要响应？如果您可以详细了解浏览器如何处理宽度/高度：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>

Answer 1

在这种情况下，通过将body或html的宽度100％或高度100％或两者一起对身体上的任何东西都没有影响！

现在给出的代码将简要介绍百分比在浏览器中的工作方式

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

在这种情况下，浏览器将选择高度auto，即图像的实际高度。当仅宽度改变时，高度将根据宽度而改变。如果宽度变大，高度会变大。没有问题，如果只有高度变化

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

现在完全相反的情况将发生在上面！

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

如果宽度改变，它不会对高度产生影响，反之亦然！谢谢！

为什么html，body {height 100％}同时影响宽度和高度，但宽度100％仅影响宽度？

1 个答案: