這篇文章主要介紹CSS中使用box-sizing屬性的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，有關(guān)成都企業(yè)網(wǎng)站定制方案、改版、費(fèi)用等問題，行業(yè)涉及成都混凝土泵車等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

box-sizing屬性可用于設(shè)置更改區(qū)域大小，比如，如果你需要并排放置兩個(gè)帶邊框的框，可通過將 box-sizing 設(shè)置為 border-box實(shí)現(xiàn)，下面我們就來看具體的內(nèi)容。

box-sizing屬性是用于更改區(qū)域大小計(jì)算的設(shè)置，使用padding和border屬性設(shè)定邊距和邊界線的粗細(xì)時(shí)，在區(qū)域的width和height中加入padding和border的部分，因此，根據(jù)padding和border的值，整個(gè)區(qū)域的大小就會(huì)改變。

這是因?yàn)閰^(qū)域的大小不包含padding，border的值。

根據(jù)box-sizing屬性改變?cè)O(shè)定，可以在區(qū)域大小中設(shè)置padding和border。這使得可以確定盒子的大小而不受padding和border的影響。

我們接著來看box-sizing的使用方法

box-sizing屬性寫法如下

box-sizing：value ;

value的值你可以寫入content-box和border-box。

content-box：寬度和高度分別應(yīng)用到元素的內(nèi)容框；在寬度和高度之外繪制元素的內(nèi)邊距和邊框。

border-box：為元素設(shè)定的寬度和高度決定了元素的邊框盒，也就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制，通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

此外，如果輸入inherit，則繼承父元素的值。

下面我們來看一個(gè)具體的例子

代碼如下

HTML代碼

  
content-box(初始值)
  的情況下、padding和border不包括在width和height之中
border-box的情況下、padding和border包括在width和height之中

設(shè)置寬度和高度完全相同的兩個(gè)盒子（寬度400px，高度150px），第一個(gè)盒子設(shè)置的初始值content-box，第二個(gè)盒子設(shè)置的值是border-box。

CSS代碼

p.content1 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: content-box;
}
p.content2 {
width: 400px; 
height: 150px; 
background-color:#f0f8ff;
border: 30px solid #4169e1; 
padding: 10px;
box-sizing: border-box;
}

運(yùn)行結(jié)果

在瀏覽器上將顯示如下效果

以上是CSS中使用box-sizing屬性的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！