CSS跨瀏覽器開發原則[圖文教程]

雖然我也同意每個項目都實現瀏覽器的完全兼容性，即所有web瀏覽器（暫且不考慮手機瀏覽器）用戶都能體驗相同的完美設計效果是永遠都不可能的，但是，我相信大多數情況下近乎完全兼容性卻是可以實現的。作為開發人員，我們的目標不應該僅僅停留在讓項目在每個瀏覽器都能運作，而應該盡可能用最少的代碼讓項目在每個瀏覽器中都能實現盡善盡美，讓今后網站的維護更加輕松。

這篇文章將向大家介紹一些最為重要的CSS 開發原則和技巧，希望能夠幫助前端開發的新手和老生用最少的CSS代碼實現跨瀏覽器體驗的一致性。

CSS盒模型（ Box Model）

CSS盒模型是網頁布局的基礎，如果你想要實現跨瀏覽器布局的一致性，這是第一個必需透徹學習的對象。好在，它并不難掌握而且通常在所有瀏覽器上的效果都是一樣的，除了某些情況下會與IE的版本相關（這個后面會詳細談到）。

CSS盒模型負責計算:

• 一個塊級（block-level）元素占用多少空間。
• 邊框（border）和/或外邊距（margins）是否重疊或崩潰。
• 一個盒的尺寸大小。
• 從某種程度上說，它可決定一個盒與頁面中的其他內容的相對位置。

CSS盒模型的基本規則如下:

• 塊級（Block-level ）元素基本上是矩形。
• 塊元素的尺寸是通過寬、高、填充、邊框和外邊距來計算的。
• 如果沒有指定高度，塊元素將會依據它所包含的內容來顯示高度加上填充 (除非設置了浮動 floats，見下文)。
• 如果沒有指定寬度，就會出現一個非浮動 non-floated盒并以適應父盒的寬度顯示，減去填充(下文有更多介紹)。

關于塊級元素，需要切記以下幾個要點:

• 如果某個盒子（box）的寬度設定為“100%”，它就不能有任何外邊距、填充或邊框，否則它就會溢出父盒子。
• 垂直相鄰外邊距可能會導致復雜的崩潰問題而最終造成布局出問題。
• 相對位置的元素和絕對位置的元素是有區別的，這個涉及的東西比較多，這篇文章就不介紹。

在Firefox中使用Firebug顯示的盒模型（ box model ）

塊級元素Block和內聯元素 Inline的區別

經驗豐富的開發人員可能覺得這沒什么好說的，不過，我覺得這個一個非常重要的問題，要是能夠做到透徹理解，你就會說“啊，原來如此” 很多頭疼的問題就會迎刃而解，以后對創建跨瀏覽器布局信心也會大大增強。

下面的圖片說明了塊級元素block和內聯元素inlin的區別：

• Block元素默認情況下會自然橫向擴展來填充父容器，因此沒有必要設置寬度為“100%”。
• Block元素默認情況下會從父盒的最左邊開始低于以往任何塊元素(除非使用漂浮或定位元素，見下文)。
• Inline元素無視寬度和高度的設置。
• Inline元素會與文本一起流動，并受排版屬性如空格、字體大小和字母間距的影響。
• Inline元素可以使用垂直對齊屬性對齊，而block 元素不能。
• Inline元素的下方會自然留出一些空間以容納破行掉下的文本元素。
• inline元素如果設置為漂浮可以變成塊元素。
  生活不易，碼農辛苦
  如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈