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

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

我是网络开发的初学者, 我想将我的主页元素(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>

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

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

html css image flexbox percentage
1个回答
0
投票

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

div
的父元素必须绝对调整大小
(以像素、视口单位、em 等为单位)。
我建议您检查 w3schools 的 CSS 单元参考:https://www.w3schools.com/cssref/css_units.php

还有容器div #icons

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

img

分配实际宽度值。

© www.soinside.com 2019 - 2024. All rights reserved.