寫出幾個初始化CSS的樣式，並解釋說明為什麼要這樣寫

王铁柱6發表於2024-11-24
CSS

以下是一些初始化 CSS 樣式，並解釋了為什麼這樣寫：

/* 重置內外邊距 */
* {
  margin: 0;
  padding: 0;
}

/* 繼承 box-sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box; /* 使用 border-box 模型 */
  font-size: 62.5%; /* 設定根元素字型大小為 10px，方便 rem 使用 */
  -webkit-text-size-adjust: 100%; /* 防止 iOS Safari 自動調整字型大小 */
}

body {
  font-family: sans-serif; /* 設定預設字型 */
  line-height: 1.5; /* 設定行高 */
  min-height: 100vh; /* 確保 body 至少佔據整個視口高度 */
  -webkit-font-smoothing: antialiased; /*  macOS/iOS 上的字型平滑 */
  -moz-osx-font-smoothing: grayscale; /*  Firefox 上的字型平滑 */
}

img, picture, video, iframe, table, figure {
  display: block; /* 防止圖片底部出現空白 */
  max-width: 100%; /* 限制圖片寬度，防止溢位容器 */
  height: auto; /* 保持圖片寬高比 */
}

a {
  text-decoration: none; /* 去除連結下劃線 */
  color: inherit; /* 繼承父元素顏色 */
}

ul, ol {
  list-style: none; /* 去除列表預設樣式 */
}

button, input, select, textarea {
  font: inherit; /* 繼承父元素字型樣式 */
  background-color: transparent; /*  背景透明 */
  border: none; /* 去除預設邊框 */
  padding: 0; /* 去除預設內邊距 */
  appearance: none; /* 去除預設外觀樣式 */
  cursor: pointer; /*  設定滑鼠樣式為指標 */
}

/*  禁用按鈕預設樣式 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

解釋:

  • * { margin: 0; padding: 0; }: 這是最常見的重置樣式，用於去除所有元素的預設內外邊距。不同瀏覽器對不同元素的預設內外邊距設定不同，這會導致佈局出現差異。這個規則可以消除這些差異，使佈局更可控。

  • box-sizing: border-box;: border-box 模型將元素的 padding 和 border 包含在元素的寬度和高度內，而不是在元素的寬度和高度之外新增。這使得計算元素的尺寸更加直觀和方便。

  • font-size: 62.5%;: 將根元素的字型大小設定為 10px，方便使用 rem 單位。1rem 等於根元素的字型大小，因此設定根元素字型大小為 10px 後，1rem 就等於 10px，方便計算。

  • -webkit-text-size-adjust: 100%;: 防止 iOS Safari 自動調整字型大小，確保字型大小與設計一致。

  • font-family: sans-serif;: 設定預設字型為無襯線字型。

  • line-height: 1.5;: 設定行高，提高文字可讀性。

  • min-height: 100vh;: 確保 body 元素至少佔據整個視口高度。

  • -webkit-font-smoothing 和 -moz-osx-font-smoothing: 用於字型平滑，使字型在不同作業系統上顯示更清晰。

  • img, picture, video, iframe, table, figure { display: block; ... }: 將這些元素設定為塊級元素，防止圖片底部出現空白，並限制其最大寬度，防止溢位容器。

  • a { text-decoration: none; color: inherit; }: 去除連結預設下劃線，並繼承父元素顏色。

  • ul, ol { list-style: none; }: 去除列表預設樣式。

  • button, input, select, textarea { ... }: 重置表單元素樣式，去除預設樣式，並繼承父元素字型。

  • **`button

相關文章