CSS box-sizing屬性用于設置元素的盒子模型的大小計算方式。在CSS中有兩種盒子模型,分別是content-box和border-box。
content-box模型是默認模型,它的大小只包括元素的內容部分,不包括元素的內邊距(padding)、邊框(border)和外邊距(margin)。例如:
div { width: 500px; height: 200px; padding: 20px; border: 1px solid black; margin: 20px; }
以上代碼的div元素實際寬度是542px(500px+20px·2+1px·2),高度是262px(200px+20px·2+1px·2)。
而border-box模型定義的時候則包括元素的內邊距(padding)、邊框(border)和內容部分,所設置的寬度就是元素的總寬度。例如:
div { width: 500px; height: 200px; padding: 20px; border: 1px solid black; margin: 20px; box-sizing: border-box; }
這里div元素的實際寬高就是500px×200px,其中包括了內邊距、邊框和內容。
CSS box-sizing屬性可應用于所有元素,包括表格和內聯元素。建議針對大型項目和布局使用border-box。