網(wǎng)頁設(shè)計(jì)制作過程中，我們會給頁面的元素(比如div)設(shè)置個(gè)固定的高度或?qū)挾?。但如果給這個(gè)div又設(shè)置了內(nèi)邊距或者邊框的話，那么這個(gè)div就會被撐大。也就是其實(shí)際的尺寸變成了：設(shè)置的寬高尺寸+內(nèi)邊距+邊框，這樣就有可能對我們的布局造成影響。那么，css添加內(nèi)邊距和邊框怎樣才能不改變盒子整體高度和寬度呢?下面天水網(wǎng)站制作設(shè)計(jì)人員小士告訴你這個(gè)方法。

　　如果不想讓內(nèi)邊距和邊框影響到我們設(shè)置的固定尺寸，可以借助 box-sizing 這個(gè)css屬性來實(shí)現(xiàn)。 這個(gè)屬性是css3中出現(xiàn)的新屬性，官方的描述是：為元素設(shè)定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

　　content-box 是 box-sizing 屬性的默認(rèn)值。當(dāng)元素的box-sizing是content-box的時(shí)候，我們給元素設(shè)置的寬度、高度實(shí)際上是設(shè)置這個(gè)元素內(nèi)容的寬度、高度。而元素的內(nèi)邊距和邊框會在寬度和高度之外繪制。

　　最后總結(jié)，要想css添加內(nèi)邊距和邊框不改變原來整體的大小，就給這個(gè)盒子添加box-sizing:content-box;添加這個(gè)屬性后，不管你設(shè)置的邊框和內(nèi)邊距是多少，都不會改變原來固定的大小。