CSS注意事項（一）

層疊的概念

層疊規則重點：自上而下，相同屬性：通常後面的覆蓋前面的，優先級高的覆蓋優先級低的 
層疊是CSS的核心機制，理解了它才能以最經濟的方式寫出最容易改動的CSS， 
讓文檔外觀在達到設計要求的同時，也給用戶留下一些空間，讓他們根據須要更改文檔的顯示效果， 
例如調整字號。

樣式來源

• 1.瀏覽器默認樣式表
• 2.用戶樣式表
• 3.link引用的css文件
• 4.<style>標籤內部編寫的樣式代碼
• 5.標籤中直接添加的 style=「」樣式代碼

局部小結：瀏覽器最終呈現的樣式來源

 

瀏覽器獲取全部來源的樣式，而後進行疊加和覆蓋生成最終樣式
瀏覽器會把零散的整合。讓後者覆蓋前者，但！important具備特權

 

瀏覽器默認樣式

• 1.網頁加載過程理解（職責單一，開放）：

  • 瀏覽器加載HTML僅僅生成DOM樹結構，完成對html的結構化
  • 接下來經過css進行視圖渲染 整合css包含了瀏覽器默認樣式和開發者所編寫的樣式

• 2.block元素

  瀏覽器的默認樣式規定了：·div/ p/ h1/ 等display 爲block ,未設置block的元素默認爲 inline顯示

• 3.display : list-item

  display的屬性值通常是:inline/block/inline-block， 但list-item能夠是元素以列表的形式表現，這也是ul li的本質

• 4.display : table

  div寬度和父容器相同，但table寬度根據內容而定，即table具備包裹性 
  包裹性容器經常使用在須要根據內容自適應寬度的地方

• 5.display: table-cell

  傳統模式下使用float進行多列布局 但其代碼複雜寬度不靈活 瀏覽器兼容性很差 
  table-cell新方案：給div加上display:table-cell來進行自適應寬度的多列布局(注意：IE6/IE7不兼容)

• 6.body樣式

  各個瀏覽器的body默認margin值不一樣，解決該兼容問題採用*{margin:0}進行處理 
  *選擇器優先級較低在遇到標籤時都不起做用，但瀏覽器已對次作了處理使得其覆蓋body的margin屬性 
  另外注意：還有一個默認屬性 line-height:爲知足系統擴展和軟件設計需求 
  最好使用相對值 如line-height:1.5即爲永遠按照文字大小的1.5倍計算行高

• 7.使用em仍是px

  推薦使用em由於px固定大小 不利於擴展 
  em不是絕對的、固定的 但在瀏覽器默認狀況下 1em===16px 
  採用em尤爲是margin等的優點在於當瀏覽器的em被修改時，margin同樣會隨之變更，與字體大小有關的css請使用em表示。

• 8.粗體和斜體

  在瀏覽器中默認爲粗體的有 
  hx 和 strong 
  在瀏覽器中默認爲斜體的有 
  blockquore 
  i cite em var address

• 9.inline-block

  既能設定高寬 不會佔據一行