教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

Border-box與content-box的區(qū)別?

更新時間:2023年10月18日11時10分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

　　在web前端開發(fā)中，box-sizing屬性用于指定元素的盒模型(box model)，有兩個常用的取值：content-box 和 border-box，它們的主要區(qū)別在于元素的寬度和高度的計算方式。下面筆者將詳細(xì)說明它們的區(qū)別并提供代碼演示。

　　1.content-box：

　　(1)默認(rèn)的盒模型。

　　(2)元素的寬度和高度只包括內(nèi)容部分，不包括邊框和內(nèi)邊距。

　　(3)如果我們設(shè)置一個元素的寬度為100px，那么內(nèi)容部分的寬度就是100px，而邊框和內(nèi)邊距會額外占據(jù)空間。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 2px solid black;
      box-sizing: content-box;
    }
  </style>
</head>
<body>
  <div class="box">Content Box</div>
</body>
</html>

　　在上面的示例中，.box 元素的總寬度是100px(內(nèi)容寬度)+2*10px(左右內(nèi)邊距)+2*2px(左右邊框)，所以實際寬度是124px。

　　2.border-box：

　　(1)設(shè)置元素的盒模型為border-box后，元素的寬度和高度包括內(nèi)容、邊框和內(nèi)邊距。

　　(2)這意味著我們可以更方便地控制元素的總寬度和高度，而不必?fù)?dān)心邊框和內(nèi)邊距增加的空間。

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 2px solid black;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="box">Border Box</div>
</body>
</html>

　　在上面的示例中，.box元素的總寬度仍然是100px，但這次包括了內(nèi)容、內(nèi)邊距和邊框。因此，邊框和內(nèi)邊距不會增加元素的總寬度。

　　通常情況下，border-box更常用，因為它讓元素的尺寸更容易管理，特別是在響應(yīng)式設(shè)計中。

0 分享到：
和我們在線交談！