Question

所以我在<head>中的样式标签之间有一个内部CSS，我决定将它移动到外部CSS文件，然后使用一个简单的链接。所以问题是，如果我使用外部CSS，一个浮动元素将转到下一行，而在内部则不会发生。内部和外部样式表是相同的，实际上我将内部复制并粘贴到外部文件中。
我已经重新检查了10次它们是相同的。唯一的区别是一个是内部的而另一个是外部的。
为什么会发生这种情况？（仔细看看h2的跳跃）

<!DOCTYPE html>
<html>
<head>
    <title>helo</title>
    <style>
        body, div, h1, h2, form
        {
            border:0;
            margin:0;
            padding: 0;
        }

        div.nav
        {
            height: 70px;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
        }

        div.nav_body
        {
            box-sizing: border-box;
            margin: 0 auto;
            max-width: 1330px;
            min-width: 920px;
            padding: 0 20px;
            width: 100%;
        }

        div.nav_body h2
        {
            float: right;            
        }

        div.nav_body h2 a
        {
            font-size: 14px;
            line-height: 70px;
        }

        div.nav_body h1 a
        {
            font-size: 32px;
        }

        div.nav_body h1
        {
            display: inline-block;
            margin-right: 20px;
        }

        div.form_container
        {
            margin-top: 70px;
        }
    </style>
</head>
<body>
    <div class='nav'>
        <div class='nav_body'>
            <h1><a href='#'>welcome</a></h1>
            <h2><a href='#'>register</a></h2>
        </div>
    </div>
    <div class='form_container'>
        <div class='form_header'>
            <h1>register</h1>
        </div>

        <a href='forgot_password.php'>forgot</a>

        <div class='form_field'>
            <form>
                <input type='text' name='email' placeholder='Email' />
                <input type='password' name='password' placeholder='Password' />
                <input type='submit' value='log in' />
            </form>
        </div>
    </div>
</body>
</html>

Answer 1

它正在使用外部css

你的html文件

   <!DOCTYPE html> <html>
<head>
    <title>helo</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class='nav'>
        <div class='nav_body'>
            <h1><a href='#'>welcome</a></h1>
            <h2><a href='#'>register</a></h2>
        </div>
    </div>
    <div class='form_container'>
        <div class='form_header'>
            <h1>register</h1>
        </div>

        <a href='forgot_password.php'>forgot</a>

        <div class='form_field'>
            <form>
                <input type='text' name='email' placeholder='Email' />
                <input type='password' name='password' placeholder='Password' />
                <input type='submit' value='log in' />
            </form>
        </div>
    </div>
</body>
</html>

CSS：

 body, div, h1, h2, form
        {
            border:0;
            margin:0;
            padding: 0;
        }

        div.nav
        {
            height: 70px;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
        }

        div.nav_body
        {
            box-sizing: border-box;
            margin: 0 auto;
            max-width: 1330px;
            min-width: 920px;
            padding: 0 20px;
            width: 100%;
        }

        div.nav_body h2
        {
            float: right;            
        }

        div.nav_body h2 a
        {
            font-size: 14px;
            line-height: 70px;
        }

        div.nav_body h1 a
        {
            font-size: 32px;
        }

        div.nav_body h1
        {
            display: inline-block;
            margin-right: 20px;
        }

        div.form_container
        {
            margin-top: 70px;
        }

外部样式表的奇怪行为

1 个答案: