CSS Box Sizing

一、什麼是CSS Box Sizing？

CSS Box Sizing是CSS中一個非常重要的概念。我們常常使用CSS樣式來控制頁面元素的大小,位置和形狀。在不知道Box Sizing時，你可能經常遇到這樣的情況，不同瀏覽器對盒子的渲染有所不同，你設置的元素大小可能並不生效。Box Sizing定義了一個盒子是如何計算尺寸的。Box Sizing一般有兩個值：

box-sizing: content-box;
box-sizing: border-box;

設置為content-box時，height和width屬性只控制內容的尺寸，而不包括邊框的大小和內邊距的大小。設置為border-box時，height和width屬性控制整個盒子的尺寸，包括了邊框的寬度和內邊距的寬度。

二、content-box與border-box的比較

在實際開發中，我們通常選擇將Box Sizing設置為border-box，因為它可以幫助我們更好地控制布局和排版。通過將整個盒子的尺寸包括邊框和內邊距一起計算，可以更好地控制整個布局。同時，我們可以使用calc()函數來計算盒子的大小，在一定程度上增強了我們的布局控制能力。

下面是一個使用content-box和border-box來設置盒子大小的例子。

/* 使用content-box */
div{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 10px;
}

/* 使用border-box */
div{
  width: 200px;
  height: 200px;
  border: 1px solid black;
  padding: 10px;
  box-sizing: border-box;
}

三、應用Box Sizing的場景

在使用CSS布局時，應用Box Sizing可以讓我們更輕鬆地控制布局，下面是一些應用Box Sizing的常見場景。

1.流式布局

流式布局是指頁面元素的寬度按照百分比進行設置，通常可以實現自適應的效果。當使用流式布局時，我們可以應用box-sizing:border-box，這樣可以使得盒子的尺寸可以完全適應於頁面大小的變化。

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

2.響應式布局

響應式布局是指頁面可以自適應多種設備和分辨率的大小。當我們設計響應式布局時，我們通常會使用媒體查詢來根據不同設備的寬度來調整頁面元素的寬度。這時 Box Sizing就顯得尤為重要了，使用Box Sizing可以保證我們的元素在不同分辨率下有更好的響應性，不至於導致布局的混亂。

@media (min-width: 768px) {
  article {
    width: calc(50% - 20px);
    margin-right: 20px;
    box-sizing: border-box;
    float: left;
  }
}

3.等高布局

當頁面中的元素數量不一致時，可能會導致頁面高度不對齊，這時等高布局就應運而生了。等高布局可以保證頁面中不同元素的高度相同，同時也應用了 Box Sizing。我們可以通過設置元素高度為0來實現等高布局的效果。

ul li{
  display: inline-block;
  width: 33.3%;
  height: 0;
  padding-bottom: 33.3%;
  box-sizing: border-box;
}

四、總結

在CSS中，Box Sizing是一個非常重要的概念。應用Box Sizing可以幫助我們更好地控制元素的大小，位置和形狀，從而實現更好的布局效果。通過應用不同的Box Sizing值，我們可以在不同場景下靈活地調整元素的布局，讓我們可以更輕鬆地應對不同的設計需求。