CSS怪異盒子模型是指在一些情況下,盒子的尺寸并不完全由高度與寬度所決定,在進行盒子模型計算時,瀏覽器會計算padding和border的值,并把它們添加到width和height來決定盒子的最終尺寸。這種盒子模型被稱為怪異盒子模型。
在CSS2.1之前,Internet Explorer使用采用怪異盒子模型,而其他瀏覽器使用標準盒子模型。然而,由于Internet Explorer的廣泛使用,這種盒子模型在Web開發中變得非常普遍。為了解決這個問題,CSS3引入了box-sizing屬性.
.box { width: 200px; height: 100px; padding: 10px; border: 1px solid black; box-sizing: border-box; }
在這個例子中,box-sizing: border-box告訴瀏覽器計算盒子尺寸時包括padding和border的值。因此,盒子的實際尺寸為200px寬、100px高。
使用怪異盒子模型會導致一些由尺寸計算所導致的問題,這可能影響到設計和布局。因此,在進行Web開發時,應該盡可能使用標準盒子模型,或者使用box-sizing屬性顯式指定盒子模型。