CSS Box Sizing Basics

一、可視區域

CSS中的box-sizing屬性確定了元素框架的計算方式。默認的box-sizing屬性值是content-box，這也是瀏覽器的默認值。

在content-box模式中，元素的寬度和高度值僅僅包含了元素內容，並不包括padding值、border值和margin值。

舉個例子，我們創建一個包含50px的padding值的盒子：

.box {
  width: 200px;
  height: 200px;
  padding: 50px;
  border: 1px solid black;
}

在當前的設置中，盒子的總寬度和高度為：

width: 200px + (50px*2的padding值) + (2*1px的border值) = 302px
height: 200px + (50px*2的padding值) + (2*1px的border值) = 302px

我們可以通過修改box-sizing屬性，將元素的寬度和高度包括padding值和border值，如下所示：

.box {
  width: 200px;
  height: 200px;
  padding: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}

在此示例中，元素的寬度和高度值包括了padding值和border值。

二、瀏覽器兼容性

該功能在Internet Explorer 8及更早版本中不被支持。IE8支持box-sizing，但只支持設置值為border-box，而不支持設置值為content-box。

我們可以使用box-sizing的兩種方式提供跨瀏覽器支持，如下所示：

box-sizing: border-box;
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box;

該示例代碼適用於IE8及更早版本、Firefox和Safari等WebKit瀏覽器。

三、盒子模型的布局

如果我們掌握了盒子模型的工作方式，就可以更容易地完成Web布局。我們可以通過使用box-sizing屬性來更改盒子模型。如果我們使用content-box模型，則需要使用大量的計算和調整，才能獲得預期的效果。但是，如果我們將box-sizing設為border-box，就可以更輕鬆地布局網頁元素。例如，我們可以使用flex-box來創建自適應的布局，如下所示：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  width: 33.33%;
  padding: 20px;
  box-sizing: border-box;
}

在此示例中，我們使用了伸縮布局（flex box）來創建一個自適應的柵格系統。通過將box-sizing屬性設置為border-box，我們可以輕鬆地計算盒子的大小和位置，使網頁呈現出更加直觀和美觀的界面。