iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
1

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

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


上一篇
Day20 CSS基本樣式-Border&Outline
下一篇
Day22 CSS:Box-sizing
系列文
從門外漢到前端新手30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言