###### tags: `iron man`
# Day21 Box-model

## 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](https://ithelp.ithome.com.tw/articles/10224613)了解樣式聲明。
- `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](https://ithelp.ithome.com.tw/articles/10224613)了解樣式聲明。
- 關於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%，剛好佔滿父元素的寬度。

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

如果同樣條件，再加個`border：10px`進去。就會超過100%，第二個元素被擠到下面去。

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

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

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


CSS的box model筆記告一段落，這個概念在切版上很常遇到。接下來會在講跟box model也有關的box-sizing跟margin collapse，那就明天見～

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