CSS3標準盒模型是CSS3中新加入的盒模型。該模型與舊有的盒模型不同之處在于,它將元素的padding和border計算在了width和height屬性中,而不僅僅是計算元素的content寬度和高度。
使用CSS3標準盒模型的好處在于可以更方便地布局元素。例如,當我們需要設置一個元素的寬度為100像素時,使用舊有的盒模型需要考慮元素的padding和border屬性,而使用CSS3標準盒模型則無需考慮這些屬性,只需設置width為100像素即可。
/* 舊有盒模型 */ .box { width: 100px; padding: 10px; border: 1px solid #000; } /* 寬度實際為 100px + 2 * 10px + 2 * 1px = 122px */ /* CSS3標準盒模型 */ .box { box-sizing: border-box; width: 100px; padding: 10px; border: 1px solid #000; } /* 寬度實際為 100px */
在CSS3標準盒模型中,可以通過設置box-sizing屬性改變元素的盒模型類型。如果將box-sizing設為border-box,即為使用CSS3標準盒模型;如果設為content-box,則使用舊有的盒模型。
需要注意的是,在使用CSS3標準盒模型時,元素的寬度和高度屬性可以為負值,但內邊距和邊框屬性不能為負值。
綜上所述,CSS3標準盒模型相比舊有盒模型具有更加便利的布局和計算方式,同時可以通過設置box-sizing屬性靈活地選擇使用特定類型的盒模型。