一、传统布局基础
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;
}
四、注意事项
- 浮动清除：必须清除浮动以避免布局塌陷。
- 定位层级：使用
z-index控制堆叠顺序，默认为0，可以为负整数。 - 浏览器兼容：传统布局在IE6/7中需要特殊处理。
- 性能考量：减少不必要的定位和浮动。
五、总结
传统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="品优购,网购商城,正品低价,手机,电脑">