分類
使用 HTML、CSS 開發一個網站

第 5 節: 2020 使用 CSS 變更 HTML 標籤特性

29. 網頁容器介紹

所有的網頁都像是一個容器,以一個元素包覆著另一個元素,並且,這些元素都有著不同的特性,如此才能滿足使用者各方面的需求。

最常見的容器標籤是:

<div></div>

30. CSS Reset – 清空瀏覽器預設樣式

有時為了滿足設計上的需要,必須得清除瀏覽器內針對 HTML 元素的預設樣式,此時,就會需要用到 CSS Reset 這樣的工具。

31. display: block 區塊元素介紹

區塊(block)元素預設會佔滿整個寬度,因此當區塊元素並排時,預設會呈現出垂直排列的效果。

32. display: inline 行內元素介紹

行內(inline)元素不會佔滿整個版面,因此時常被用來在一個段落內作為標示(<span> 標籤)或是連結(<a> 標籤)。

行內元素無法修改寬跟高,如果要針對行內元素進行寬跟高的調整,那就必須用以下的 CSS 程式碼將行內元素變為區塊元素:

display: block;

35. margin 產生外邊界距離

margin 屬性是用來將一個元素跟其它元素產生間距,值可以為負的。 margin 的寫法如下:

  • margin (四邊都推)
  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

36. padding 產生留白距離

padding 屬性是用來將一個容器內的元素向內推,值不可以為負的。 padding 寫法如下:

  • padding (四邊都推)
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

38. Box Model(盒模型)詳細介紹

一個 HTML 容器從內到外的結構為:content、padding、border、margin。除了 margin 外,其它屬性都會影響到一個元素的整體寬度,進而影響排版。

39. margin 0 auto 區塊水平置中

可以在一個區塊元素上加上以下程式碼,讓該元素依照瀏覽器的寬度始終維持水平置中對齊:

margin: 0 auto;

40. text-align 文字水平調整

在一個包著段落的區塊元素上加上以下程式碼,可以讓該段落水平置中對齊:

text-align: center;

41. 2020補充教材:不想算盒模型的推擠?試試 CSS3 box-sizing 吧!

可以使用全域選擇器加入以下語法,讓內距被忽略不計,所有區塊元素都會是原先定義的寬度與高度,不受 border 與 padding 的影響:

box-sizing: border-box;

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *