CSS中的box-sizing屬性控制了盒子的尺寸計算模式。默認情況下,盒子的尺寸包括了content、padding、border三個部分的寬度,但box-sizing可以改變這一默認行為。
box-sizing屬性有兩個可選值:
box-sizing: content-box; box-sizing: border-box;
第一個值content-box是默認值,表示盒子的尺寸只包括content部分的寬度。
而第二個值border-box表示盒子的尺寸包括content、padding、border三個部分的寬度。因此,使用border-box時只需要設定盒子的width或height屬性就可以確定盒子的尺寸,不需要再考慮padding、border的寬度。
/* 示例 */ .box { width: 200px; height: 100px; padding: 10px; border: 1px solid #000; box-sizing: border-box; }
上面的代碼中,即使設定了padding和border的寬度,box的實際寬度仍然是200px,而不是加上padding和border之后的203px。
值得注意的是,box-sizing屬性只對block-level和table元素有效。inline元素的尺寸計算模式始終為content-box。