在前端開發中，CSS 是控制頁面樣式和布局的核心技術。本文總結了 CSS 布局中的關鍵概念和實用技巧，包括 overflow 屬性、背景圖片處理、精靈圖技術、display 屬性、浮動布局以及清除浮動的方法。

---

一、overflow 屬性詳解

overflow 屬性用于控制當元素內容超出其容器時的顯示方式。常見值包括：

• visible（默認）：內容溢出時可見。
• hidden：溢出部分隱藏。
• scroll：始終顯示滾動條。
• auto：瀏覽器智能判斷是否顯示滾動條。
• text-overflow: ellipsis+white-space: nowrap`：當內容溢出時，用省略號代替。

示例代碼：

.content {width: 100px;background-color: cornflowerblue;overflow: hidden; /* 隱藏溢出內容 */text-overflow: ellipsis; /* 溢出時顯示省略號 */white-space: nowrap; /* 文本不換行 */
}

應用場景：限制文本或內容顯示區域，避免頁面布局混亂。

---

二、背景圖片處理技巧

背景圖片是 CSS 中常用的裝飾手段，關鍵屬性包括：

1. background-image：設置背景圖片路徑。
2. background-repeat：控制圖片是否重復（如 no-repeat 禁止重復）。
3. background-size：調整圖片尺寸（如 cover 完全覆蓋容器）。
4. background-position：定位圖片位置（如 right bottom 右下角）。
5. background-attachment：控制背景是否固定（如 fixed 實現視差效果）。

示例：

.box {background-image: url(./bg2.jpg);background-repeat: no-repeat;background-size: cover;background-attachment: fixed; /* 背景固定，頁面滾動時不移動 */
}

---

三、精靈圖（CSS Sprites）技術

原理：將多張小圖合并為一張大圖，通過 background-position 定位顯示特定部分。
優勢：減少HTTP請求，提升加載速度。

關鍵點：

• 背景定位：通過 background-position 調整精靈圖中具體圖標的顯示位置。
• 尺寸控制：background-size 確保精靈圖適配容器。

示例代碼：

.box {width: 300px;height: 300px;background-image: url(./icons.jpg);background-size: 700% 700%;background-position: -500% -200%;
}

---

四、display 屬性與元素類型

HTML 元素按布局方式分為：

1. 塊元素

   • 默認獨占一行，寬高可設。
   • 示例：div、h1-h6、p 等。

2. 行內元素與行內塊元素

   • 行內元素（如 a、span）寬高不可設，但可通過 display: inline-block 轉換為行內塊元素。
   • 示例：img 默認是行內塊元素，可設置寬高。

3. 行內元素間隙問題

   • 原因：HTML 中行內元素換行會產生空白字符。
   • 解決方案：
     • 設置父元素 font-size: 0，子元素單獨設置字體大小。
     • 將行內元素寫成一行（不推薦，影響可讀性）。
     • 使用負外邊距或浮動布局消除間隙。

---

五、浮動布局與高度塌陷解決方案

浮動布局會脫離文檔流，導致父元素高度塌陷。
解決方案：

• 偽元素清除浮動：在父元素后添加偽元素 ::after，設置 content: ""、display: block 和 clear: both，觸發 BFC（塊級格式化上下文）以解決高度塌陷問題。

示例代碼：

.clearfix::after {content: "";display: block;clear: both;
}