CSS有兩種不同的渲染模式——標準模式和怪異模式（也稱為兼容模式）。那么這兩種模式究竟有什么區別呢？

首先，標準模式是瀏覽器根據W3C標準進行渲染的模式，而怪異模式是瀏覽器采用早期未規范化的HTML代碼所渲染出的頁面效果。

其次，兩種模式下盒模型的計算方式也不同。在標準模式下，元素的寬度和高度是指內容區域的寬度和高度，不包含邊框和內邊距。而在怪異模式下，元素的寬度和高度是指內容區域、邊框和內邊距的總和。

另外，對于CSS的一些屬性，兩種模式下的表現也不一樣。在標準模式下，當為一個元素設置height和width屬性時，它們指定的是內容區域的高度和寬度。但是在怪異模式下，設置的height和width屬性會加上元素的內邊距和邊框的尺寸。

最后，標準模式和怪異模式對CSS布局的影響也不同。在標準模式下，CSS布局的效果更加一致，而怪異模式下則更加難以控制。

/* 簡單的例子 */
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
}
/* 在標準模式下，計算的寬度和高度為220px和120px */
/* 在怪異模式下，計算的寬度和高度為222px和122px */

在實際開發中，我們應該盡量避免使用怪異模式，而盡可能在標準模式下進行開發和測試?？梢酝ㄟ^在HTML文檔的頭部添加DTD聲明或者使用來明確指定頁面的渲染模式。