一、CSS盒模型

盒模型概述

盒模型是CSS的核心知識點之一，它指定元素如何顯示以及如何相互交互。頁面上的每個元素都被看成一個矩形框，這個框由元素的內容、內邊距、邊框和外邊距組成。如下圖所示：

內邊距出現在內容區域的周圍。如果在元素上添加背景，那么背景應用于元素的內容和內邊距組成的區域。因此可以用內邊距在內容周圍創建一個隔離帶，使內容不與背景混合在一起。添加邊框會在內邊距區域外邊增加一條線。這些線可以有不同的樣式和寬度，如實線、虛線、點畫線。在邊框外邊的是外邊距，外邊距是透明的，一般使用它控制元素之間的間隔。

內邊距、邊框和外邊距可以應用于一個元素的所有邊，也可以應用于單獨的邊，如：

什么是標準模式和混雜模式

當瀏覽器廠商開始創建與標準兼容的瀏覽器時，他們希望確保向后兼容性。為了實現這一點，他們創建了兩種呈現模式：標準模式和混雜模式。在標準模式下瀏覽器按照規范呈現頁面；在混雜模式下，頁面以一種比較寬松的向后兼容的方式顯示。混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。

怎樣區分標準模式和混雜模式

瀏覽器根據DOCTYPE（文檔聲明）是否存在以及使用那種DTD來選擇要使用的呈現方式。如果XHTML和HTML文檔保航形式完整的DOCTYPE，那么它一般以標準模式呈現。相反，如果文檔的DOCTYPE不存在或者形式不正確則導致HTML和XHTML以混雜模式呈現。

兩種模式下的盒模型