CSS 24. Display屬性設定 / block & inline

嘗試在 anchor tag 設定長寬:

• 初始 code

<a class="link" href="#">
  我是一個連結
</a>

a.link {
  color: cornsilk;
  background-color: rgb(0,5,255);
}

• CSS 增加 width , height 試試看會有什麼狀況:

a.link {
  width: 500px;
  height: 400px;
  color: cornsilk;
  background-color: rgb(0,5,255);
}

• 而你會發現，什麼也沒變化。

  這邊就牽涉到我們章節的主題:

display 屬性

inline

• 打開網頁，右鍵選擇檢查: 點擊我們的 a 連結。

  會發現，有一個地方叫做 display: inline

• 什麼是 inline ? inline 實際上就是根據該 elements
  本身所帶出來的長寬來呈現樣式，並且不能夠做出使用者設定

// inline 無法自行設定長寬等屬性。

block

• 如果要自行設定長寬的話，則可以使用

// blcok 可以有自己的寬高，並且會佔據一整行。

display: block;

• ex:

a.link {
  display: block;
  width: 500px;
  height: 400px;
  color: cornsilk;
  background-color: rgb(0,5,255);
}

• 故 inline & block 之間的差異就是這樣。

tags: 2022 網頁開發全攻略教程 / CSS篇章 - other