HTML 盒模型 (Box model)


Posted by fang on 2020-07-29

首先先隨便開一個網頁,按右鍵按檢查,在右下角就會有一個很多正方形疊起來的圖,這個就是盒模型,如下圖(右下角紅框處):

盒模型元素

從圖中可以得知,和模型的元素從裡到外稱為 Content, Padding, Border, Margin,我認為可以先從最好理解的兩個開始解釋,Content 就是這個物件的內容,Border 就是這個物件的邊框,舉個例子,當我今天先做一個 bar 並且幫它加上 Border,程式碼以及長出來的圖如下:

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <title>The HTML5 Herald</title>
  <link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  <style>
     <!-- 為了方便觀看,我也設定了背景顏色為黃色 -->
    .explain {
      background: yellow;
      border: 2px solid black;
    }
  </style>
</head>

<body>
  <div class="explain">
    我是一條 bar!
  </div>
</body>
</html>

最後顯示如下:

如果我希望字的上下不要跟 Border 貼在一起、黃色的地方可以多一點,這個時候就是加上 Padding,在 中的 .explain 中,加入 padding: 20px 10px 20px 10px;,其中參數順序為:上、右、下、左,在這個例子中就是上下分別留 20px,左右分別留10px,跑出來的圖如下:

但是因為這個 bar 太貼近瀏覽器的邊框了,我希望它在 Border 外面再多留一點空間,所以可以使用 Margin 這個參數,也就是在 中的 .explain 中,加入 margin: 10px 10px;,這邊的參數順序為:上下、左右,在這個例子中就是上下、左右分別留 10px,如下圖:

如此一來就完成我的 bar 摟!!
但是這個現在是只有一個物件,如果物件一多,牽涉到物件排列的方式 Display,這個我會在其他文章中做筆記 html display


#box model #html







Related Posts

立即呼叫函式表達式(IIFE)

立即呼叫函式表達式(IIFE)

Node.appendChild() vs. Element.append()

Node.appendChild() vs. Element.append()

個人CodeBase紀錄 - EP.0 引言

個人CodeBase紀錄 - EP.0 引言


Comments