<!DOCTYPE html> 打破布局

Question

我有以下用于简单模板的简单 html 代码：

<!DOCTYPE html>
<html>   

    <head>
        <title>My new website</title>
        <meta name="description" content="Simple website styled using flex box layout">
        <meta http-equiv="refresh" content="60">
        <link rel="stylesheet" type="text/css" href="style1.css">
    </head>

    <body>
        <div class="mainContainer">
            <nav class="mainMenu">
                <ol>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact Us</a>
                    </li>
                </ol>
            </nav>
            <div class="mainArea">
                <aside class="leftBar">
                    <h3>Navigation side bar</h3>
                    <p>Still need to think better what I will implement here.</p>
                </aside>
                <article class="mainContent">
                    <h1>Welcome!</h1>
                    <p>Nice to meet you...</p>
                </article>
                <aside class="rightBar">
                    <h3>News</h3>
                    <p>No news for now.</p>
                </aside>
            </div>
            <footer class="mainFooter">
                <p>Copyright &copy;
                    <a href="mailto:someone@coldmail.com"> someone</a>
                </p>
            </footer>
        </div>
    </body>

</html>

但是我在 html 代码的开头添加了 <!DOCTYPE html> 后，布局中断了。现在看起来像这样：

但它应该是这样的：

不仅边距坏了，例如导航栏也不完全是应该的样子。我四处寻找解决方案，并且有一些相关的问题，但我无法理解为什么会出现这个问题。

这里有 CSS 代码：

html, body{        
    height: 100%;  
    width:auto; 
    font: 14px Arial;
    color:white;
    background: #444;
}

/* links */
a{
    text-decoration: none;
    color: #00aefb;
}

a:visited{
    color:#008efb;
}

a:hover{
    color: #999;
}

/* flex elements */

.mainContainer, .mainFooter, .mainArea, .mainMenu, .mainMenu ol{
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
}


/* Main container */
.mainContainer{
    font-family: Georgia;      
    flex-direction: column;     
    -webkit-flex-direction: column;     
    -moz-flex-direction: column;
}

/* mainMenu and footer */
.mainMenu, .mainFooter{
    background: #555;
    border: 1px solid white;
    border-radius: 2px;
    padding: 10px;
}

/* Just footer */
.mainFooter {
    text-align: center;
    font: 15px Arial;
    min-height: 60px;

    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;

    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

/* Main area of contents */
.mainArea{
    color: white;
    border: 1px solid white;
    border-radius: 2px;
    margin: 20 0 20 0;
    min-height:800px;                    
}

/* Main area of the main area */
.mainContent{
    background: #eee;
    color: black;
    padding:20px;

    flex: 2 2 50%;  
    -webkit-flex: 2 2 50%;
    -moz-flex: 2 2 50%;
}

/* Left and right side bars */
.leftBar, .rightBar{
    padding: 10px;

    flex: 1 1 15%;
    -webkit-flex: 1 1 15%;
    -moz-flex: 1 1 15%;    
}

/* mainMenu bar at the top */
.mainMenu {
    font: 16px Arial;

    justify-content: center;                
    -webkit-justify-content: center;
    -moz-justify-content: center;

    padding: 0;    
}

.mainMenu ol {
    list-style: none;
    padding: 0; /* Removes annoying indentation */
    margin: 0;
    text-align: center;
}

.mainMenu ol li{
    display: inline;
    padding: 20px;
    margin: 0 30 0 30;
}

li:hover, li.active{
    background: #222;
    color: #999;
    border-radius: 5px;
}


@media all and(max-width: 640px){
    .mainArea{
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;        
    }

    .mainMenu {
        font: 18px Arial;

        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
    }

    .mainMenu ol {
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;

        align-items:stretch;            
        -webkit-align-items:stretch;        
        -moz-align-items:stretch;
    }

    .mainMenu ol li {
        margin: 0;
        padding: 10px;
    }

    .mainContainer .mainArea {
        border: 0;
        border-radius: 0;                   
    }

    .mainContent{
        order: -1;
        -webkit-order: -1;
        -moz-order: -1;

        margin: 0 0 20 0;
        border: 1px solid white;
        border-radius: 2px;
    }

    .leftBar {
        margin: 0 0 20 0;
        border: 1px solid white;
        border-radius: 2px;                 
    }

    .rightBar{
        border: 1px solid white;
        border-radius: 2px;                                     
    }

}

Answer 1

你不见了.mainMenu { margin-bottom: 10px; }

或者，如果您想使用 <!DOCTYPE html>，则修正此 .mainArea { margin: 20px 0 20px 0; }，您没有提及任何单位。

CSS Units
CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, border-width, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: relative and absolute.

Reference

Answer 2

我不会说添加 <!DOCTYPE html> 会破坏布局。 doctype 告诉浏览器如何解释 HTML 和 CSS，如果你不指定，那么浏览器将进入 quirk 模式，显示与严格模式不同。

通过添加 <!doctype html>，您的某些 CSS 样式会变得 不正确 并且浏览器会尽其所能地解释它们。例如，您遇到的问题之一是存在一些未指定单位的非零数值（例如：margin: 20 0 20 0;）。

<!DOCTYPE html> 打破布局

<!DOCTYPE html> breaks out the layout

html

css

layout

doctype

flexbox