一、传统布局基础

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="品优购,网购商城,正品低价,手机,电脑">