CSS 盒子模型

CSS 盒子模型是 CSS（層疊樣式表）中的一個基本概念，它定義了網頁上元素的結構和顯示方式。它定義了元素的內容、內邊距、邊框和外邊距的屬性和行為。在這篇文章中，你將學習所有關於 CSS 盒子模型的知識。

什麼是 CSS 盒子模型？

CSS 盒子模型是一個用於組織網頁元素的容器，以便元素能夠以良好的視覺效果顯示。它包含四個基本元件：內容、內邊距、邊框和外邊距，如下圖所示。

CSS 盒子模型元件

讓我們詳細瞭解每個元件。

內容：這是盒子最內層的區域，指的是元素的實際內容，例如文字、影像或其他媒體。你可以使用諸如inline-size和block-size（也稱為寬度和高度）的屬性來設定其大小。
內邊距：表示內容和元素邊框之間的空間。它可以分別應用於元素的每一側（頂部、右側、底部和左側）。此區域的大小使用padding和其他相關屬性設定。
邊框：定義元素內邊距和內容周圍的一條線或邊界。此區域的大小、樣式和顏色使用border和其他相關屬性設定。
外邊距：表示元素邊框之外的空間。與內邊距一樣，外邊距也可以分別為每一側設定，通常用於在網頁上的元素之間建立空間。此區域的大小使用margin和其他相關屬性設定。

元素在網頁上佔據的總空間是其內容寬度、內邊距、邊框和外邊距的總和。理解 CSS 盒子模型對於設計和定位網頁上的元素至關重要，因為它允許你控制間距、佈局和整體設計。

盒子模型型別

如下列出兩種型別的盒子模型。

標準盒子模型 (Content-Box)
替代盒子模型 (Border-Box)

瀏覽器預設使用標準盒子模型。讓我們在下面的章節中瞭解這兩種盒子模型。

標準 CSS 盒子模型

在標準盒子模型中，高度和寬度屬性僅包含元素的內容區域。內邊距、邊框和外邊距新增到內容區域之外。

考慮以下樣式框。讓我們計算一下盒子實際佔用的空間。

.box {
   width: 300px;
   height: 100px;
   margin: 20px;
   padding: 15px;
   border: 5px solid green;
}

標準盒子模型尺寸計算

盒子區域僅到外邊距，因此外邊距區域不會新增到盒子最終佔用的空間中。

總寬度 = 300（寬度）+ 15（左內邊距）+ 15（右內邊距）+ 5（左邊框）+ 5（右邊框）= 340px
總高度 = 100（高度）+ 15（上內邊距）+ 15（下內邊距）+ 5（上邊框）+ 5（下邊框）= 140px

標準盒子模型示例

以下示例展示如何在 HTML 中定義標準盒子模型。這裡我們為 `box-sizing` 屬性賦予預設值 `content-box`。在這裡我們可以注意到內邊距和邊框的寬度包含在元素的 offsetWidth 中。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 300px;
            height: 100px;
            padding: 20px;
            border: 10px solid black;
            margin: 30px;
            /* This is the default value */
            box-sizing: content-box; 
        }
    </style>
</head>
<body>
    <div class="box" id="myBox">
      Total Width = 300 (content) + 20 (padding 
      left) + 20 (padding right) + 10 (border  
      left) + 10(border right) = 360 px
    </div>
    <p id="dis"></p>
    
    <script>
        // Get the div element
        var box = document.getElementById('myBox');
        // Get total width of element
        var totalWidth = box.offsetWidth;

        document.getElementById('dis').innerText = 
        'Width of the div using offsetWidth property: ' 
        + totalWidth + 'px';
    </script>
</body>
</html>

替代盒子模型

對於替代盒子模型，元素的實際寬度是傳遞給它的寬度值，高度也是如此。在計算盒子的實際大小時，不需要新增內邊距和邊框。為了啟用或開啟元素的替代盒子模型，你需要在其上設定box-sizing: border-box。

.box {
    box-sizing: border-box;
}

讓我們考慮與標準盒子模型示例中提到的相同的盒子尺寸，並計算盒子實際佔用的空間。

.box {
   width: 300px;
   height: 100px;
   margin: 20px;
   padding: 15px;
   border: 5px solid green;
   box-sizing: border-box;
}

替代盒子模型尺寸計算

具有列出尺寸的盒子的空間將是。

總寬度 = 寬度 = 300px
總高度 = 高度 = 100px

替代盒子模型示例

這是一個替代盒子模型的示例。在這裡，我們將 `box-sizing` 屬性更改為 `border-box`，因此元素的總寬度不包括邊框和內邊距的寬度。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box {
            width: 300px;
            height: 150px;
            padding: 20px;
            border: 10px solid black;
            margin: 30px;
            /* Change this property to see difference */
            box-sizing: border-box; 
        }
    </style>
</head>
<body>
    <div class="box" id="myBox">
        Total Width = 300 px <br>
        Total Height = 150 px
        
    </div>
    <p id="dis"></p>
    
    <script>
        // Get the div element
        var box = document.getElementById('myBox');
        // Get the total width of element
        var totalWidth = box.offsetWidth;

        document.getElementById('dis').innerText = 
        'Total width of div using offsetWidth property: ' 
        + totalWidth + 'px';
    </script>
</body>
</html>

盒子模型的重要性

視覺表示：盒子模型允許開發人員視覺化並理解元素的結構以及它們在網頁上的顯示方式。
佈局和定位：盒子模型會影響網頁上元素的佈局和定位。
尺寸計算：盒子模型允許精確計算元素尺寸，包括寬度和高度。
控制和自定義：使用盒子模型，開發人員可以對元素的外觀進行細粒度的控制。
響應式設計：盒子模型在響應式網頁設計中起著至關重要的作用，在響應式網頁設計中，元素需要適應和響應不同的螢幕尺寸和裝置。

盒子模型和內聯盒子

內聯元素周圍也有盒子。它們也像其他盒子一樣有外邊距、內邊距和邊框。

示例

這是一個示例，其中解釋了內聯元素<p>周圍的盒子模型。請參考圖表以瞭解詳細說明。

<html>
<head>
<style>
   p {
      padding: 1em 2em;
      margin: 5px 10px;
      border: 5px solid red;
      width: 200px;
   }
</style>
</head>
<body>
   <h1>Box model</h1>
   <p>Example for a box model.</p>
</body>
</html>

顯示為內聯塊

具有display: inline-block的元素會尊重width和height值。並且內邊距、邊框和外邊距的值會將其他元素從該盒子推開。

此功能在你想為元素提供更大區域（例如連結<a>）的情況下很有用。你可以結合內邊距和其他相關屬性一起在該元素上使用display: inline-block。

示例 1

<html>
<head>
<style>
   a {
      padding: 1em 2em;
      margin: 5px 10px;
      border: 5px solid red;
      width: 50px;
      display: inline-block;
      background-color: beige;
      font-size: 1em;
   }
</style>
</head>
<body>
   <h1>display: inline-block</h1>
   <a href="">First</a>
   <a href="">Second</a>
   <a href="">Third</a>
</body>
</html>

示例 2

在此程式碼中，嘗試減小外邊距、內邊距或邊框，以檢視內聯元素的變化。

<html>
<head>
<style>
   a {
      padding: 0em 2em;
      margin: 10px 10px;
      border: 5px solid red;
      width: 50px;
      background-color: beige;
      font-size: 1em;
   }
</style>
</head>
<body>
   <p>
      The display:inline-block respects the 
      width of the element. Here it is applied 
      on the link <a href="">First</a>. 
      As you change the value of padding, margin 
      or/and border you can see the change.
    </p>
</body>
</html>

塊級和內聯盒子

CSS 提供不同型別的盒子，它們是塊級盒子或內聯盒子。這些盒子的顯示方式有兩種：內部顯示型別和外部顯示型別。

可以使用 CSS 的display屬性來設定盒子的顯示方式，該屬性具有各種值。根據這些值可以確定顯示方式。

請參考圖表以更好地理解'display: block | inline'。

有關 CSS 中display屬性的詳細資訊和示例，請訪問CSS display 屬性文章。

列印頁面