changed 5 years ago
Linked with GitHub
tags: iron man

Day21 Box-model

Box model

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

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

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

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

      ​​​​​​​​span {
      ​​​​​​​​  border: 1px solid #000;
      ​​​​​​​​}
      

      Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

    • 寬高值撐開的範圍

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

      Image Not Showing Possible Reasons
      • The image file may be corrupted
      • The server hosting the image is unavailable
      • The image path is incorrect
      • The image format is not supported
      Learn More →

    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%,剛好佔滿父元素的寬度。

        ​​​​​​​​​​​​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,那就明天見~

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

Select a repo