應讀者的要求（誰？），今天要講 CSS 偽元素中的 ::before 和 ::after。

這兩個偽元素在網頁設計中非常有用，可以用來在元素的內容前後插入額外的內容，而不需要改變 HTML 結構。

讓我們深入了解這些強大的工具，並看看如何在實際應用中使用它們。

先附上以下範例的程式碼 https://codepen.io/hjxu/pen/VwOQMBO?editors=1100

偽元素是什麼？

CSS 偽元素是用來設計文檔的特定部分的元素。例如，::before 和 ::after 可以用來在一個元素的內容之前或之後插入內容。它們通常用來裝飾元素，增加視覺效果。

使用上需要注意的地方

1. content 屬性：content 是偽元素的必需屬性。如果沒有這個屬性，偽元素將不會顯示。即使是插入空字符串，也必須明確設置。
2. display 屬性：默認情況下，::before 和 ::after 是行內元素。如果需要改變這個行為，可以設置 display 屬性，如 inline-block 或 block。
3. 層級問題：偽元素的層級是基於父元素的，因此可以通過 z-index 和 position 屬性來控制顯示順序。

::before 和 ::after 的基本用法

這兩個偽元素的語法非常簡單，只需要在選擇器後面加上 ::before 或 ::after，然後使用 content 屬性來指定插入的內容。

1
2
3
4
5
6
7

.element::before {
    content: "前置內容";
}

.element::after {
    content: "後置內容";
}

讓我們通過一個簡單的例子來看看它們的實際應用。

HTML：

1
2
3

<div class="container">
    <p class="element">這是一段文字。</p>
</div>

CSS：

1
2
3
4
5
6
7
8
9
10
11

.element::before {
    content: "🎉";
    display: inline-block;
    margin-right: 8px;
}

.element::after {
    content: "🎈";
    display: inline-block;
    margin-left: 8px;
}

在這個例子中，我們在段落元素的內容前後分別插入了一個派對圖示和一個氣球圖示。效果如下：

1

🎉 這是一段文字。 🎈

我們可以用偽元素來創建更多複雜的效果。假設我們想為一個按鈕添加一個漂亮的漸變背景和一個陰影效果。

HTML：

1

<button class="fancy-button">點擊我</button>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

.fancy-button {
    position: relative;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: transparent;
    color: white;
}

.fancy-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, #f06, #f90);
    z-index: -1;
    transition: all 0.3s ease;
}

.fancy-button::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    background: rgba(0, 0, 0, 0.2);
    z-index: -2;
    transition: all 0.3s ease;
}

.fancy-button:hover::before {
    transform: scale(1.1);
}

.fancy-button:hover::after {
    transform: scale(0.9);
}

這段 CSS 使用 ::before 和 ::after 偽元素為按鈕添加了漸變背景和陰影效果，並且在懸停時會有一個放大的動畫效果：

偽元素常見應用場景

1. 裝飾線條、圖標：為標題或段落添加裝飾線條或背景；在按鈕或導航鏈接前後添加圖標。
2. 清除浮動：

在使用浮動布局時，浮動元素的父容器高度可能會崩塌，導致布局錯亂。因為 float 屬性顧名思義就是浮動到上面一層，像被抬起來一樣，那麼接下來的佈局自然會往上鑽。又或者說，是讓浮動元素的高度被忽略。

使用 ::after 偽元素可以幫助清除浮動，也就是讓浮動元素的高度被看見，後面的元素就不敢往前擠了。

舉個栗子🌰：

HTML：

1
2
3
4
5

<div class="clearfix">
    <div class="box float-left">float 1</div>
    <div class="box float-right">float 2</div>
</div>
<div class="bottom">bottom</div>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

在這個例子中，.clearfix 容器內部的兩個浮動元素的浮動被清除，容器高度得以恢復，避免布局錯亂。

4. hover 時輔助文本和提示訊息

使用 ::before 和 ::after 偽元素可以創建簡單的工具提示（tooltip），增加用戶交互體驗。

示例：

HTML：

1
2
3
4

<div class="tooltip">hover me
    <span class="tooltip-text">tooltip content</span>
</div>

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* 提示框出現在上方 */
    left: 100%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltip-text::after { /* 此為對話框的箭頭 */
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

在這個例子中，當用戶懸停在 .tooltip 元素上時，.tooltip-text 元素會顯示，並且帶有一個向下的箭頭（由 ::after 偽元素創建）。這種效果常用於顯示更多訊息或提示。

5. 優化圖片加載失敗的顯示效果

當圖片加載失敗時，瀏覽器會顯示一個破裂的圖片圖標和 alt 文本，這樣會讓頁面看起來不太美觀。我們可以通過使用偽元素 ::before 和 ::after 來美化這種情況，讓頁面在圖片加載失敗時看起來更整潔。

方法大致是

1. 設置父容器：
   • 使用 position: relative; 設置父容器，並設置固定的寬度和高度。
2. 設置圖片：
   • 確保圖片寬度和高度填滿父容器，並設置為塊級元素。
3. **使用偽元素 ::before 和 ::after**：
   • ::before：用來顯示 alt 屬性中的文本。通過絕對定位，使文本垂直和水平居中顯示在圖片的中間。
   • ::after：用來顯示一個破裂圖片的圖標。通過絕對定位，使圖標垂直和水平居中顯示在圖片的中間。
4. 處理無效的 src 屬性：
   • 使用 CSS 選擇器 :not([src])、[src=""] 等處理當圖片 src 無效或空白的情況。
   • 當圖片 URL 無效時，顯示偽元素，隱藏原始圖片。

偽元素的優缺點

優點

1. 不改變 HTML 結構：使用 ::before 和 ::after 可以在不改變 HTML 結構的情況下增加視覺效果，保持代碼整潔。
2. 靈活性：可以用來添加圖標、裝飾線條、背景等，極大地增強了設計的靈活性。
3. 動畫效果：配合 CSS 動畫，可以創建豐富的互動效果。

缺點

1. 兼容性問題：雖然大多數現代瀏覽器都支持 ::before 和 ::after，但在一些舊瀏覽器中可能會有兼容性問題。
2. 樣式限制：偽元素的內容受限於 CSS 的 content 屬性，不能包含複雜的 HTML 結構。
3. 維護困難：大量使用偽元素可能會使樣式變得複雜，增加維護難度。
4. 與 JavaScript 的交互：偽元素無法直接被 JavaScript 操控。要改變偽元素的樣式，必須改變其對應的 CSS 樣式。這意味著如果你需要偽元素與 JavaScript 互動，必須通過改變其父元素的樣式來間接實現。

CSS 偽元素 ::before 和 ::after 是好用又非常容易上手的工具，可以用來增強網頁的視覺效果，而不需要改變 HTML 結構。適當使用可以讓網頁更豐富，你也來試試吧～

今天要介紹 CSS 中的 Flexbox 佈局的基本特性。這是每個前端開發者都應該掌握的技能之一。這篇文章會帶你一步步了解 Flexbox 的基本概念和應用，讓你能夠在實際開發中靈活使用。

為什麼需要 Flexbox？

在過去，我們常常使用 float、inline-block 等方式來佈局網頁，這些方法雖然能解決部分問題，但往往需要寫很多額外的 CSS。而 Flexbox 專為佈局設計，使我們可以更簡單、高效地完成各種佈局需求。

Flexbox 基本概念

Flexbox 由兩個主要部分組成：容器（container）和項目（items）。我們首先需要將一個元素設置為 Flex 容器，然後它的直接子元素就會成為 Flex 項目。

Flex 容器

要將一個元素設置為 Flex 容器，只需給它設置 display: flex。

1
2
3
4
5

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

1
2
3
4
5
6
7
8
9
10

.container {
  ...
  width: 700px;
  display: flex;
}

.item {
  ...
  width: 100px;
}

容器內的每個子元素都是 Flex 項目，這些項目會自動排列成一行。

如果父元素有設定高度，那麼容器內的子元素的高度會跟著父元素的高度變動，除非另外設定 padding 、margin 或高度。

如果父元素沒有設定高度，而是其中一個或多個子元素設定了高度，或是裡面的元素把子元素撐開，那其他未設定高度的子元素會隨著最高的那個兄弟姊妹變動。如圖：

決定 flexbox 走向的軸線

flexbox可以做到讓元素橫向對齊、縱向對齊、等比排列等多種彈性佈局。要更透徹理解flexbox如何運作，在介紹它各種屬性前，不得不先了解一下它的兩根相互垂直的軸線——主軸（main axis）和交叉軸（cross axis）。

主軸由 flex-derection 定義，決定是元素是水平或是垂直排列，還有是否為反向排列。它的預設是水平排列。（下面會列出它的選項）。補充：如果使用的語言是像英文中文等從左到右的語言，則默認起始順序也是從左到右；但若是阿拉伯語等從右到左的語言，默認起始順序會是從右到左。

而交叉軸垂直於主軸，所以會根據主軸是橫向或縱向而決定。

align-items 就是控制交叉軸對對齊方式，預設是 stretch 拉伸。這就是為什麼上面的例子會介紹到在未設定子元素（交叉軸的）高度的情況下，子元素們的高度會自動拉伸填滿父容器，因為這就是交叉軸的預設值。

容器屬性

flex-direction

flex-direction 決定了項目在容器中的排列方向。默認情況下，項目會水平排列（row）。

1
2
3

.container {
  flex-direction: row; /* 可選 row（水平）、row-reverse（反向水平）、column（垂直）、column-reverse（反向垂直） */
}

justify-content

justify-content 用來控制項目在主軸（默認為水平軸）上的對齊方式。

1
2

.container {
  justify-content: center; /* 可選 flex-start（左對齊）、flex-end（右對齊）、center（居中）、space-between（兩端對齊，項目之間均勻分布）、space-around（項目均勻分布，周圍留有空間） */

align-items

align-items 控制項目在交叉軸（默認為垂直軸）上的對齊方式。

1
2
3

.container {
  align-items: center; /* 可選 flex-start（頂端對齊）、flex-end（底端對齊）、center（居中）、baseline（基線對齊）、stretch（拉伸填充） */
}

flex-wrap

默認情況下，所有項目會在一行內排列。如果希望項目換行，可以使用 flex-wrap。預設為不換行。

1
2
3

.container {
  flex-wrap: wrap; /* 可選 nowrap（不換行）、wrap（換行）、wrap-reverse（反向換行） */
}

flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的簡寫形式。

1
2
3

.container {
  flex-flow: row wrap; /* 水平排列，並允許換行 */
}

align-content

當有多行項目時，align-content 用來控制這些行在交叉軸上的對齊方式。

1
2
3

.container {
  align-content: center; /* 可選 flex-start、flex-end、center、space-between、space-around、stretch */
}

其他較為進階的項目屬性

order

order 用來控制項目的排列順序。默認情況下，所有 items 的 order 值都是 0，即按照源代碼順序呈現。更詳細說明參考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items 。

1
2
3

.item {
  order: 1; /* 數值越小，項目越靠前 */
}

flex-grow

flex-grow 定義了 items 的擴展比率。默認值為 0，表示 items 不會放大。

前面提到 flex 特性是在不特別設定尺寸的情況下，或是當所有的子元素都有相同的flex-grow 系數時，子元素在空間分配上是相等的。

如果加了 flex-grow 就會在父元素有空間剩餘的時候，重新分配元素們的比例。它通常與以下提到的flex-shrink 和 flex-basis 共用，一起寫在flex 裡。

1
2
3

.item {
  flex-grow: 1; /* 數值越大，項目擴展空間越多 */
}

flex-shrink

flex-shrink 定義了項目的收縮比率。默認值為 1，表示項目會收縮以適應容器大小。

提醒：flex-shrink 只在子元素加總的寬度超出父容器的情況下起作用；而縮減的比例是從多出來的那一段來分配，目的是讓所有子元素與父容器寬度相同。

1
2
3

.item {
  flex-shrink: 1; /* 數值越大，項目收縮空間越多 */
}

flex-basis

flex-basis 定義了項目的基礎大小。可以先理解為主軸的寬/長度；如果前面有定義父容器主軸的寬/長度的話則會被flex-basis 蓋掉。

1
2
3

.item {
  flex-basis: 100px; /* 可以設置具體大小或百分比 */
}

flex

flex 是 flex-grow、flex-shrink 和 flex-basis 的簡寫。

1
2
3

.item {
  flex: 1 1 100px; /* 1 表示擴展比率，1 表示收縮比率，100px 表示基礎大小 */
}

釐清概念用 -

六角提供的用起來非常清楚：https://codepen.io/peiqun/pen/WYzzYX

https://demo.agektmr.com/flexbox/

https://codepen.io/justd/pen/yydezN

練習用 -

沒錯又是六角做的小遊戲：https://hexschool.github.io/flexbox-pirate/index.html#/

這個很可愛：https://flexboxfroggy.com/

Flexbox 是一個非常強大的工具，能夠讓我們更輕鬆地實現各種佈局需求。在實際項目中靈活應用這些技巧，讓你的網頁佈局更加簡單高效。

快去玩玩上面分享的網站～越早熟悉它，越早體驗到排版的樂趣 ◍•ᴗ•◍

今天，我們來聊聊如何使用 margin: 0 auto 這個簡單但強大的 CSS 屬性，來實現容器的水平居中。

這個方法就像是前端開發中的魔法咒語，只需要簡單地施展一下，你的容器就會乖乖地待在頁面的正中間。

通常我們會使用在像 .container 或 .wrap 這樣的外層容器上。這些容器元素通常是頁面中的主要佈局元素，用來包裹其他內容，使它們在視窗中水平居中。

在實際開發中，我們常常會將主要佈局元素，如頁面主容器或包裹內容的容器設置為水平居中。這樣可以確保頁面在不同寬度的設備上都能保持良好的視覺效果。就像我們看到的絕大部分網頁整體都是置中、兩邊留白的。

為什麼 margin: 0 auto 能讓容器水平居中？

首先，我們要知道 margin: 0 auto 做了什麼：

• margin: 0 auto 設定了容器的上下外邊距（margin-top 和 margin-bottom）為 0，左右外邊距（margin-left 和 margin-right）為自動（auto）。
• 瀏覽器會根據容器的寬度和父元素的寬度，自動計算並分配左右邊距，從而實現水平居中。

使用條件

這個方法並不是對所有元素都有效，使用前你需要確保：

1. 設定寬度：容器必須有一個明確的寬度（例如 width: 80% 或 width: 600px）。如果容器的寬度為 100% 或未指定，margin: 0 auto 將不起作用，因為容器已經佔滿整行。
2. 區塊元素（Block Element）：容器需要是塊級元素。對於行內元素，這個咒語不起作用。

例子

讓我們看看這個咒語是如何發揮神奇效果的：

1
2
3
4
5

<div class="container">
   <div class="content">
     i'm a content block inside .container and centered horizontally! yay!
   </div>
 </div>

1
2
3
4
5
6
7
8
9
10
11
12

.container {
  margin: 0 auto;
  width: 40%;
  padding: 20px;
  background-color: #1cd8d4;
}

.content {
  background-color: #b6f5f4;
  padding: 50px;
  text-align: center;
}

在這個例子中，.container 的寬度設置為 40%，使用 margin: 0 auto 來實現水平居中。

可能遇到的坑

即使 margin: 0 auto 很強大，它也有一些前提條件和限制：

1. 父元素的寬度：這個設定能夠正常作用，需要父元素有足夠的寬度。假如父元素的寬度非常小或被浮動元素（float）影響，子容器可能無法正確居中。
2. 行內元素（Inline Block）：如前所述，margin: 0 auto 對於行內元素不起作用。如果需要水平居中行內元素，可以考慮使用 text-align: center。
3. 浮動元素：如果容器使用了浮動（float），那麼 margin: 0 auto 也不會起作用。可以考慮使用 Flexbox 或 Grid 來實現居中。

最後

margin: 0 auto 是一個實現容器水平居中的簡單且高效的方法，但它也需要滿足一些前提條件：容器必須有明確的寬度，並且是區塊元素。了解這些前提條件可以幫助你在設計頁面佈局時更加得心應手。

希望這篇文章能幫助你更好地理解和使用 margin: 0 auto，讓你開始寫頁面時一開頭就身心舒暢。

Happy coding!

嗨大家，昨天翹掉一天 （噓）

今天我們來聊聊 CSS 中一個非常實用的屬性——box-sizing。這個屬性可以說是前端工程師們的好幫手，能夠讓我們在佈局時更加得心應手。希望這篇文章能讓你更了解 box-sizing，並能靈活運用它來解決佈局中的一些常見問題。

什麼是 box-sizing？

box-sizing 是一個 CSS 屬性，用來定義元素的盒子模型（Box Model）如何計算。box模型決定了一個元素的總寬度和高度，包含內容區（content）、內邊距（padding）、邊框（border）以及外邊距（margin）。默認情況下，CSS 使用的是 content-box 模型。

box-sizing 主要有兩個取值：content-box 和 border-box。

搭配範例邊玩邊看：https://codepen.io/hjxu/pen/yLWzOWW?editors=1100

先聊聊預設值 → content-box

這是 box-sizing 的默認值。在這種模型下，元素的寬度和高度只包括內容區，不包括內邊距和邊框。

1
2
3
4
5
6
7

.box-content  {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid #000;
  box-sizing: content-box;
}

在這個例子中，雖然我們設置了 width: 200px 和 height: 100px，但是加上內邊距和邊框後，元素的實際寬度會變成
200px + 20px（左內邊距） + 20px（右內邊距） + 10px（左邊框） + 10px（右邊框） = 260px，
高度則變成 100px + 20px（上內邊距） + 20px（下內邊距） + 10px（上邊框） + 10px（下邊框） = 160px。

padding 和 border 都是往外擴的。意思是這個容器實際的長寬，需要自己再加上 padding 和 border 來計算。

看圖也許會更形象：

再來看看另一個更常用的值 → border-box

在這種模型下，元素的寬度和高度包括內容區、內邊距和邊框。這意味著我們設定的寬度和高度就已經是元素的最終寬度和高度。

1
2
3
4
5
6
7

.box-border {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 10px solid #000;
  box-sizing: border-box;
}

在這個例子中，設置了 box-sizing: border-box 後，元素的總寬度和高度都固定為 200px 和 100px，高寬寫多少就是多少，不會因為內邊距和邊框的加入而改變。這樣我們在設計佈局時就不需要再去計算額外的寬高，會方便、直覺很多。

再上圖看看對比：

為什麼使用 box-sizing: border-box？

使用 box-sizing: border-box 可以讓我們的 CSS 佈局更直觀、更易於控制，避免了在計算元素寬高時的麻煩。

範例

假設我們有一個兩欄佈局，左邊的欄寬度為 70%，右邊的欄寬度為 30%。

1
2
3
4

<div class="container">
  <div class="left-column">左邊內容</div>
  <div class="right-column">右邊內容</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.container {
  display: flex;
}

.left-column {
  width: 70%;
  padding: 10px;
  border: 5px solid #000;
  box-sizing: border-box;
}

.right-column {
  width: 30%;
  padding: 10px;
  border: 5px solid #000;
  box-sizing: border-box;
}

使用 box-sizing: border-box 後，我們就不需要再考慮內邊距和邊框對寬度的影響，保證了兩欄總寬度始終是 100%。

如何全局應用 box-sizing: border-box

為了讓我們的佈局更加一致，可以使用以下全局設置來應用 box-sizing: border-box：

1
2
3
4
5

*,
*::before,
*::after {
  box-sizing: border-box;
}

這可以說是css文件的標配了。

這樣，所有元素及其偽元素都會應用 box-sizing: border-box，避免了不同元素之間的寬高計算問題。

豪，希望明天真的見得到。

在使用 Hexo 建立部落格的過程中，掌握一些常用命令能夠大大提升工作效率。以下是我整理的一些最常用的 Hexo 命令，並對其用途進行詳細說明，讓你能夠輕鬆應對日常部落格的管理和維護。

這些 Hexo 命令是日常使用中最常見和最基本的操作。通過熟悉和運用這些命令可以更加高效地管理和維護你的 Hexo 部落格。

更多更詳細完整的指令請看這邊 Hexo Commands 。

作為一名初階前端工程師，了解 HTML 元素的基本分類是非常重要的。區塊元素(block)和行內元素(inline)是兩種基本的 HTML 元素類型，弄清它們的特點和用法能讓你的網頁佈局更精確、更符合預期。

接下來，讓我們逐步了解這些元素的區別及其應用。

先附上以下範例的程式碼

區塊元素是什麼？要注意什麼？

區塊元素（Block Elements） 通常用於建立網頁的大結構，分隔主要內容區塊，構建頁面佈局。

特點：

• 獨占一行：區塊元素總是從新行開始，並佔據其父容器的全部寬度。無論設定寬度大小，都會自動換行。
• 控制尺寸：你可以控制區塊元素的高度、寬度、行高以及上下左右的邊距和內距。
• 典型應用：適合用來構建頁面的大框架或段落內容。

常見區塊元素：

• <div>：用來分組或包裹其他元素。
• <p>：段落。
• <h1> 至 <h6>：標題。
• <ul>、<ol> 和 <li>：列表及其項目。
• <table>：表格。

注意事項：

• 區塊元素會佔據整行，下一個元素會顯示在新的一行。

• 適合用來容納其他區塊元素或行內元素，形成頁面結構。

  例子：

  

行內元素是什麼？要注意什麼？

行內元素（Inline Elements） 用於標記和格式化小範圍的文本或其他行內元素，通常不會單獨形成結構，而是作為區塊元素的一部分。

特點：

• 與其他元素同一行：行內元素不會從新行開始，與相鄰的行內元素排列在同一行，直到排不下才換行。
• 無法設置尺寸：行內元素的寬度和高度隨內容變化，設置寬高屬性無效。
• 典型應用：適合用來標記和格式化頁面內的文本片段。

常見行內元素：

• <span>：用來包裹文本或其他行內元素。
• <a>：超連結。
• <img>：圖像。
• <em> 和 <strong>：分別用來標示強調和加粗的文本。
• <input>：輸入框。

注意事項：

• 行內元素不能設置寬高，只有左右的 padding 和 margin 有效，上下無效。

• 適合用來標記小範圍的文本或其他行內元素。

  例子：

  

  加上 .highlight 的設定，可以發現即使空白空間再大，區塊元素 <p> 還是自己佔據整行，而行內元素<span>、<em> 和 <strong>則是根據內容的寬度無縫接續在一起；且寬高等設定是無效的。

  為了更清楚說明行內元素左右的 padding 和 margin 有效但上下無效，我再把.highlight 的背景顏色調透明，加上 padding 來看看：

  

  雖然看起來這個highlight元素是透過padding 把高寬面積撐開了，可實際上只有左右橫向有佔到空間，上下位置其實是沒有被影響的。

  初學時常因為明明調整了padding 或 margin，可是它的上下位置總是雷打不動而感到困擾，現在終於知道為什麼了啦！

那麼分不清區塊元素與行內元素會發生哪些問題？

• 布局錯亂：例如，把一個需要獨占一行的標題設置為行內元素，可能會導致布局混亂。
• 樣式失效：例如，給行內元素設置寬度和高度會無效，導致樣式無法按預期顯示。（如上圖所示）
• 排版不一致：區塊元素和行內元素的排版特性不同，混用可能導致排版不一致。

問題例子：

1
2
3
4
5

<!-- 錯誤用法：應該使用 <div> 而不是 <span> 來包裹段落 -->
<span>
  <h1>標題</h1>
  <p>這是一段文字。</p>
</span>

來考考自己這樣寫會發生什麼問題～☺︎

解決辦法

1. **使用 display: inline-block**：同時具備行內元素的排列特性和區塊元素的尺寸控制能力。
2. **使用 display: block**：使行內元素變為區塊元素，完全控制上下左右的 padding 和 margin。
3. **使用 line-height**：增加行內元素的上下間距。
4. 使用偽元素：用 ::before 和 ::after 增加行內元素周圍的空間。

例子：

1
2
3
4
5
6
7
8
9

.pseudo-element-example::before,
.pseudo-element-example::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  padding: 10px 0;
  vertical-align: middle;
}

偽元素之後會寫到，這裡不做說明囉

延伸知識點：空元素

空元素（Empty Elements）：

• 沒有內容：空元素在開始標籤中閉合，沒有內容。
• 單標籤：只有開始標籤，沒有結束標籤。

常見空元素：

• <br>：換行。
• <hr>：水平線。
• <img>：圖像。
• <input>：輸入框。
• <link>：鏈接外部資源。
• <meta>：元數據。

了解區塊元素和行內元素的特點及用法，並且能靈活應用這些元素，會讓你的網頁設計更具條理和美觀。

那就明天再見了 ✨

第一篇文章，就用來簡單記錄如何用hexo建立個人部落格。

（本篇範例是在Mac和vscode上操作）

Hexo 是一個快速又簡單上手的部落格框架。相比於其他部落格平台，客製化空間非常大，重點是完全免費！作為一個剛起步的工程師和部落客，實在是太～香～了～

在這篇文章中，我將介紹如何安裝和初步設定 Hexo，以及如何用它來建立和發布你的第一篇部落格文章。

開始介紹之前，先分享也是由hexo架構的網站，一起看看hexo的可能性～

Hexschool

好，開始！

環境準備

1. 安裝 Node.js

Hexo 是基於 Node.js 開發的，安裝 Node.js 可以讓我們使用 npm（Node Package Manager）來管理所需的套件。

2. 安裝 Git

Hexo 的設定及部署需要使用到 Git，以管理和上傳你的部落格文章和設定。

可以輸入指令 $ node -v 和 $ git -v 來確認是否安裝成功

Hexo 的安裝與設定

1. 在終端機中用 npm 安裝 hexo-cli，這是用來建立和管理你的 Hexo 部落格的指令行工具。輸入以下指令即可：

1

$ npm install -g hexo-cli

如果出現問題的話，可以試著在前面加上萬能的 sudo 來確保安裝成功。

這邊也可以輸入指令 $ hexo -v 來確認是否安裝成功。

2. 建立一個新的 Hexo 專案。在終端機中輸入以下指令，其中的 blog-example 是你的部落格名稱，你可以換成你想要的名字：

1

hexo init blog-example

成功的話會出現這個文件夾，像這樣：

3. 進入你的部落格目錄，並安裝需要的套件。輸入以下指令：

1
2

cd blog-example
npm install

cd 是進入文件夾的意思，請確保進入建好的Hexo文件夾再往下操作喔。

這樣你的 Hexo 部落格就建立好了。

4. 接下來你可以用以下指令來啟動你的部落格伺服器，然後點開terminal中的網址，通常是 http://localhost:4000 ，就可以看到你的部落格了：

1

hexo server

Voila！可以開始寫你的第一篇文章囉。

寫你的第一篇文章

在 Hexo 中，你的部落格文章會被放在 source/_posts 目錄下。可以使用以下指令來建立一篇新的文章：

1

hexo new "我的第一篇文章"

這樣就會在 source/_posts 目錄下建立一個名為 “我的第一篇文章.md“ 的 markdown 文件，可以在這個文件中寫你的文章。

然後，用以下指令來生成你的部落格網頁：

1

hexo generate

最後，刷新頁面就可以看到你更新了

以上就是如何使用 Hexo 建立部落格的基本步驟

那麼接下來，就是怎麼把hexo部落格部署到GitHub上呢? 這是一個相對複雜的過程，但只要按照步驟逐步進行，你也可以輕鬆完成部署。

Hexo 部署到 GitHub

如果你還不太認識GitHub不知怎麼開始，請先看這邊～

部署到 GitHub 的流程主要有三個步驟：

1. 在 GitHub 上建立一個新的 repository。

這個 repository 的名稱必須是 你的 GitHub 用戶名.github.io。例如，如果你的 GitHub 用戶名是 abc，那麼你的 repository 的名稱就應該是 abc.github.io。

我原以為這個repo的名字可以任意取，但原來作為個人網站用途的話，這樣的命名規則是為了確保你的網站可以直接去到 https://username.github.io 這個域名。

並且，看到 Ray的這篇hexo教學文 提到：

> 另外請不要將部落格架設在資料夾內，例如我最近最常看到的架站方式就是 `自己名稱.github.io/blog` 這種方式架站會有極高的可能性遇到一些怪問題，以下都是目前有人跟我反應的
> 
> - CSS & JS 出現問題
> - 文章無法正常顯示
> - 第三方套件無法取得正確網址路徑…等等問題
> 
> 所以強烈建議部落格建立在根目錄上就好，就像我的 [部落格](https://github.com/hsiangfeng/hsiangfeng.github.io) 一樣，這樣子你可以少踩一點雷唷
> 

我第一個個人網站repo就是取名blog…雖然目前還未有什麼問題，但為了不出錯，在這個範例中我們還是聽取建議吧 XD

2. 上面的步驟完成後，回到vscode，在你的 Hexo 部落格文件找到設定檔 _config.yml ，設定你的部署 repository。在最下方的 deploy 選項設定為以下內容：

1
2
3
4

deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: gh-pages  # 或者你希望部署到的其他分支

username記得改為你的用戶名

第16行的url也要改成你的repo網址

3. 接著要安裝git插件

1

npm install hexo-deployer-git --save

4. 在終端機中，使用以下指令來部署你的部落格到 GitHub：

1

hexo deploy

這個指令會將你的部落格網頁生成，然後將其推送到你在 _config.yml 中設定的 GitHub repository。

這樣，你的部落格就成功部署到 GitHub 上囉！你可以在瀏覽器中輸入 https://你的 GitHub 用戶名.github.io 來訪問你的部落格。

之後再有修改網站內容，在deploy之前需要：

1
2

hexo clean // 清除快取和以生成的靜態頁面
hexo generate // 生成靜態頁面

回到你的GitHub repo頁面並刷新，可以看到文件已經在上面了。

5. 現在來開啟GitHub Pages。點選 Settings，拉到最下方的 GitHub Pages，在 Source 選擇 gh-pages branch，然後點選 Save。

![8_gitpages_setting1.jpg](https://firebasestorage.googleapis.com/v0/b/blog-1d76a.appspot.com/o/8_gitpages_setting1.jpg?alt=media&token=8acbe05d-1c15-4526-a0c7-e43c24334cb9)

![9_gitpages_setting2.jpg](https://firebasestorage.googleapis.com/v0/b/blog-1d76a.appspot.com/o/9_gitpages_setting2.jpg?alt=media&token=afc7bb66-bd45-47f2-a8fe-8758207f670a)

在瀏覽器中輸入 https://你的 GitHub 用戶名.github.io 就可以看到你的部落格嚕。

自定義你的部落格

雖然 Hexo 有很多的主題可以選擇，但是我們肯定還是希望自己的部落格是自己的形狀。那麼可以修改 _config.yml 文件來自定義你的部落格的設定。
在 _config.yml 中，你可以設定你的部落格的標題、描述、語言、主題等設定。你也可以設定你的部落格的導航欄、側邊欄、底部欄等界面元素。

此外，你也可以為你的部落格添加插件來擴展其功能。Hexo 支持許多插件，例如可以讓你添加圖片輪播、社交分享按鈕、評論系統等功能。

以上就是如何使用 Hexo 建立和部署你的部落格的全部基本步驟。希望這篇文章可以幫助你順利地建立你的 Hexo 部落格，並將其部署到 GitHub。

一起快快樂樂賣肝啦(..•˘ᴗ˘•..)

Subtitle

abc abcda abc
Markdown 文件

aaa

1. abc
2. abc

&copy

1

<a href="http://images.google.com/images?num=30&q=larry+bird">&amp; test</a>

• a
• b
• c

header quote

quote

quote of quote

1. italy
2. bold