# DAY4 - 行內元素的介紹 - display: inline

### 認識行內元素的特性:

- 例如: a標籤、li 標籤 這些行內元素。

可發先到，兩行的 code。不同於「區塊元素」的強制分行，他倆並排再一起了。

    <a href="#">行內元素1</a>
    <a href="#">123</a>


### 可運用在行內文字中的範例效果 - `a`、`span`:

1. 埋藏 anchor tag:

p 段落，本身是 block level，但透過 a 連結行內元素的特性，可以乖乖的藏在整段文字裡頭。

<p>今天天氣不錯，我利用了時間，看了一篇<a href="#">連結</a>獲得了很多知識。</p>


2. 利用 - `span` 標籤，點綴區塊內的行內文字。

- span tag，本身不具有任何的意思，而僅僅是用來點綴樣式用的行內元素。

// HTML:

    <p>
      <span> 今天 </span>
      天氣不錯，我利用了時間，看了一篇<a href="#">連結</a>獲得了很多知識。
    </p>

// CSS:

span {
  color: red;
  font-size: 24px;
}


### 何謂語意化?

- 例如 p - 代表段落
a - 代表 anchor 錨點
h1 - 標題 等等。

---

### 行內元素不可設定寬(width)與高(height)。

 <a href="#">這是一個連結</a>

1. 透過 computed 可以發現到: 這個 a 標籤，它的寬高，為 auto x auto


2. 透過 background 的方式，得知了: 它是根據物件本身的大小來決定它的寬高，而且無法自訂。


3. 自行設定寬高驗證:

- 你會發現，不管你怎麼去設定 `width`，`height` 等屬性，他仍然是維持原來的寬與高。

---

### 如何將行內元素更改成區塊元素?

1. 承上，這時候在 a tag 的屬性添加:

display: block;

a{
  display: block;
  width: 50px;
  height: 50px;
}

- 此時，a 標籤就具有**區塊元素的特性**了。

- 並且會發現到，我們的游標，**不需要點擊到文字**，而是滑動到文字周圍的藍色背景範圍，即可產生連結預設畫面。

### 適用 anchor tag 為區塊元素特性的時機?

1. 製作超連結，增加使用者體驗。

2. 反之，設計在段落文字內的連結，則不適合這麼做。

###### tags: `Re:0 前端工程師之路 - HTML CSS 篇章`