區塊模型介紹

1.1 區塊模型基礎

區塊模型是了解如何在網頁上排列和互動元素的基礎。它定義了 HTML 元素的結構和尺寸，以及它們如何被內邊距、邊框和外邊距包圍。

區塊模型基礎

CSS 的區塊模型描述了 HTML 元素的區塊組成。每個元素由四個主要部分組成：

• 內容 (content)。
• 內邊距 (padding)。
• 邊框 (border)。
• 外邊距 (margin)。

這些部分決定了一個元素如何顯示以及如何與頁面上的其他元素互動。

內容 (Content)

內容 (content) 是元素的主要部分，其中包含文字、圖片或其他嵌入元素。內容的尺寸可以通過 width 和 height 屬性明確指定，也可以由元素的內容決定。

使用範例

在這個範例中，元素 .content 的內容包括文本 "這是元素的內容.":

    
      .content {
        background-color: #e0e0e0;
        padding: 20px;
        border: 2px solid #000;
        margin: 20px;
      }
    
  

    
      <div class="content">
        這是元素的內容.
      </div>
    
  

1.2 區塊模型視覺化

在區塊模型中，每個元素可以表示為一個矩形區塊，包含以下部分：

• 內容 (Content): 元素的內部內容，例如文字或圖片
• 內邊距 (Padding): 內容與元素邊框之間的空間
• 邊框 (Border): 包圍內邊距和內容的線條
• 外邊距 (Margin): 元素邊框與鄰近元素之間的空間

視覺化區塊模型:

    
      .element {
        width: 200px;           /* 內容寬度 */
        padding: 10px;          /* 內邊距 */
        border: 2px solid red;  /* 邊框 */
        margin: 20px;           /* 外邊距 */
      }
    
  

1.3 邊框 (Border)

邊框 (border) 包圍著元素的內容和內邊距。邊框可以具有不同的樣式、厚度和顏色。邊框可以用來視覺上突出頁面上的元素。

使用範例

在這個範例中，元素 .border 使用了厚度為 5 像素、虛線和黑色的邊框，包圍著內容和內邊距。

    
      .border {
        background-color: #e0e0e0;
        padding: 20px;
        border: 5px dashed #000;
        margin: 20px;
      }
    
  

    
      <div class="border">
        這是帶有邊框的元素.
      </div>