19.HTML CSS邊距、邊框、填充和內容

模型是CSS布局的基礎，理解它的每個組成部分對于創建整潔、響應式的網頁至關重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內容（Content），并解釋它們如何共同工作來創建網頁布局。

盒模型概述

在CSS中，盒模型是一種用于設計和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內容、內邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關重要。

盒模型的結構

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每個盒子從里到外包括：

內容（Content）：這是盒子中的實際內容，包括文本、圖片或其他媒體。
內邊距（Padding）：內容區域周圍的空間，內邊距是透明的。
邊框（Border）：圍繞內邊距和內容的線框，可以設置大小、樣式和顏色。
外邊距（Margin）：盒子外圍的空間，用來隔開相鄰的盒子。

邊距（Margin）

邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。

/* 單邊邊距設置 */
.element {
  margin-top: 10px;    /* 上邊距 */
  margin-right: 15px;  /* 右邊距 */
  margin-bottom: 10px; /* 下邊距 */
  margin-left: 15px;   /* 左邊距 */
}

/* 簡寫形式 */
.element {
  margin: 10px 15px;   /* 上下邊距 | 左右邊距 */
}

邊距可以用來創建元素之間的空間，或者將元素與頁面邊緣分開。當兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現象稱為邊距折疊。

邊框（Border）

邊框是盒子的一個可視化組件，圍繞著內邊距和內容。邊框的樣式、寬度和顏色都可以自定義。

.element {
  border-style: solid; /* 邊框樣式 */
  border-width: 2px;  /* 邊框寬度 */
  border-color: black; /* 邊框顏色 */
}

/* 簡寫形式 */
.element {
  border: 2px solid black;
}

邊框對于突出顯示元素或分隔內容非常有用。你還可以只為邊框的一邊或幾邊設置樣式。

填充（Padding）

填充是圍繞內容內部的空間，它可以增加內容和邊框之間的距離。與邊距不同，填充區域會被背景顏色或背景圖片覆蓋。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 簡寫形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充對于控制元素內部的空白區域非常有用，它可以幫助改善內容的可讀性。

內容（Content）

內容是盒子中的文字、圖片或其他媒體。內容的大小可以通過設置width和height屬性來控制，但實際可見區域的大小還會受到內邊距和邊框的影響。

.element {
  width: 200px;
  height: 150px;
}

內容區域是設計和布局的核心，所有的文本和媒體都在這里顯示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

總結

理解盒模型是前端開發的基礎，它允許我們精確控制元素的布局和間距。通過恰當地使用邊距、邊框、填充和內容，我們可以創建出既美觀又功能強大的網頁設計。隨著響應式設計的興起，現代CSS框架已經將盒模型的概念整合進其核心，使得跨設備布局變得更加一致和簡單。

在日常開發中，經常使用開發者工具來檢查和調試盒模型的各個部分，確保我們的樣式表現按照預期工作。掌握盒模型，你將能夠更加自信地處理網頁布局的挑戰。

. 流式定位

這是網頁元素默認的定位方式，網頁元素按照其HTML標簽的先后順序，在網頁內依次顯示，就像液體一樣“流動”，所以稱為“流式定位”，這種方式將所有網頁元素的默認顯示方式分為以下幾種類型：

塊級元素（display: block）：可以設置寬度，默認寬度為100%，但不管多寬都會獨占一行，多個塊級元素按從上到下的順序縱向顯示，默認顯示為塊級元素的包括：段落(p)、層(div)、表單(form)等。

內聯元素（display: inline）：不會獨占一行，可以多個元素共享一行，按從左至右的順序橫向顯示，默認顯示為內聯元素的包括：文本標簽(label)、鏈接(a)等。

行內塊元素（display: inline-block）：這種定位方式兼具塊級元素和內聯元素的優勢，既可以像塊級元素一樣設置寬度和高度，又可以一行放置多個，默認顯示為內聯元素的包括：圖片(img)、輸入項(input)、多行文本(textarea)等。

可以通過設置HTML元素的CSS樣式的display屬性來改變元素默認的流式定位方式，例如將層(div)元素設置為行內塊元素后，就可以跟文本標簽(label)、圖片(img)等元素放在同一行顯示，不再獨占一行。

流式定位存在一些問題，主要包括：

l 塊級元素很難被有效利用起來，因為其獨占一行的特性，不能一行顯示多個。

l 內聯元素無法設置寬度、高度和垂直方向邊距，不好精確控制元素大小和顯示位置。

l 內聯元素之間水平方向會因為代碼中的空格、換行等產生間隙，垂直方向存在默認的底部間隙，這給水平布局帶來額外的麻煩。

2. 浮動定位

浮動定位會讓元素脫離原來的標準文檔流浮動起來，直至它的外邊緣遇到父元素的內邊緣或者另一個兄弟浮動元素的外邊緣。

任何HTML元素都可以設置為浮動，可以通過設置HTML元素的CSS樣式的float屬性來設置具體的浮動方式，可以選擇向左浮動（float: left）或向右浮動（float: right）。

相對于網頁默認的流式定位，浮動定位有以下優勢：

l 多個塊級元素可以共享一行。

l 內聯元素可以設置寬度和高度。

l 元素之間的空格、換行不影響元素的顯示位置。

浮動定位最初被設計出來是為了實現文字環繞圖片顯示的效果，但由于其上述優勢，后來大家也用浮動定位來設置更多網頁元素的位置，代替默認的流式定位，也是TaskBuilder默認的組件定位方式。

不過，浮動定位也有一些問題，不是所有的場合都適合，大家根據需要選擇，這些問題包括：

l 居中對齊問題：浮動定位不太好實現垂直和水平居中對齊。

l 父元素的高度塌陷問題：如果元素不浮動，會自動撐開父元素的高度，浮動后，由于浮動元素已經脫離原來的標準流，如果父元素沒有設置高度，且父元素中沒有其他非浮動元素時，會造成父元素的高度塌陷（高度變成了0）。

3. 坐標定位

坐標定位是指為HTML元素設置上下左右的偏移量來確定其具體的顯示位置或大小，通過設置元素CSS的position屬性，可以選擇坐標定位的具體方式，包括：

相對定位（position: relative）：即相對于元素在流式定位時的正常位置進行定位，您可以通過 top、right、bottom、left 這 4 個CSS屬性來設置元素相對于正常位置的偏移量，在此過程中不會對其它元素造成影響。

相對定位示意圖

絕對定位（position: absolute）：即相對于第一個非靜態定位的父級元素進行定位，可以通過 top、right、bottom、left 這 4 個屬性來設置元素相對于父級元素位置的偏移量。如果沒有滿足條件的父級元素，則會相對于瀏覽器窗口來進行定位。元素使用絕對定位后，其他標準流元素會填補它的位置。絕對定位可以通過設置元素CSS樣式的left和top屬性來精確控制元素的顯示位置，再設置right或bottom這兩個CSS樣式，實現元素的寬度或高度根據父元素的寬度和高度動態設置和變化。

絕對定位示意圖

固定定位（position: fixed）：即相對于瀏覽器的窗口進行定位，可以使用 top、right、bottom、left 這 4 個CSS屬性來定義元素相對于瀏覽器窗口的位置。使用固定定位的元素無論如何滾動瀏覽器窗口，元素的位置都是固定不變的。

粘性定位（position: sticky）：它是相對定位和固定定位的結合體，能夠實現類似吸附的效果，當滾動頁面時它的效果與相對定位相同，當元素要滾動到屏幕之外時則會自動變成固定定位的效果。用粘性定位很容易實現元素置頂顯示的效果。

4. 表格定位

顧名思義，表格定位就是用表格來實現網頁內容的定位，先繪制一個多行多列的表格，并設定表格各列的寬度和各行的高度，然后在表格的單元格里插入相關網頁元素，最終實現這些元素的位置定位。

這種定位方式比較適合可以將頁面內容清晰明確地劃分為多行多列的場景，例如各種業務單據和數據報表等。

有兩種方式可以實現表格布局： HTML Table（<table>標簽）和CSS Table（display:table 等相關屬性）。HTML Table是早期網頁設計采用的表格定位方式，由于其渲染性能較低，且有些界面效果較難實現，用的人已經比較少了，現在推薦使用CSS Table，能實現一些HTML Table做不到的效果。

目前，TaskBuilder只是在報表設計器里集成了一個第三方的表格插件，在前端tfp頁面設計器里，還沒有提供表格定位相應的容器組件，未來會提供。（現有的可編輯表格和數據表格不是用來為其他組件提供定位的，所以不能算作是表格定位的容器組件）

5. 彈性定位

彈性定位又叫彈性布局，這種定位方式最大的特點就是可以讓子元素的大小可以根據父元素的大小自動擴張或收縮，從而可以做到自動適應不同終端的屏幕尺寸，或者在用戶改變瀏覽器窗口大小時自動伸縮。

這種定位方式需要先將一個父元素的CSS屬性display設置為flex，然后該元素里的子元素即可實現彈性定位。

采用彈性定位的容器元素可以設置以下CSS樣式：

元素排列方向（flex-direction）：用來設置子元素的排列方向，有四種方式可以選擇：從左到右顯示（row）、從右到左顯示（row-reverse）、從上到下顯示（column）、從下到上顯示（column-reverse）。

元素水平對齊方式（justify-content）：用來設置子元素在水平方向的對齊方式，可以選左對齊（flex-start）、右對齊（flex-end）、居中對齊（center）、兩端對齊（space-between）和等距對齊（space-around）。

元素垂直對齊方式（align-items）：用來設置子元素在垂直方向的對齊方式，可以選頂部對齊（flex-start）、底部對齊（flex-end）、居中對齊（center）、基線對齊（baseline）、自動伸展（stretch）。

內容整體對齊方式（align-content）：當有多行子元素時，可以用該屬性設置全部子元素整體的垂直對齊方式，包括自動拉伸（stretch）、在容器的頂部排列（flex-start）、在容器的底部排列（flex-end）、在容器內居中排列（center）、均勻分布，上下靠邊（space-between）、均勻分布，每行等距（space-around）。

元素是否自動換行（flex-wrap）：用來設置子元素是否自動換行。

彈性定位容器內的子元素可以設置以下CSS樣式：

擴展量（flex-grow）：必須參數，用來設置當前元素相對于其他元素的增長量，默認值為 0，即如果存在剩余空間，也不自動放大。

如果所有元素的擴展量都設置為1，將等分剩余空間。如果一個元素的擴展量設置為2，其他元素都為1，則前者占據的剩余空間將是其他項的2倍，如下圖所示：

收縮量（flex-shrink）：必須參數，用來設置當彈性容器空間不足時，該元素相對于其他元素的收縮量，默認值為 1。如果所有元素的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個元素的flex-shrink屬性為0，其他元素都為1，則空間不足時，前者不縮小。

基準長度（flex-basis）：必須參數，元素的基準長度定義了父容器在分配多余空間之前，當前元素占據的主軸空間（main size，如果是橫向排列，則指父容器在水平方向的空間，如果是縱向排列，則指父容器在垂直方向的空間）。瀏覽器根據這個屬性，計算主軸是否有多余空間。合法值為 auto（默認值，表示根據其他情況自動伸縮），或者以具體的值加 "%"、"px"等單位的形式，表示該元素將占據固定空間。

顯示順序（order）：屬性用來設置元素在容器中出現的順序，您可以通過具體的數值來定義元素在容器中的位置，默認值為 0。下圖所示的四個普通的面板組件，在彈性面板里從左至右的正常插入順序是panel1、panel2、panel3、panel4，但通過設置這四個面板的顯示順序，將panel1和panel4的顯示位置進行了調換。

對齊方式（align-self）：該屬性允許您為某個特定的元素設置不同于其它元素的對齊方式，該屬性可以覆蓋父容器組件（彈性面板）里的垂直對齊屬性的值。該屬性的可選頂部對齊（flex-start）、底部對齊（flex-end）、居中對齊（center）、基線對齊（baseline）、自動伸展（stretch）。

由于彈性定位的自動伸縮特性，且易于實現子元素的水平和垂直對齊，目前很多主流的前端UI框架都大量地采用了該定位方式。

在線咨詢

上一篇：HTML實戰篇：純css制作二級橫向以及豎向菜單導航
下一篇：微軟：Win 11 商店將 HTML 替換為 XAML，性能得到顯著提升

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商