根據上次跟大家初步的討論 CSS 的入門內容，今天也要教大家5個 CSS 你可以學習的方向與例子 :

1. 盒模型（Box Model）：
   以下是一個DIV元素的CSS樣式，其中包括內容、內邊距、邊框和外邊距：

   cssCopy code
   .box {
       width: 200px;
       height: 150px;
       padding: 20px;
       border: 2px solid #333;
       margin: 10px;
   }
   
   

2. 浮動（Floats）和清除（Clear）：
   使用浮動來實現左右浮動的圖片並添加清除以確保正確的佈局：

   cssCopy code
   .image-left {
       float: left;
       margin-right: 10px;
   }
   
   .image-right {
       float: right;
       margin-left: 10px;
   }
   
   .clear {
       clear: both;
   }
   
   

3. 定位（Positioning）：
   使用絕對定位將元素放在容器的左上角：

   cssCopy code
   .absolute-box {
       position: absolute;
       top: 0;
       left: 0;
   }
   
   

4. 彈性盒子（Flexbox）和網格佈局（Grid Layout）：
   使用Flexbox創建一個水平排列的彈性容器：

   cssCopy code
   .flex-container {
       display: flex;
       justify-content: space-between;
   }
   
   

   使用Grid Layout創建一個2x2網格：

   cssCopy code
   .grid-container {
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-template-rows: 1fr 1fr;
   }
   
   

5. CSS預處理器（Preprocessors）：
   使用Sass中的變數定義主題色：

   scssCopy code
   $primary-color: #007bff;
   $secondary-color: #ff6600;
   
   .button {
       background-color: $primary-color;
       color: white;
   }
   
   

   在這個示例中，我們使用了Sass的變數來管理主題色，以便在整個項目中重用。

這些例子涵蓋了CSS進階主題，包括盒模型、浮動和清除、定位、彈性盒子、網格佈局和CSS預處理器的應用。通過實際練習和進一步的學習，你可以深入瞭解這些主題，並應用它們在你的網頁項目中。