CSS box-sizing:border-box應用詳解

一、什麼是box-sizing

box-sizing是CSS3新增的一個屬性，用於控制元素寬高的計算方式，常見的有兩種值：

box-sizing: content-box;  // 默認值，寬高只計算內容區域
box-sizing: border-box;   // 寬高計算包括內容、內邊距和邊框

box-sizing屬性的主要作用是讓開發者控制元素的盒模型，從而更加靈活地進行頁面布局。下面我們來看一些實際應用。

二、box-sizing實戰-響應式布局

在移動端開發中，響應式布局是比較常見的技術，使用box-sizing可以很好地實現這一點。我們可以通過設置所有元素的box-sizing為border-box，然後使用百分比作為寬度，達到自適應的效果。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.box {
  width: 25%;
  padding: 20px;
  float: left;
}

在上面的代碼中，我們將所有元素都設置為border-box盒模型，這樣可以計算內邊距和邊框的寬高，避免了使用傳統的盒模型（content-box）時會出現的盒子寬度換算問題。接著，設置.container寬度為100%，防止盒子超出父容器，然後限制最大寬度為1200px，實現響應式布局。最後是.box的樣式，寬度為25%時，可以自適應寬度，而padding的值不會改變寬度，均布四個盒子。

三、box-sizing實戰-響應式表格

使用box-sizing實現響應式表格也是一種常見的技術。我們可以使用border-spacing屬性來控制單元格間距，同時設置單元格寬度為百分比，使用box-sizing: border-box屬性。這樣可以實現表格在不同尺寸的設備上自適應的效果。

table {
  border-collapse: separate;
  border-spacing: 0px;
  width: 100%;
}

td {
  width: 50%;
  padding: 10px;
  box-sizing: border-box;
}

在上面的代碼中，通過設置table的border-collapse為separate，使單元格有一個邊框。同時，使用border-spacing: 0px來控制單元格的間距。接著，設置td的寬度為50%和 padding 10px，實現表格單元格水平分布和自適應。

四、box-sizing實戰-圖片自適應

當圖片大小不同時，如何保持圖片的比例不受影響呢？可以使用box-sizing實現圖片自適應的效果。我們可以將圖片包裹在div中，將box-sizing設為border-box、將div的padding-bottom屬性值設置為圖片高度與寬度比例的百分比。

.wrapper {
  position: relative;
  width: 100%;
}

.img-box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  padding-bottom: 75%; // 圖片高度與寬度比例為4:3
}

.img-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

在上面的代碼中，我們用div包含了圖片，將其放在一個相對定位的wrapper中，然後用絕對定位的方式將div居中。接著，將div的width設置成100%，padding-bottom設置成圖片高度與寬度的比例（這裡是4：3）。最後再將img的max-width和max-height都設置為100%，實現圖片的自適應效果。

總結

box-sizing屬性使得開發者可以更加靈活地控制元素的盒模型，較好地實現手機端的響應式布局、響應式表格、圖片自適應等效果。使用box-sizing: border-box時，需要注意內邊距和邊框的寬高計算問題，從而準確計算元素的實際大小。