CSS 知識點總結１

今天寫了兩個頁面,用到的知識點,總結一下

1. Flexbox 布局

• display: flex;：啟用 Flexbox 布局，用于創建靈活的容器。
• flex-direction: column;：將子元素垂直排列。
• justify-content：控制子元素在主軸上的對齊方式。
  • justify-content: space-between;：子元素在主軸兩端對齊，剩余空間均勻分布。
  • justify-content: center;：子元素在主軸居中。
• align-items：控制子元素在交叉軸上的對齊方式。
  • align-items: center;：子元素在交叉軸居中。
  • align-items: flex-end;：子元素在交叉軸末端對齊。
• gap: 10px;：設置子元素之間的間距。

2. Grid 布局

• display: grid;：啟用 Grid 布局，用于創建網格容器。
• grid-template-columns: repeat(2, 1fr);：定義兩列，每列寬度相等。
• gap: 30px;：設置網格項之間的間距。

3. 盒模型

• padding: 20px;：設置內邊距。
• margin: 20px;：設置外邊距。
• margin: 0 auto;：水平居中元素。
• border-radius: 10px;：設置圓角。
• border: 1px solid #ddd;：設置邊框。

4. 定位

• position: relative;：設置相對定位，為子元素的絕對定位提供參考。
• position: absolute;：設置絕對定位，脫離文檔流。
  • left: 12px;：距離左側 12px。
  • top: 50%;：距離頂部 50%。
  • transform: translateY(-50%);：精確垂直居中。

5. 過渡效果

• transition: box-shadow 0.3s ease;：設置 box-shadow 屬性的過渡效果。
• transition: border-color 0.3s ease;：設置 border-color 屬性的過渡效果。

6. 字體和顏色

• font-family: Arial, sans-serif;：設置字體。
• font-size: 16px;：設置字體大小。
• color: #333;：設置字體顏色。
• background-color: #fbfbfadd;：設置背景顏色（帶透明度）。

7. 響應式設計

• max-width: 800px;：限制容器的最大寬度，確保在不同屏幕尺寸下保持布局。
• width: 90%;：設置寬度為父容器的 90%。

8. 其他

• min-height: 100vh;：設置容器的最小高度為視口高度。
• cursor: pointer;：設置鼠標懸停時為手型，表示可點擊。
• outline: none;：移除聚焦時的默認邊框。

總結

• 布局：廣泛使用 Flexbox 和 Grid 布局，創建靈活的頁面結構。
• 定位：使用相對定位和絕對定位，精確控制元素的位置。
• 盒模型：通過 padding、margin 和 border 控制元素的間距和邊框。
• 響應式設計：通過 max-width 和百分比寬度，確保頁面在不同設備上表現良好。
• 過渡效果：為交互元素添加平滑的過渡效果，提升用戶體驗。