一、CSS盒子模型定義
CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)， CSS盒子模型都具備這些屬性。這些屬性我們可以用日常生活中的常見事物——盒子作一個(gè)比喻來理解，所以叫它盒子模型。
下面的圖片說明了盒子模型 (Box Model)：
不同部分的說明：
- Margin（外邊距）：外邊距位于盒子的最外圍，是添加在邊框外周圍的空間。外邊距使盒子之間不會(huì)緊湊地連接在一起，是CSS 布局的一個(gè)重要手段；
- Border（邊框）：邊框是環(huán)繞內(nèi)容區(qū)和填充的邊界。邊框的屬性有border-style、border-width和border-color 以及綜合了以上三類屬性的快捷邊框?qū)傩?border；
- Padding（內(nèi)邊距）：內(nèi)邊距是內(nèi)容區(qū)和邊框之間的空間。內(nèi)邊距的屬性有五種 ，即padding -top、padding -bottom、padding -left、padding-right 以及綜合了以上四種方向的快捷填充屬性padding；
- Content（內(nèi)容）：內(nèi)容區(qū)是盒子模型的中心，它呈現(xiàn)了盒子的主要信息內(nèi)容，這些內(nèi)容可以是文本、圖片等多種類型。
要確保在所有瀏覽器中正確設(shè)置元素的寬度和高度，需要了解盒子模型以及其在不同瀏覽器中的工作方式。
提示：在盒模型中，外邊距可以是負(fù)值，而且在很多情況下都要使用負(fù)值的外邊距。
二、元素寬度和高度
當(dāng)指定一個(gè)元素的寬度和高度屬性時(shí)，實(shí)際上只設(shè)置了內(nèi)容區(qū)域的寬度和高度。然而，要獲得完整尺寸的元素，您還需要考慮到填充（padding）、邊框（border）和邊距（margin）。
下面的例子中的元素的總寬度為 300px：
width:250px; padding:10px; border:5px solid gray; margin:10px;
計(jì)算：
250px (寬)+ 20px (左 + 右填充)+ 10px (左 + 右邊框)+ 20px (左 + 右邊距)= 300px
例如只有 250 像素的空間，設(shè)置總寬度為 250 像素的元素：
width:220px; padding:10px; border:5px solid gray; margin:0px;
最終元素的總寬度計(jì)算公式：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計(jì)算公式：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
三、瀏覽器兼容性
一旦為頁面設(shè)置了適當(dāng)?shù)奈臋n類型定義（DTD），大多數(shù)瀏覽器將按照標(biāo)準(zhǔn)的盒子模型來呈現(xiàn)內(nèi)容。然而，早期的 IE 5 和 6 瀏覽器在怪異模式下使用自己的非標(biāo)準(zhǔn)盒子模型，導(dǎo)致元素的寬度計(jì)算方式與標(biāo)準(zhǔn)規(guī)范不同。在這些瀏覽器中，寬度屬性包括了內(nèi)容、內(nèi)邊距和邊框的寬度。
雖然有一些方法可以解決這個(gè)問題，但目前最好的解決方案是回避這個(gè)問題。具體做法是避免給元素添加指定寬度的內(nèi)邊距，而是嘗試將內(nèi)邊距或外邊距添加到元素的父元素或子元素上。對(duì)于 IE8 及更早版本，由于不支持邊框和填充的寬度屬性設(shè)定，解決兼容性問題的最佳方法是在 HTML 頁面的開頭聲明文檔類型為 <!DOCTYPE html>。
通過這些簡單的修改，可以確保元素在各種瀏覽器中正確呈現(xiàn)，并提高頁面的兼容性。
