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>之后，布局就破了。现在它看起来像这样：

enter image description here

但它应该是这样的：

enter image description here

不仅边缘损坏，例如导航栏也不完全是应该如何。我四处寻找解决方案，并且存在一些相关的问题，但我根本无法理解为什么会出现这个问题。

这里有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

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

通过添加<!doctype html>，您的某些CSS样式会变得不正确，浏览器会以最佳方式解释它们。例如，您遇到的一个问题是，在没有指定单位的情况下存在一些非零数值（例如：margin: 20 0 20 0;）。

Answer 2

您缺少.mainMenu { margin-bottom: 10px; }

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

CSS单位
  CSS有几个不同的单位来表示长度。

许多CSS属性采用“长度”值，例如宽度，边距，   填充，字体大小，边框宽度等

长度是一个数字后面跟一个长度单位，例如10px，2em等。

数字和单位之间不能出现空格。然而，   如果值为0，则可以省略该单位。

对于某些CSS属性，允许使用负长度。

有两种类型的长度单位：相对和绝对。

Reference

打破布局

2 个答案: