box-sizing設為content-box怎樣操作？

更新時間:2021-06-09 來源:黑馬程序員瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

在CSS3中，通過box-sizing屬性可以更改盒子尺寸的計算方式。將box-sizing設為content-box（默認值）時，表示使用傳統(tǒng)的計算方式；設為border-box時，表示使用CSS 3的一種新的計算方式，通過這種方式可以解決傳統(tǒng)盒子在添加了邊框和內邊距之后，盒子被撐大的問題。示例代碼如下。

/* 傳統(tǒng)計算方式 */
box-sizing: content-box;
/* 新的計算方式 */
box-sizing: border-box;

使用content-box計算方式的盒子模型，其寬度的計算公式如下。

盒子的寬度 = CSS中設置的width + border + padding

使用border-box計算方式的盒子模型，其寬度的計算公式如下。

盒子的寬度 = CSS中設置的width

當采用border-box計算方式時，CSS中設置的寬度width已經包含了border和padding值，不用擔心因為設置了元素的border和padding導致盒子被撐大的問題。這種方式的優(yōu)點在于，盒子的大小是固定的，不會受到邊框和內邊距的影響，也不會影響到頁面中其他盒子的結構。因此，在移動Web開發(fā)中，推薦使用border-box這種計算方式。

為了讓讀者更好地理解，下面通過例2-4演示content-box和border-box的區(qū)別。

【例2-4】

（1）創(chuàng)建C:\web\chapter02\demo04.html文件，具體代碼如下。

   <!DOCTYPE html>
   <html>
   <head>
    <meta charset="UTF-8">
    <title>box-sizing</title>
    <style>
     div {
      width: 100px;
      height: 100px;
     padding: 10px;
     background-color: #eee;
    }
    div:nth-child(1) {
     border: 10px solid #999;
     box-sizing: content-box;
    }
    div:nth-child(2) {
     border: 10px solid #666;
     box-sizing: border-box;
    }
   </style>
  </head>
  <body>
   <div>content-box</div>
   <div>border-box</div>
  </body>
  </html>

上述代碼中，第7~12行代碼用于為所有div設置樣式，第13~16行代碼用于為第1個div設置樣式，第17~20行代碼用于為第2個div設置樣式。第15行將第1個div設置為content-box，第19行將第2個div設置為border-box。

（2）在瀏覽器中打開demo04.html文件，運行結果如圖1所示。

將來box-sizing設置為border-box