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規則（在應用級聯之後），則就渲染而言，它來自哪裏並不重要。