Box model

box-model是CSS的基礎概念。我們在HTML檔中寫入很多元素，在瀏覽器渲染時，我們可以在畫面上看到一個個區域，個別裝著不同的內容，這個矩形區域是每個元素所產生的element box(元素盒)，而box是由下列部分組成的：

• content area（內容區域）
  元素的內容會放在這個區域，像是文字、圖片、子元素。content area的範圍通常是元素的寬高值，或是由內容來撐開的範圍。

  • 內容撐開的範圍(邊框內的區域就是content area)

    span {
      border: 1px solid #000;
    }
    

    

  • 寬高值撐開的範圍

    div {
      width: 300px;
      height: 100px;
      border: 1px solid #000;
    }
    

    

  inline元素content area的無法用設定寬與高，只能用內容來撐出範圍 ; block元素的content area除了內容會撐開範圍，也可以用寬高來設定範圍。

• padding（內距）
  padding通常用來撐出元素內部空間，可以透過屬性聲明內距，如果padding的數值是0的話，那padding box的大小就是會content area的大小。
  padding又可以拆解成padding-top、padding-right、padding-bottom、padding-left。

  span {
    border: 1px solid #000;
    padding: 30px;
  }
  

  用開發者介面來看，就可以看到綠色區域是padding的範圍。
  

• border（邊框）
  可以透過border屬性設定樣式，如果border的數值是0，那border box的大小就是會padding box的大小。
  border也可以拆解成上下左右來聲明樣式。
  可以看CSS基本樣式-border＆outline了解樣式聲明。

• margin（邊界範圍）
  margin通常用來當元素與元素之間的距離，所以也常稱它為外邊距。它也可以拆解成上下左右來聲明外距。

  先前我們提過html就是由block元素跟inline元素來結構內容，block元素會佔滿父元素的寬度，垂直排列 ; inline元素會不佔滿寬度水平排列，直到寬度撐不下去才換到下一行。

  • block元素的margin：

    div {
      width: 300px;
      height: 50px;
      padding: 30px;
      border: 1px solid #000;
      margin: 30px;
    }
    

    橘色的區域是margin，上下左各是30px，可是怪怪的，為什麼右邊不是30px？這是因為<div>是block element，所以在box生成的當下，它就會佔滿父元素的寬度，而block元素的的水平margin則是扣掉content area、padding、border寬度後，剩下的寬度都會被margin撐滿。
    

  • inline元素的margin：

    span {
      border: 1px solid #000;
      margin: 30px;
    }
    

    橘色的區域是margin，雖然我們對元素四周都設了margin：30px，但垂直方向的margin值對inline是無效的，水平方向有margin值，並且不會佔滿整個寬度。
    

• outline（輪廓）輪廓不佔空間，所以也常常不被算在box組成之一。
  上一篇有說到outline的樣式跟border很像，可是它不佔空間，不管它的outline-width有多大，都不會被計算在元素所佔的空間裡。
  outline無法拆解成上下左右聲明樣式。
  可以看CSS基本樣式-border＆outline了解樣式聲明。

  • 關於outline不佔空間這件事，我們可以來驗證看看：
    • 我們把兩個box的寬設40%，padding-left設5%，margin-left設5%。

      div {
        width: 40%;
        padding-left: 5%;
        margin-left: 5%;
      }
      

      計算兩個box所佔的空間 40%*2+5%*2+5%*2=100%。兩個box所佔的空間剛好是100%，剛好佔滿父元素的寬度。
      
      如果同樣條件，再加個border：10px進去。就會超過100%，第二個元素被擠到下面去。

      div {
        width: 40%;
        padding-left: 5%;
        margin-left: 5%;
        border: 10px solid #000; 
      }
      

      
      但把border換成outline，它的10px不會佔到空間，所以兩個box的寬度仍然是100%，不會有元素被擠到下面。

      div {
        width: 40%;
        padding-left: 5%;
        margin-left: 5%;
        outline: 10px solid #000;
      }
      

      

CSS的box model筆記告一段落box-model是很基礎的概念，在切版時，每個元素的box要怎麼呈現，要多寬多高，內容跟邊框要距離多少，元素跟元素之間距離多少，都是box model在作用的。接下來會再近一步認識跟box model也有關的box-sizing跟margin collapse，那就明天見～

*有任何錯誤或描述不夠精準之處，歡迎指教，非常感謝。