Question

<!DOCTYPE html>

<html lang='en'>
    <head>
        <title>Golden Gators</title>

        <link rel='stylesheet' type='text/css' href='styles.css'/>
    </head>

    <body>
        <div id='container'>
            <nav id='navContainer'>
                <h1 id='navHeader'>Golden Gators</h1>
            </nav>
            <div id='contentContainer'>
                asd
            </div>
        </div>
    </body>
</html>

所以我的问题是它为什么这样做？我尝试了所有的东西，包括'display：block'，而不是'position：absolute'（哪个有效，但我不知道如何在没有它的情况下冲洗它），甚至'position：fixed'（与绝对相同）。

谁能告诉我它为什么这样做？我知道'绝对'会破坏你的文件正常流程，但我认为它仍然会响应display：blocks？为什么不听？

EXTRA：如果可能，任何人都可以链接到任何好的HTML和CSS定位教程？我已经完成了关于谷歌搜索的100多个查询，并且找不到任何解释css工作原理的“深层核心”。

解答：为什么这样做？

CSS：

@font-face {
    font-family: Clash;
    src: url(supercell.ttf);
}

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

#navContainer {
    background-color: #3a5795;
    width: 100%;
    float: left;
}

#contentContainer {
    display: block;
    clear: both;
}
#navHeader {
    font-family: Clash;
    color: #ffd700;
}

HTML

<!DOCTYPE html>

<html lang='en'>
    <head>
        <title>Golden Gators</title>

        <link rel='stylesheet' type='text/css' href='styles.css'/>
    </head>

    <body>
        <div id='container'>
            <nav id='navContainer'>
                <h1 id='navHeader'>Golden Gators</h1>
            </nav>
            <div id='contentContainer'>
                asd
            </div>
        </div>
    </body>
</html>

问题：每当我尝试放置导航栏时，它都会使整个容器放大，这是我不喜欢的。

对此的疑问：当我输入'float：left'时，它会向上和向下扩展，达到我想要的效果。这对我来说有点奇怪，因为我认为float: left只向左移动。当我浮动时为什么它会膨胀：离开？这只是强调了这样一个事实，即我不理解'css'，因为它是'最深的'。

Answer 1

我并不完全明白你在问什么（可能是因为它已经很晚了）但是我对你的代码玩了一下。以下是我可以告诉你的事情（如果我错了希望有人会纠正我）：

浏览器具有元素的默认值。当您使用float时，容器变大的原因是：left是因为它被移动到文档流之外。 h1元素上的默认填充和边距值是放大容器的值。（请注意，导航容器外部的asd似乎没有移动。这是因为h1元素上的边距。）
同样的解释说明了当您尝试将导航栏放入容器时导航容器增长的原因。如果您尝试制作水平导航栏，请尝试在h1，ul和li元素上使用display：inline-block。这将使它们从左到右可读。（希望这是你想要做的。）
至于网络教程。请尝试以下方法： w3schools - ＆gt;一个了解网站开发的好网站。

Treehouse Web教程 - ＆gt;注册免费试用14并进入他们的前端网络跟踪。你会学习ALOT。

如果我的反应非常糟糕，我想道歉。希望这可能对你有所帮助！

在没有内容div碰撞的情况下向上，向左和向右刷新导航

1 个答案: