css中相对宽度是如何计算的

Question

我是网络开发的初学者，我想将我的主页元素（div）设置为Flex列，其中第一个元素是一个Flex行容器，它再次包含一个Flex容器div（图标）当我这样做时，我发现包含 img 元素的容器的宽度没有减小以适应所有 imgs 为什么会发生这种情况？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0px;
    }

    #home-page {
      display: flex;
      flex-direction: column;
    }

    * {
      border: 1px solid;
      margin: 5px;
    }

    nav {
      display: flex;
      height: 100px;
    }


    #icons {
      display: flex;
    }

    img {
      height: 100%;
      margin: 0px;
    }
  </style>
</head>

<body>
  <div id="home-page">
    <nav>
      <div id="icons">
        <div><img src="/images/icons/menu-icon.png" alt=""></div>
        <div><img src="/images/icons/search-icon.png" alt=""></div>
      </div>
    </nav>
  </div>
</body>

</html>

这是输出的图像还请解释一下，当存在所有相对大小（百分比等）时，如何计算任何元素的宽度和高度

当我将宽度或高度设置为像素值时，我就工作了，但我想知道为什么它不能以相对尺寸工作（我想让大多数尺寸相对，以便我的网站变得响应）

Answer 1

相对百分比宽度/高度单位是相对于最接近的绝对大小的父元素计算的。假设一个 div 元素占据其父元素的 50%，则该

div

的父元素必须绝对调整大小

（以像素、视口单位、em 等为单位）。

我建议您检查 w3schools 的 CSS 单元参考：https://www.w3schools.com/cssref/css_units.php

还有容器div #icons

要正确覆盖其子元素，您可以尝试为其子元素

img

分配实际宽度值。

css中相对宽度是如何计算的

问题描述投票：0回答：1

1个回答

最新问题

css中相对宽度是如何计算的

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1