/*
  檔案功能：normalize.css
  被引用目的：讓不同瀏覽器先回到一致、可預期的基礎狀態。
  編寫安排：本檔集中處理 HTML 元素的預設行為，例如盒模型、body 外距、圖片寬度、連結底線與表單元素。
  教學閱讀方式：先理解它是「打地基」的樣式；真正的藝術家網站視覺通常由 style.css 與各模組 CSS 接手完成。
*/

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
* {
  /* 設定盒模型計算方式，常用 border-box 讓尺寸更直覺。 */
  box-sizing: border-box;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
html {
  /* 設定行高，影響段落閱讀節奏。 */
  line-height: 1.15;
  /* 設定 CSS 屬性 -webkit-text-size-adjust，用來微調版面或視覺表現。 */
  -webkit-text-size-adjust: 100%;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
body {
  /* 設定元素外距，控制元素與元素之間的距離。 */
  margin: 0;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
main {
  /* 設定元素顯示模式，例如 block、inline-block、flex。 */
  display: block;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
img {
  /* 限制最大寬度，避免內容在大螢幕上過度拉長。 */
  max-width: 100%;
  /* 設定元素高度。 */
  height: auto;
  /* 設定 CSS 屬性 vertical-align，用來微調版面或視覺表現。 */
  vertical-align: middle;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
a {
  /* 設定文字顏色。 */
  color: inherit;
  /* 設定連結底線等文字裝飾。 */
  text-decoration: none;}

button,
input,
textarea,
/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
select {
  /* 設定 CSS 屬性 font，用來微調版面或視覺表現。 */
  font: inherit;}

/* 選擇器開頭，指定接下來的屬性要套用到哪些 HTML 元素。 */
table {
  /* 設定 CSS 屬性 border-collapse，用來微調版面或視覺表現。 */
  border-collapse: collapse;
  /* 設定 CSS 屬性 border-spacing，用來微調版面或視覺表現。 */
  border-spacing: 0;}