css 关于固定位置元素宽度性质的一个问题

bjp0bcyl 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(223)

我知道将固定位置元素的width属性设置为100%会使其与视口一样宽，并且它可以按预期使用以下代码工作：

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>TEST</title>
        <meta name="viewport" content="initial-scale=1, width=device-width">

        <style>

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            nav {
                position: fixed;
                background-color: black;
                width: 100%;
                height: 70px;
            }
        </style>
    </head>

    <body>

        <nav></nav>

    </body>

</html>

无论我如何在Chrome devtools中调整视口大小，nav元素都将采用screen-size的宽度：
Result of the above code
现在，让我们添加main元素并将其min-width属性设置为700 px，如下所示：

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>TEST</title>
        <meta name="viewport" content="initial-scale=1, width=device-width">
        <style>

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            nav {
                position: fixed;
                background-color: black;
                width: 100%;
                height: 70px;
            }

            main {
                
                min-width: 700px;
                background-color: red;
                height: 500px;
            }
        </style>
    </head>
    <body>

        <nav></nav>

        <main></main>

    </body>
</html>

现在，nav元素只假设视区的宽度，直到屏幕大小大于700 px：
Result of the above code
一旦屏幕大小小于700 px，导航元素保持在700 px的宽度，与主元素相同：
Like here
这让我很困惑，为什么nav元素假设最小宽度属性为700 px（与main元素相同），而从来没有显式地配置它，也不是main元素的子元素？

css

来源：https://stackoverflow.com/questions/74773803/question-on-a-width-property-of-a-fixed-positioned-element

2条答案

按热度按时间

i34xakig1#

position: fixed将元素的包含块设置为初始包含块，因此当您将其宽度设置为100%时，它将占用包含块宽度的100%，即viewport。这是正确的。但是，您的main元素设置为最小宽度700px...比包含块宽（或viewport），这意味着会出现滚动条，但您只是在滚动main元素，而不是nav元素。
为了说明，这里有相同的样式，但内容都在nav和main元素中。如果两者都在滚动，你会看到“这是一个标题”文本移动到左边，而你向右滚动。因为你没有，你知道它必须得到修复。（作为参考，在Stack Overflow的这些片段中，视口的宽度是616px，至少对我来说是这样。如果它是700px或更宽，如果您在main上设置了width: 700px而不是min-width: 700px，您可以将代码段设置为全屏模式，以查看滚动条消失，并进一步说明情况）

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
nav {
    position: fixed;
    background-color: black;
    color: white;
    width: 100%;
    height: 70px;
}
main {
    min-width: 700px;
    background-color: red;
    height: 500px;
}

个字符
碰巧的是，您也没有对main元素应用任何顶部间距，所以它的大部分被nav元素重叠，这是由于position: fixed将nav元素从正常的文档流中移除。
一个二个一个一个

赞(0）回复(0）举报 2022-12-15

hfyxw5xn2#

不建议使用* CSS选择器。它会选择每个元素。如果要从html和body中删除默认的margin和/或padding，请用途：

body, html {
  margin: 0;
  padding 0;
}

对于基于%的大小调整，它是父元素的百分比，而不是整个视图。您通常希望避免fixed或absolute定位，而是使用grid（以及1fr填充）或flex（以及flex 1 1 auto填充）显示样式来创建您的整体布局。

赞(0）回复(0）举报 2022-12-15

我来回答

css 关于固定位置元素宽度性质的一个问题

2条答案

相关问题

热门标签

最新问答