CSS不同内部行为的行为

Question

我正在学习有关css atm的内容，我正尝试使用外部css来为我的所有网站添加样式。我发现，如果我做的：

<ul id="menu" style="width:420px; margin:0 auto"> 

我得到我想要的结果，但如果我做它像一个外部文件：

这是css文件：

*{ 
margin:0px; 
padding:0px;} 

header, section, footer, aside, nav, article, hgroup { 
display:block;} 

body { 
width:100%; 
display:-webkit-box; 
background-color: #808286; 
-webkit-box-pack: center;} 

#container { 
max-width: 1000px; 
margin: 20px 0px; 
display:-webkit-box; 
background-color: #FFFFFF; 
display:-webkit-box; 
-webkit-box-orient: vertical; 
-webkit-box-flex: 1; } 

#top_header { 
background-color: #fdd023; 
padding: 20px; 
border: 2px solid #49207e;} 

#new_div { 
display:-webkit-box; 
-webkit-box-orient: horizontal; } 

#navigation_bar { 
border: 1px solid #5970B2; 
padding: 0;} 

#main_section { 
border: 1px solid blue; 
-webkit-box-flex: 1; 
margin: 20px; 
padding: 20px;} 

#side_left { 
border: 1px solid red; 
width: 220px; 
margin: 20px 0px; 
padding: 30px; 
background: #66CCCC;} 

#main_footer { 
text-align: center; 
padding: 20px; 
border-top: 2px solid green;} 

#menu { 
    width:420px; 
    margin:0 auto;} 
#menu li { 
list-style: none; 
display: inline; 
} 

#menu li a { 
display: inline; 
padding: 0 8px 0px; 
text-align: center; 
text-decoration: none; 
} 

#menu div { 
position: absolute; 
visibility: hidden; 
margin: 0; 
padding: 0; 
background: #EAEBD8; 
border: 1px solid #5970B2} 

#menu div a { 
position: relative; 
display: block; 
margin: 0; 
padding: 5px 10px; 
width: auto; 
white-space: nowrap; 
text-align: left;} 

这是Html代码：

<div id="container"> 
    <nav id="navigation_bar"> 
    <ul id="menu"> 
     <li> 
      <a href="""> 
       A 
      </a> 
       <div id="firstMenu"> 
        <a href="#">1</a> 
        <a href="#">2</a> 
       </div> 
     </li> 
     <li> 
      <a href=""> 
       B 
      </a> 

       <div id="secondMenu"> 
        <a href="#">1</a> 
        <a href="#">2</a> 
        <a href="#">3</a> 
        <a href="#">4 </a> 
       </div> 
     </li> 
     <li> 
      <a href=""> 
       C 
      </a> 
     </li> 
     <li> 
      <a href=""> 
       D 
      </a> 
     </li> 
     <li> 
      <a href=""> 
       E 
      </a> 
     </li> 
     </ul> 
     <div style="clear:both"></div> 
    </nav> 

我得到了不同的布局。第一个以我的菜单栏为中心，第二个给我一点填充。我使用的是Chrome，但我想我可能会错过这里的一个关键概念。

Answer 1

你看到的差异是由于页面上的其他代码。

如果应用CSS规则（在应用级联之后），则就渲染而言，它来自哪里并不重要。