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

Question

给定以下代码，为什么html,body {height:100%}允许图像在height和width属性下都响应（允许子级的度量值以百分比+形式写），但是html, body{width:100%}仅允许宽度响应？ 如果您可以详细介绍浏览器如何处理width / height：auto（我相信如果未选择任何内容，则默认值为默认值），那就太好了！

JSBin： https ：//jsbin.com/dafejayasi/edit ？ html，输出

<!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 个解决方案

解决方案1
0 2016-09-03 03:24:18

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

问题描述

1 个解决方案

解决方案1 0 2016-09-03 03:24:18

解决方案1
0 2016-09-03 03:24:18