一、傳統布局基礎

1. 文檔流布局

瀏覽器默認的文檔流布局方式遵循以下規則：

• 塊級元素（如<div>、<p>、<h1>）：
  • 獨占一行
  • 寬度默認100%
  • 可以設置寬高、內外邊距

div {width: 500px;height: 200px;margin: 10px 0;padding: 15px;
}

• 行內元素（如<span>、<a>、<strong>）：
  • 不獨占一行
  • 寬高由內容決定
  • 不能直接設置寬高

span {padding: 5px; /* 水平有效，垂直不影響布局 */margin: 5px;  /* 水平有效，垂直不影響布局 */
}

2. 浮動布局（Float）

浮動是最早的CSS布局方式之一：

.left-col {float: left;width: 200px;
}.right-col {float: right;width: 200px;
}.main-content {margin: 0 210px; /* 避免內容與浮動元素重疊 */
}/* 清除浮動 */
.clearfix::after {content: "";display: block;clear: both;
}

二、定位系統詳解

1. position屬性

相對定位（relative）

.box {position: relative;top: 20px;left: 30px;
}

特點：

• 相對于自身原始位置偏移
• 不影響其他元素位置1
• 原始文檔流空間保留
  

為青色盒子添加相對定位后，青色盒子文檔流位置仍然保留：

絕對定位（absolute）

.box {position: absolute;top: 0;right: 0;
}

特點：

• 相對于最近的非static定位的祖先元素
• 脫離文檔流
• 不占據原始空間
  
  為青色盒子添加絕對定位后，文檔流位置不保存：
  

固定定位（fixed）

.header {position: fixed;top: 0;width: 100%;
}

特點：

• 相對于瀏覽器窗口
• 不隨頁面滾動
• 脫離文檔流

為青色盒子添加固定定位后，始終固定于頁面某一位置

2. 定位實戰技巧

居中定位（利用margin負值）

.center-box {position: absolute;left: 50%;top: 50%;width: 300px;height: 200px;margin-left: -150px; /* 寬度的一半 */margin-top: -100px;  /* 高度的一半 */
}

底部固定工具欄

.toolbar {position: fixed;bottom: 0;left: 0;width: 100%;height: 50px;
}

三、傳統布局技巧

1. 兩欄布局

<div class="container"><div class="sidebar"></div><div class="content"></div>
</div>

.sidebar {float: left;width: 200px;
}.content {margin-left: 210px;
}

2. 三欄布局

<div class="container"><div class="left"></div><div class="middle"></div><div class="right"></div>
</div>

.left {float: left;width: 150px;
}.right {float: right;width: 150px;
}.middle {margin: 0 160px;
}

3. 等高列實現

.container {overflow: hidden; /* 觸發BFC */
}.col {float: left;width: 33.33%;padding-bottom: 9999px;margin-bottom: -9999px;
}

四、注意事項

1. 浮動清除：必須清除浮動以避免布局塌陷。
2. 定位層級：使用z-index控制堆疊順序，默認為0，可以為負整數。
3. 瀏覽器兼容：傳統布局在IE6/7中需要特殊處理。
4. 性能考量：減少不必要的定位和浮動。

五、總結

傳統CSS布局主要依賴：

• 文檔流
• 浮動（float）
• 定位（position）

雖然現代布局技術（Flexbox/Grid）更加強大，但理解這些傳統布局方式仍然是CSS基礎的重要組成部分，特別是在維護老項目時尤為重要。

TDK三大標簽SEO優化

title

1. <title> 標題標簽（Title）

作用：

• 告訴搜索引擎和用戶當前頁面的核心內容。
• 顯示在瀏覽器標簽頁和搜索引擎結果頁（SERP）中。

優化建議：
? 長度控制：30-60個字符（過長會被截斷）。
? 包含核心關鍵詞（如“品優購”）。
? 避免堆砌關鍵詞（如“手機 智能手機 5G手機”）。
? 每個頁面標題唯一，不要全站相同。

示例：

<title>品優購 - 正品低價、品質保障、閃電配送的網購商城</title>

2. <meta name="description"> 描述標簽（Description）

作用：

• 概括網頁內容，影響搜索引擎是否展示你的網頁。
• 顯示在SERP（搜索結果頁）中，影響用戶點擊率（CTR）。

優化建議：
長度控制：70-160個字符（過長會被截斷）。
? 自然包含關鍵詞，但不要堆砌。
? 吸引用戶點擊，突出優勢（如“正品低價”“全場包郵”）。
? 每個頁面描述唯一，避免重復。

示例：

<meta name="description" content="品優購是專業的正品網購商城，提供手機、電腦、家電等優質商品，全場低價，正品保障，閃電配送，購物無憂！">

3. <meta name="keywords"> 關鍵詞標簽（Keywords）

作用：

• 早期SEO重要，但現在Google、百度等搜索引擎已降低其權重。
• 部分搜索引擎可能仍會參考，建議合理填寫。

優化建議：
? 關鍵詞3-5個，用英文逗號分隔。
? 避免堆砌無關詞（如“手機,電腦,衣服,鞋子”）。
? 與頁面內容相關，不要欺騙搜索引擎。

示例：

<meta name="keywords" content="品優購,網購商城,正品低價,手機,電腦">