DIV与CSS基础详解

发表于 更新于 分类于 ， ， 阅读次数： 本文字数： 8.5k 阅读时长 ≈ 28 分钟

1. DIV和CSS样式

详细解释：

  • DIV 是HTML中的一个块级元素，用于将文档分割为独立的区块。它本身没有特定的语义，主要作为容器使用，通过CSS来定义其外观和布局。
  • CSS（层叠样式表）是一种描述HTML或XML文档外观和格式的样式表语言。CSS的核心理念是将内容与表现分离，使网页结构更清晰、更易于维护。

为什么使用DIV+CSS：

  • 与传统的表格布局相比，DIV+CSS布局更加灵活、代码更简洁
  • 提高网页加载速度（减少冗余HTML标签）
  • 更好的SEO优化（搜索引擎更容易抓取内容）
  • 便于后期维护和修改

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>
<head>
    <title>DIV+CSS示例</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            border: 1px solid #ccc;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .content {
            padding: 20px;
            display: flex;
        }
        .sidebar {
            width: 25%;
            background-color: #f0f0f0;
            padding: 15px;
        }
        .main {
            width: 75%;
            padding: 15px;
        }
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>我的网站</h1>
        </div>
        <div class="content">
            <div class="sidebar">
                <h2>导航栏</h2>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">服务</a></li>
                </ul>
            </div>
            <div class="main">
                <h2>主要内容区域</h2>
                <p>这里是网站的主要内容...</p>
            </div>
        </div>
        <div class="footer">
            <p>© 2023 我的网站. 保留所有权利.</p>
        </div>
    </div>
</body>
</html>

2. 样式表类型

2.1 嵌入样式表

详细解释：

  • 在HTML文档的<head>部分使用<style>标签定义CSS样式
  • 适用于单页应用或小型网站
  • 优点：样式与内容在同一文件，无需额外HTTP请求
  • 缺点：无法跨页面共享样式，不利于大型项目维护

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>嵌入样式表示例</title>
    <style>
        /* 全局样式 */
        body {
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
        }
        
        /* 类选择器 */
        .highlight {
            background-color: #ffffcc;
            padding: 5px;
            border-radius: 3px;
        }
        
        /* ID选择器 */
        #main-title {
            color: #0066cc;
            text-align: center;
            margin-bottom: 20px;
        }
        
        /* 伪类选择器 */
        a:hover {
            text-decoration: underline;
            color: #ff6600;
        }
    </style>
</head>
<body>
    <h1 id="main-title">嵌入样式表示例</h1>
    <p class="highlight">这是一个使用嵌入样式表的示例。</p>
    <a href="#">悬停查看效果</a>
</body>
</html>

2.2 外部样式表

详细解释：

  • 将CSS代码保存在单独的.css文件中，通过<link>标签或@import语句引入
  • 优点：样式与内容分离，便于维护；样式可跨页面共享；浏览器可缓存CSS文件
  • 最佳实践：将CSS文件放在<head>中，避免”无样式内容闪烁”(FOUC)

示例：

  1. 创建styles.css文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 布局样式 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 导航栏样式 */
.navbar {
    background: #222;
    color: white;
    padding: 10px 0;
}

.navbar ul {
    display: flex;
    list-style: none;
}

.navbar li {
    margin-right: 20px;
}

.navbar a {
    color: white;
    text-decoration: none;
}

/* 卡片样式 */
.card {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
  1. 在HTML中引入：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部样式表示例</title>
    <!-- 推荐方式：使用link标签 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 不推荐但可行的方式：使用@import -->
    <!-- <style>
        @import url("styles.css");
    </style> -->
</head>
<body>
    <div class="container">
        <nav class="navbar">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
        
        <div class="card">
            <h2>欢迎访问</h2>
            <p>这是一个使用外部样式表的示例。</p>
        </div>
    </div>
</body>
</html>

2.3 内联样式

详细解释：

  • 直接在HTML元素的style属性中定义CSS样式
  • 优先级最高，但最不推荐使用
  • 仅适用于特殊场景（如动态生成的样式、邮件HTML等）
  • 严重违反内容与表现分离原则

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内联样式示例</title>
</head>
<body>
    <div style="width: 300px; height: 200px; background-color: #4CAF50; 
                border: 2px solid #333; border-radius: 5px; 
                padding: 15px; color: white; text-align: center;">
        <h3 style="margin-top: 0;">内联样式示例</h3>
        <p style="line-height: 1.5;">这是直接在元素中定义的样式。<br>
        优先级高于外部和嵌入样式表。</p>
        <button style="background: #fff; color: #4CAF50; border: none; 
                      padding: 8px 15px; border-radius: 3px; 
                      cursor: pointer;">点击我</button>
    </div>
    
    <p>注意：内联样式会使HTML代码变得混乱，难以维护，<span style="color: red; font-weight: bold;">不建议在实际项目中使用</span>。</p>
</body>
</html>

3. 注释

详细解释：

  • CSS注释使用/* 注释内容 */语法
  • 注释可以跨多行
  • 用于解释代码、临时禁用样式、团队协作等
  • 不会被浏览器解析和渲染

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* 
    全局样式重置
    作者：张三
    日期：2023-10-15
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 主标题样式 - 重要：不要修改此样式 */
#main-title {
    color: #0066cc;
    /* font-size: 24px; 临时禁用字体大小设置 */
    text-align: center;
    margin-bottom: 20px;
}

/* 
    导航栏样式
    包含水平导航和响应式设计
*/
.navbar {
    background: #222;
    color: white;
    padding: 10px 0;
    /* 以下样式用于响应式设计
    @media (max-width: 768px) {
        display: none;
    }
    */
}

4. 样式选择器

4.1 元素选择器

详细解释：

  • 选择所有指定类型的HTML元素
  • 语法：元素名 { 属性: 值; }
  • 适用于需要统一设置某类元素样式的场景

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 选择所有段落元素 */
p {
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

/* 选择所有h1-h6标题元素 */
h1, h2, h3, h4, h5, h6 {
    font-family: "Microsoft YaHei", sans-serif;
    color: #0066cc;
    margin-bottom: 15px;
}

/* 选择所有无序列表和有序列表 */
ul, ol {
    margin-left: 20px;
    list-style-type: disc;
}

4.2 ID选择器

详细解释：

  • 选择具有特定id属性的元素
  • 语法：#id名 { 属性: 值; }
  • 优先级高于类选择器
  • 每个id在页面中应唯一

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 选择id为"main-header"的元素 */
#main-header {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

/* 选择id为"contact-form"的表单元素 */
#contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

4.3 类选择器

详细解释：

  • 选择具有特定class属性的元素
  • 语法：.类名 { 属性: 值; }
  • 可以应用于多个元素
  • 优先级低于ID选择器，高于元素选择器

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 选择所有class为"btn"的元素 */
.btn {
    display: inline-block;
    padding: 8px 15px;
    background: #0066cc;
    color: white;
    text-decoration: none;
    border-radius: 3px;
}

/* 选择class为"btn-primary"的元素 */
.btn-primary {
    background: #0066cc;
}

/* 选择class为"btn-danger"的元素 */
.btn-danger {
    background: #cc0000;
}

/* 选择同时具有"btn"和"large"类的元素 */
.btn.large {
    padding: 12px 25px;
    font-size: 18px;
}

4.4 子选择器

详细解释：

  • 选择作为特定父元素直接子元素的元素
  • 语法：父元素 > 子元素 { 属性: 值; }
  • 与后代选择器不同，仅选择直接子元素

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 选择div的直接子元素p（不包括嵌套的p） */
div > p {
    color: blue;
}

/* 选择导航栏中直接的li元素（不包括嵌套的ul中的li） */
.navbar > ul > li {
    margin-right: 15px;
}

/* 选择表格中直接的tr元素 */
table > tr {
    background-color: #f0f0f0;
}

4.5 后代选择器

详细解释：

  • 选择作为特定祖先元素后代的所有元素（无论嵌套多深）
  • 语法：祖先元素 后代元素 { 属性: 值; }
  • 与子选择器不同，会匹配所有层级的后代

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 选择div内所有p元素，无论嵌套多深 */
div p {
    line-height: 1.6;
}

/* 选择导航栏内所有a元素 */
.navbar a {
    color: white;
    text-decoration: none;
}

/* 选择文章内所有列表项 */
.article ul li {
    margin-bottom: 8px;
}

4.6 属性选择器

详细解释：

  • 选择具有特定属性或属性值的元素
  • 语法：元素[属性] 或 元素[属性="值"]
  • 多种匹配方式：包含、开头、结尾等

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 选择所有具有title属性的a元素 */
a[title] {
    border-bottom: 1px dashed #0066cc;
}

/* 选择所有href属性以"https"开头的a元素 */
a[href^="https"] {
    color: green;
}

/* 选择所有href属性包含"example.com"的a元素 */
a[href*="example.com"] {
    font-weight: bold;
}

/* 选择所有href属性以".pdf"结尾的a元素 */
a[href$=".pdf"] {
    background: url("pdf-icon.png") no-repeat left center;
    padding-left: 20px;
}

/* 选择所有class属性包含"btn"的元素 */
[class*="btn"] {
    cursor: pointer;
}

4.7 通配符选择器

详细解释：

  • 选择文档中的所有元素
  • 语法：* { 属性: 值; }
  • 通常用于全局重置样式
  • 优先级最低

示例：

1
2
3
4
5
6
7
8
9
10
11
/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 为所有元素添加过渡效果 */
* {
    transition: all 0.3s ease;
}

4.8 群组选择器

详细解释：

  • 将多个选择器组合在一起，应用相同的样式
  • 语法：选择器1, 选择器2, 选择器3 { 属性: 值; }
  • 减少代码重复

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 为所有标题设置相同字体 */
h1, h2, h3, h4, h5, h6 {
    font-family: "Microsoft YaHei", sans-serif;
}

/* 为所有表单元素设置相同边框 */
input, select, textarea {
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 3px;
}

/* 为所有按钮和链接设置悬停效果 */
.btn, a {
    transition: all 0.2s ease;
}

.btn:hover, a:hover {
    opacity: 0.9;
}

5. 背景

5.1 背景属性详解

background-color

详细解释：

  • 设置元素的背景颜色
  • 可以使用颜色名称、十六进制值、RGB值、RGBA值等
  • 透明背景：transparent 或 rgba(0,0,0,0)

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 使用颜色名称 */
div {
    background-color: lightblue;
}

/* 使用十六进制值 */
.header {
    background-color: #333333;
}

/* 使用RGB值 */
.banner {
    background-color: rgb(255, 0, 0);
}

/* 使用RGBA值（带透明度） */
.modal {
    background-color: rgba(0, 0, 0, 0.5);
}

background-position

详细解释：

  • 设置背景图像的位置
  • 可以使用关键字（如top、center、bottom、left、right）
  • 也可以使用百分比或像素值
  • 语法：background-position: [水平位置] [垂直位置];

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 使用关键字 */
.bg1 {
    background-image: url("pattern.png");
    background-position: top left;
}

/* 使用百分比 */
.bg2 {
    background-image: url("logo.png");
    background-position: 50% 50%; /* 水平和垂直都居中 */
}

/* 使用像素值 */
.bg3 {
    background-image: url("icon.png");
    background-position: 10px 20px;
}

/* 混合使用 */
.bg4 {
    background-image: url("watermark.png");
    background-position: right 10px;
}

background-size

详细解释：

  • 设置背景图像的尺寸
  • 常用值：
    • auto：默认值，保持原始尺寸
    • cover：等比缩放图像，使图像完全覆盖背景区域
    • contain：等比缩放图像，使图像完整显示在背景区域
    • 具体尺寸：如100px 200px，或50% 100%

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 保持原始尺寸 */
.original {
    background-size: auto;
}

/* 完全覆盖背景区域 */
.cover {
    background-image: url("bg.jpg");
    background-size: cover;
}

/* 完整显示在背景区域 */
.contain {
    background-image: url("bg.jpg");
    background-size: contain;
}

/* 具体尺寸 */
.sized {
    background-image: url("icon.png");
    background-size: 50px 50px;
}

/* 百分比尺寸 */
.percent {
    background-image: url("pattern.png");
    background-size: 50% 100%;
}

background-repeat

详细解释：

  • 设置背景图像如何重复
  • 常用值：
    • repeat：默认值，水平和垂直方向都重复
    • repeat-x：仅水平方向重复
    • repeat-y：仅垂直方向重复
    • no-repeat：不重复
    • space：均匀分布，不裁剪图像
    • round：缩放图像以适应区域

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 默认：水平和垂直重复 */
.repeat {
    background-image: url("pattern.png");
    background-repeat: repeat;
}

/* 仅水平重复 */
.repeat-x {
    background-image: url("border-top.png");
    background-repeat: repeat-x;
}

/* 仅垂直重复 */
.repeat-y {
    background-image: url("border-left.png");
    background-repeat: repeat-y;
}

/* 不重复 */
.no-repeat {
    background-image: url("logo.png");
    background-repeat: no-repeat;
}

/* 均匀分布 */
.space {
    background-image: url("icon.png");
    background-repeat: space;
}

/* 缩放以适应 */
.round {
    background-image: url("icon.png");
    background-repeat: round;
}

background-origin

详细解释：

  • 设置背景图像的定位区域
  • 常用值：
    • border-box：背景从边框区域开始
    • padding-box：背景从内边距区域开始（默认）
    • content-box：背景从内容区域开始

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 背景从边框区域开始 */
.origin-border {
    border: 10px solid rgba(0,0,0,0.2);
    padding: 20px;
    background-image: url("bg.png");
    background-origin: border-box;
}

/* 背景从内边距区域开始（默认） */
.origin-padding {
    border: 10px solid rgba(0,0,0,0.2);
    padding: 20px;
    background-image: url("bg.png");
    background-origin: padding-box;
}

/* 背景从内容区域开始 */
.origin-content {
    border: 10px solid rgba(0,0,0,0.2);
    padding: 20px;
    background-image: url("bg.png");
    background-origin: content-box;
}

background-clip

详细解释：

  • 设置背景的绘制区域
  • 常用值：
    • border-box：背景延伸至边框外沿（默认）
    • padding-box：背景延伸至内边距外沿
    • content-box：背景仅在内容区域显示

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 背景延伸至边框外沿（默认） */
.clip-border {
    border: 10px solid rgba(0,0,0,0.2);
    padding: 20px;
    background: linear-gradient(to right, #0066cc, #cc0000);
    background-clip: border-box;
}

/* 背景延伸至内边距外沿 */
.clip-padding {
    border: 10px solid rgba(0,0,0,0.2);
    padding: 20px;
    background: linear-gradient(to right, #0066cc, #cc0000);
    background-clip: padding-box;
}

/* 背景仅在内容区域显示 */
.clip-content {
    border: 10px solid rgba(0,0,0,0.2);
    padding: 20px;
    background: linear-gradient(to right, #0066cc, #cc0000);
    background-clip: content-box;
}

background-attachment

详细解释：

  • 设置背景图像是否固定或随内容滚动
  • 常用值：
    • scroll：默认值，背景随内容滚动
    • fixed：背景固定，不随内容滚动
    • local：背景随元素内容滚动

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 背景随内容滚动（默认） */
.attachment-scroll {
    background-image: url("bg.jpg");
    background-attachment: scroll;
}

/* 背景固定，不随内容滚动 */
.attachment-fixed {
    background-image: url("bg.jpg");
    background-attachment: fixed;
    height: 100vh; /* 通常与视口高度一起使用 */
}

/* 背景随元素内容滚动 */
.attachment-local {
    height: 300px;
    overflow: auto;
    background-image: url("bg.jpg");
    background-attachment: local;
}

background-image

详细解释：

  • 设置元素的背景图像
  • 可以使用URL指定图像路径
  • 可以设置多个背景图像（逗号分隔）
  • 可以使用渐变作为背景

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 单个背景图像 */
.single-bg {
    background-image: url("bg.jpg");
}

/* 多个背景图像 */
.multiple-bg {
    background-image: url("pattern.png"), url("overlay.png");
    background-position: top left, bottom right;
    background-repeat: repeat, no-repeat;
}

/* 线性渐变背景 */
.linear-gradient {
    background-image: linear-gradient(to right, #0066cc, #cc0000);
}

/* 径向渐变背景 */
.radial-gradient {
    background-image: radial-gradient(circle, #0066cc, #cc0000);
}

5.2 背景简写

详细解释：

  • 使用background属性可以一次性设置多个背景属性
  • 顺序不严格，但建议按标准顺序书写
  • 标准顺序：background: [color] [image] [repeat] [attachment] [position]/[size];

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 基本简写 */
.simple {
    background: #f0f0f0 url("bg.jpg") no-repeat fixed center;
}

/* 完整简写 */
.full {
    background: #f0f0f0 url("bg.jpg") no-repeat fixed center center / cover;
}

/* 多个背景的简写 */
.multiple {
    background: 
        url("pattern.png") repeat,
        url("overlay.png") no-repeat 100% 100%,
        linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0)) fixed;
}

/* 只设置颜色 */
.color-only {
    background: #333;
}

/* 只设置图像 */
.image-only {
    background: url("bg.jpg") no-repeat center;
}

6. 边框

6.1 边框属性详解

border-color

详细解释：

  • 设置边框的颜色
  • 可以为四条边设置不同颜色
  • 语法：border-color: [上] [右] [下] [左];

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 所有边框相同颜色 */
.all-same {
    border-color: #0066cc;
}

/* 上下相同，左右相同 */
.top-bottom {
    border-color: #0066cc #cc0000;
}

/* 四条边各不相同 */
.four-different {
    border-color: #0066cc #cc0000 #00cc66 #6600cc;
}

/* 分别设置每条边 */
.specific {
    border-top-color: #0066cc;
    border-right-color: #cc0000;
    border-bottom-color: #00cc66;
    border-left-color: #6600cc;
}

border-width

详细解释：

  • 设置边框的宽度
  • 可以为四条边设置不同宽度
  • 语法：border-width: [上] [右] [下] [左];
  • 常用单位：px、em、rem等

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 所有边框相同宽度 */
.all-same {
    border-width: 2px;
}

/* 上下相同，左右相同 */
.top-bottom {
    border-width: 1px 3px;
}

/* 四条边各不相同 */
.four-different {
    border-width: 1px 2px 3px 4px;
}

/* 分别设置每条边 */
.specific {
    border-top-width: 1px;
    border-right-width: 2px;
    border-bottom-width: 3px;
    border-left-width: 4px;
}

border-style

详细解释：

  • 设置边框的样式
  • 可以为四条边设置不同样式
  • 语法：border-style: [上] [右] [下] [左];

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 所有边框相同样式 */
.all-same {
    border-style: solid;
}

/* 上下相同，左右相同 */
.top-bottom {
    border-style: dashed dotted;
}

/* 四条边各不相同 */
.four-different {
    border-style: solid dashed dotted double;
}

/* 分别设置每条边 */
.specific {
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: double;
}

单独边框属性

详细解释：

  • 可以单独设置某条边的边框
  • 包括：border-top、border-right、border-bottom、border-left
  • 每个属性都可以设置宽度、样式和颜色

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 设置上边框 */
.border-top {
    border-top: 2px solid #0066cc;
}

/* 设置右边框 */
.border-right {
    border-right: 1px dashed #cc0000;
}

/* 设置下边框 */
.border-bottom {
    border-bottom: 3px double #00cc66;
}

/* 设置左边框 */
.border-left {
    border-left: 4px groove #6600cc;
}

/* 混合使用 */
.mixed {
    border-top: 1px solid #000;
    border-right: none;
    border-bottom: 2px dashed #333;
    border-left: 1px dotted #666;
}

6.2 边框简写

详细解释：

  • 使用border属性可以一次性设置边框的宽度、样式和颜色
  • 语法：border: [宽度] [样式] [颜色];
  • 可以针对特定边使用：border-top、border-right等

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 所有边框相同 */
.all {
    border: 1px solid #000;
}

/* 设置上边框 */
.top {
    border-top: 2px solid #0066cc;
}

/* 设置右边框 */
.right {
    border-right: 1px dashed #cc0000;
}

/* 设置下边框 */
.bottom {
    border-bottom: 3px double #00cc66;
}

/* 设置左边框 */
.left {
    border-left: 4px groove #6600cc;
}

/* 混合使用 */
.mixed {
    border: 1px solid #ddd;
    border-top: 2px solid #0066cc;
    border-right: none;
}

7. 文字属性

7.1 文字属性详解

color

详细解释：

  • 设置文本颜色
  • 可以使用颜色名称、十六进制值、RGB值、RGBA值等

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 颜色名称 */
.name {
    color: red;
}

/* 十六进制值 */
.hex {
    color: #0066cc;
}

/* RGB值 */
.rgb {
    color: rgb(0, 102, 204);
}

/* RGBA值（带透明度） */
.rgba {
    color: rgba(0, 102, 204, 0.8);
}

/* 系统颜色 */
.system {
    color: windowtext; /* 使用系统文本颜色 */
}

font-size

详细解释：

  • 设置文本的大小
  • 常用单位：px、em、rem、%、pt等
  • 相对单位（em、rem、%）会根据父元素或根元素的字体大小进行缩放

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 像素单位（固定大小） */
.px {
    font-size: 16px;
}

/* em单位（相对于父元素） */
.em {
    font-size: 1.2em; /* 1.2 × 父元素字体大小 */
}

/* rem单位（相对于根元素） */
.rem {
    font-size: 1.2rem; /* 1.2 × <html>元素字体大小 */
}

/* 百分比（相对于父元素） */
.percent {
    font-size: 120%; /* 120% × 父元素字体大小 */
}

/* 绝对大小关键字 */
.keywords {
    font-size: large; /* 或 x-small, small, medium, large, x-large, xx-large */
}

font-weight

详细解释：

  • 设置文本的粗细
  • 常用值：normal（400）、bold（700）、bolder、lighter或100-900的数字值

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 关键字 */
.keywords {
    font-weight: normal; /* 正常 */
    /* 或 */
    font-weight: bold; /* 加粗 */
}

/* 数字值 */
.numbers {
    font-weight: 400; /* 正常 */
    /* 或 */
    font-weight: 700; /* 加粗 */
    /* 或 */
    font-weight: 600; /* 半粗体 */
}

/* 相对值 */
.relative {
    font-weight: bolder; /* 比父元素更粗 */
    /* 或 */
    font-weight: lighter; /* 比父元素更细 */
}

font-family

详细解释：

  • 设置文本的字体
  • 指定多个字体作为备选，浏览器会使用第一个可用的字体
  • 通常包括一个具体的字体和一个通用字体族

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 单个字体 */
.single {
    font-family: "Microsoft YaHei";
}

/* 多个字体（带备选） */
.multiple {
    font-family: "Microsoft YaHei", "Heiti SC", "SimSun", sans-serif;
}

/* 通用字体族 */
.generic {
    font-family: serif; /* 衬线字体 */
    /* 或 */
    font-family: sans-serif; /* 无衬线字体 */
    /* 或 */
    font-family: monospace; /* 等宽字体 */
    /* 或 */
    font-family: cursive; /* 手写体 */
    /* 或 */
    font-family: fantasy; /* 装饰字体 */
}

font-variant

详细解释：

  • 设置文本的变体
  • 常用值：normal、small-caps（小型大写字母）

示例：

1
2
3
4
5
6
7
8
9
10
11
/* 正常文本 */
.normal {
    font-variant: normal;
}

/* 小型大写字母 */
.small-caps {
    font-variant: small-caps;
    /* 或 */
    font-variant: small-caps;
}

8. 文本属性

8.1 文本属性详解

text-align

详细解释：

  • 设置文本的水平对齐方式
  • 常用值：left、right、center、justify（两端对齐）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 左对齐（默认） */
.left {
    text-align: left;
}

/* 右对齐 */
.right {
    text-align: right;
}

/* 居中对齐 */
.center {
    text-align: center;
}

/* 两端对齐 */
.justify {
    text-align: justify;
}

line-height

详细解释：

  • 设置行高（行与行之间的垂直间距）
  • 可以使用无单位数值（相对于字体大小的倍数）、长度值或百分比
  • 常用于垂直居中文本

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 无单位数值（推荐） */
.unitless {
    line-height: 1.5; /* 1.5 × 字体大小 */
}

/* 长度值 */
.length {
    line-height: 24px;
}

/* 百分比 */
.percent {
    line-height: 150%; /* 150% × 字体大小 */
}

/* 垂直居中（单行文本） */
.vertical-center {
    height: 50px;
    line-height: 50px; /* 与容器高度相同 */
}

text-indent

详细解释：

  • 设置首行缩进
  • 常用单位：px、em、rem、%等

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 像素单位 */
.px {
    text-indent: 20px;
}

/* em单位 */
.em {
    text-indent: 2em;
}

/* 百分比（相对于容器宽度） */
.percent {
    text-indent: 5%;
}

/* 负值（悬挂缩进） */
.hanging {
    text-indent: -20px;
    padding-left: 20px;
}

text-decoration

详细解释：

  • 设置文本的装饰线
  • 常用值：none、underline、overline、line-through、blink
  • 可组合使用

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/* 无装饰线（默认） */
.none {
    text-decoration: none;
}

/* 下划线 */
.underline {
    text-decoration: underline;
}

/* 上划线 */
.overline {
    text-decoration: overline;
}

/* 中划线 */
.line-through {
    text-decoration: line-through;
}

/* 组合使用 */
.combined {
    text-decoration: underline overline;
}

/* 指定颜色和样式 */
.specific {
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-style: wavy;
}

letter-spacing

详细解释：

  • 设置字间距（字符之间的间距）
  • 可以使用正值（增加间距）或负值（减少间距）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 增加字间距 */
.spaced {
    letter-spacing: 2px;
}

/* 减少字间距 */
.tight {
    letter-spacing: -1px;
}

/* 相对值 */
.relative {
    letter-spacing: 0.1em;
}

9. 列表

9.1 列表属性详解

list-style-type

详细解释：

  • 设置列表项标记的类型
  • 适用于有序列表(ol)和无序列表(ul)

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* 无序列表 */
ul.disc {
    list-style-type: disc; /* 默认 */
}

ul.circle {
    list-style-type: circle;
}

ul.square {
    list-style-type: square;
}

ul.none {
    list-style-type: none; /* 无标记 */
}

/* 有序列表 */
ol.decimal {
    list-style-type: decimal; /* 默认 */
}

ol.decimal-leading-zero {
    list-style-type: decimal-leading-zero;
}

ol.lower-roman {
    list-style-type: lower-roman;
}

ol.upper-roman {
    list-style-type: upper-roman;
}

ol.lower-alpha {
    list-style-type: lower-alpha;
}

ol.upper-alpha {
    list-style-type: upper-alpha;
}

list-style-position

详细解释：

  • 设置列表项标记的位置
  • 常用值：inside、outside（默认）

示例：

1
2
3
4
5
6
7
8
9
/* 标记在文本内部 */
.inside {
    list-style-position: inside;
}

/* 标记在文本外部（默认） */
.outside {
    list-style-position: outside;
}

list-style-image

详细解释：

  • 使用图像代替列表项标记
  • 可以使用URL指定图像路径

示例：

1
2
3
4
5
6
7
8
9
/* 使用自定义图像作为列表标记 */
.custom-marker {
    list-style-image: url("custom-bullet.png");
}

/* 无图像（回退到list-style-type） */
.no-image {
    list-style-image: none;
}

list-style 简写

详细解释：

  • 使用list-style属性可以一次性设置列表的所有样式
  • 顺序：list-style: [type] [position] [image];

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 基本简写 */
.simple {
    list-style: square inside;
}

/* 完整简写 */
.full {
    list-style: square inside url("bullet.png");
}

/* 仅设置类型 */
.type-only {
    list-style: circle;
}

/* 仅设置位置 */
.position-only {
    list-style: inside;
}

/* 仅设置图像 */
.image-only {
    list-style: url("bullet.png");
}

10. 超链接

10.1 超链接状态详解

详细解释：

  • 超链接有四种状态，可以通过伪类选择器进行样式设置
  • 顺序建议：a:link → a:visited → a:hover → a:active（LVHA顺序）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* 未访问的链接 */
a:link {
    color: #0066cc;
    text-decoration: none;
}

/* 已访问的链接 */
a:visited {
    color: #6600cc;
}

/* 鼠标悬停 */
a:hover {
    color: #cc0000;
    text-decoration: underline;
    transition: all 0.2s ease;
}

/* 激活（点击）状态 */
a:active {
    color: #ff6600;
}

/* 为所有状态设置共同样式 */
a {
    transition: all 0.2s ease;
    font-weight: bold;
}

/* 为特定链接设置样式 */
.nav-link {
    padding: 5px 10px;
    border-radius: 3px;
}

.nav-link:hover {
    background-color: #f0f0f0;
}

11. 盒子模型

详细解释：

  • CSS盒子模型是网页布局的基础
  • 每个HTML元素都被视为一个矩形盒子
  • 盒子由四个部分组成：
    1. 内容区域（content）：显示实际内容的区域
    2. 内边距（padding）：内容区域与边框之间的空间
    3. 边框（border）：围绕内边距和内容的边框
    4. 外边距（margin）：边框外的空间，用于与其他元素的间隔

可视化表示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
+-------------------------------------------+
|               MARGIN                      |
|   +-----------------------------------+   |
|   |             BORDER                |   |
|   |   +---------------------------+   |   |
|   |   |          PADDING          |   |   |
|   |   |   +-------------------+   |   |   |
|   |   |   |                   |   |   |   |
|   |   |   |      CONTENT      |   |   |   |
|   |   |   |                   |   |   |   |
|   |   |   +-------------------+   |   |   |
|   |   |                           |   |   |
|   |   +---------------------------+   |   |
|   |                                   |   |
|   +-----------------------------------+   |
|                                           |
+-------------------------------------------+

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
    /* 内容区域 */
    width: 200px;
    height: 150px;
    
    /* 内边距 */
    padding: 20px;
    
    /* 边框 */
    border: 2px solid #333;
    
    /* 外边距 */
    margin: 10px;
    
    /* 背景（显示在padding和content区域） */
    background-color: #f0f0f0;
}

注意： 默认情况下，元素的总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

12. margin与padding

12.1 padding（内边距）

详细解释：

  • 内边距是内容区域与边框之间的空间
  • 增加内边距会扩大元素的总尺寸
  • 语法：padding: [上] [右] [下] [左];
  • 可以单独设置：padding-top、padding-right、padding-bottom、padding-left

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 所有方向相同内边距 */
.all {
    padding: 10px;
}

/* 上下相同，左右相同 */
.vertical-horizontal {
    padding: 15px 20px;
}

/* 四个方向各不相同 */
.four-different {
    padding: 10px 15px 20px 25px;
}

/* 单独设置 */
.specific {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
}

12.2 margin（外边距）

详细解释：

  • 外边距是边框外的空间，用于与其他元素的间隔
  • 外边距不会影响元素自身尺寸，但会影响与其他元素的距离
  • 语法：margin: [上] [右] [下] [左];
  • 可以单独设置：margin-top、margin-right、margin-bottom、margin-left
  • 外边距合并：当两个垂直方向的外边距相邻时，它们会合并为一个外边距，取两者中的较大值

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* 所有方向相同外边距 */
.all {
    margin: 10px;
}

/* 上下相同，左右相同 */
.vertical-horizontal {
    margin: 15px 20px;
}

/* 四个方向各不相同 */
.four-different {
    margin: 10px 15px 20px 25px;
}

/* 单独设置 */
.specific {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 25px;
}

/* 居中元素 */
.center {
    margin: 0 auto; /* 水平居中 */
    width: 80%; /* 必须指定宽度 */
}

/* 外边距合并示例 */
.p1 {
    margin-bottom: 20px;
}

.p2 {
    margin-top: 30px;
}
/* p1和p2之间的实际外边距为30px（较大值），而不是50px */

13. float（浮动）

详细解释：

  • 浮动使元素脱离标准文档流，向左或向右移动
  • 其他内容会环绕浮动元素
  • 常用于创建多列布局
  • 浮动元素会影响其父元素的高度（可能导致父元素高度塌陷）

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* 向左浮动 */
.float-left {
    float: left;
    width: 30%;
}

/* 向右浮动 */
.float-right {
    float: right;
    width: 30%;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* 清除左侧浮动 */
.clear-left {
    clear: left;
}

/* 清除右侧浮动 */
.clear-right {
    clear: right;
}

/* 清除两侧浮动 */
.clear-both {
    clear: both;
}

浮动布局示例：

1
2
3
4
5
6
7
8
9
10
11
<div class="clearfix">
    <div style="float: left; width: 30%; background: #f0f0f0; padding: 10px;">
        左侧栏
    </div>
    <div style="float: right; width: 30%; background: #f0f0f0; padding: 10px;">
        右侧栏
    </div>
    <div style="margin: 0 35%; background: #e0e0e0; padding: 10px;">
        中间内容。由于左侧和右侧元素浮动，中间内容会自动调整宽度。
    </div>
</div>

14. 块级元素、行内元素

14.1 块级元素

详细解释：

  • 块级元素独占一行
  • 默认宽度为父元素的100%
  • 可以设置width、height、margin、padding
  • 常见块级元素：<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>, <article>等

示例：

1
2
3
<div style="background: #f0f0f0; margin: 5px; padding: 10px;">div - 块级元素</div>
<p style="background: #e0e0e0; margin: 5px; padding: 10px;">p - 块级元素</p>
<h1 style="background: #d0d0d0; margin: 5px; padding: 10px;">h1 - 块级元素</h1>

14.2 行内元素

详细解释：

  • 行内元素不独占一行，与其他行内元素在同一行显示
  • 宽度由内容决定
  • 无法直接设置width、height
  • 水平方向的margin和padding有效，垂直方向无效
  • 常见行内元素：<a>, <span>, <img>, <strong>, <em>, <b>, <i>, <u>, <br>, <input>, <label>等

示例：

1
2
3
<span style="background: #ffcccc;">span - 行内元素</span>
<a href="#" style="background: #ccffcc;">a - 行内元素</a>
<strong style="background: #ccccff;">strong - 行内元素</strong>

14.3 元素类型转换

详细解释：

  • 使用display属性可以转换元素类型
  • 常用值：
    • block：块级元素
    • inline：行内元素
    • inline-block：行内块元素（像行内元素一样排列，但可以设置宽高）
    • none：不显示元素

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 转换为块级元素 */
.inline-to-block {
    display: block;
}

/* 转换为行内元素 */
.block-to-inline {
    display: inline;
}

/* 转换为行内块元素 */
.to-inline-block {
    display: inline-block;
    width: 100px;
    height: 50px;
}

/* 隐藏元素 */
.hidden {
    display: none;
}

15. 溢出

详细解释：

  • overflow属性控制当内容溢出元素框时的行为
  • 常用值：
    • visible：默认值，内容溢出时正常显示
    • hidden：内容溢出时被裁剪，不可见
    • scroll：内容溢出时显示滚动条（无论是否溢出）
    • auto：内容溢出时自动显示滚动条
    • clip：裁剪内容，不提供滚动机制

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 默认：内容溢出时正常显示 */
.visible {
    overflow: visible;
}

/* 内容溢出时被裁剪 */
.hidden {
    overflow: hidden;
}

/* 始终显示滚动条 */
.scroll {
    overflow: scroll;
}

/* 溢出时自动显示滚动条 */
.auto {
    overflow: auto;
}

/* 水平溢出隐藏，垂直溢出自动滚动 */
.x-hidden-y-auto {
    overflow-x: hidden;
    overflow-y: auto;
}

16. 定位

16.1 定位类型详解

static（静态定位）

详细解释：

  • 默认定位方式
  • 元素在正常文档流中
  • 忽略top、bottom、left、right和z-index属性

示例：

1
2
3
4
.static {
    position: static;
    /* top、bottom等属性无效 */
}

relative（相对定位）

详细解释：

  • 相对于元素在正常文档流中的位置进行定位
  • 不脱离文档流，其他元素仍按正常流布局
  • 可以使用top、bottom、left、right调整位置

示例：

1
2
3
4
5
.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

absolute（绝对定位）

详细解释：

  • 相对于最近的已定位祖先元素（position不是static）进行定位
  • 脱离文档流，不占据空间
  • 如果没有已定位祖先元素，则相对于初始包含块（通常是视口）

示例：

1
2
3
4
5
.absolute {
    position: absolute;
    top: 10px;
    right: 20px;
}

fixed（固定定位）

详细解释：

  • 相对于浏览器窗口进行定位
  • 脱离文档流，不占据空间
  • 即使页面滚动，元素位置保持不变

示例：

1
2
3
4
5
6
.fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

sticky（粘性定位）

详细解释：

  • 相对于最近的滚动祖先元素进行定位
  • 在滚动到特定阈值前表现为相对定位，之后表现为固定定位
  • 需要指定至少一个阈值（top、bottom、left或right）

示例：

1
2
3
4
.sticky {
    position: sticky;
    top: 0;
}

16.2 z-index

详细解释：

  • 设置元素的堆叠顺序
  • 值越大，越靠近用户（显示在上层）
  • 仅对定位元素（position不是static）有效
  • 可以是正数、负数或auto

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box1 {
    position: absolute;
    z-index: 1;
}

.box2 {
    position: absolute;
    z-index: 2; /* 会显示在box1之上 */
}

.box3 {
    position: absolute;
    z-index: -1; /* 会显示在其他元素之下 */
}

综合大例子

以下是一个包含所有知识点的综合性示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV+CSS综合示例</title>
    
    <!-- 嵌入样式表 -->
    <style>
        /* 全局重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft YaHei", "Heiti SC", "SimSun", sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        /* 容器样式 */
        .container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 头部样式 */
        .header {
            background: linear-gradient(to right, #0066cc, #003366);
            color: white;
            padding: 20px 0;
            text-align: center;
            position: relative;
        }

        .header::after {
            content: "";
            display: table;
            clear: both;
        }

        .logo {
            float: left;
            font-size: 24px;
            font-weight: bold;
            padding: 0 20px;
        }

        .nav {
            float: right;
        }

        .nav ul {
            list-style: none;
            display: flex;
        }

        .nav li {
            margin-left: 20px;
        }

        .nav a {
            color: white;
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 3px;
            transition: all 0.2s ease;
        }

        .nav a:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        /* 主要内容区域 */
        .main-content {
            display: flex;
            margin-top: 20px;
            gap: 20px;
        }

        .sidebar {
            width: 25%;
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .sidebar h2 {
            color: #0066cc;
            margin-bottom: 15px;
        }

        .sidebar ul {
            list-style-type: square;
            margin-left: 20px;
        }

        .sidebar li {
            margin-bottom: 8px;
        }

        .content-area {
            width: 75%;
        }

        .article {
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .article h2 {
            color: #0066cc;
            margin-bottom: 15px;
        }

        .article p {
            margin-bottom: 15px;
            text-indent: 2em;
        }

        .highlight {
            background-color: #ffffcc;
            padding: 5px;
            border-radius: 3px;
            display: inline-block;
        }

        .quote {
            border-left: 3px solid #0066cc;
            padding-left: 15px;
            margin: 15px 0;
            font-style: italic;
            color: #666;
        }

        /* 卡片式布局 */
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .card {
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card-img {
            width: 100%;
            height: 200px;
            background: #f0f0f0;
            background-image: linear-gradient(to right, #0066cc, #003366);
            background-size: cover;
            background-position: center;
        }

        .card-content {
            padding: 20px;
        }

        .card h3 {
            color: #0066cc;
            margin-bottom: 10px;
        }

        /* 页脚样式 */
        .footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 20px 0;
            margin-top: 40px;
        }

        /* 固定定位的返回顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 50px;
            height: 50px;
            background: #0066cc;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 24px;
            z-index: 100;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .back-to-top.show {
            opacity: 1;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }
            
            .sidebar, .content-area {
                width: 100%;
            }
            
            .nav {
                float: none;
                text-align: center;
            }
            
            .nav ul {
                flex-direction: column;
            }
            
            .nav li {
                margin: 10px 0;
            }
        }
    </style>
    
    <!-- 内联样式（仅用于演示，实际项目不推荐） -->
    <style>
        /* 仅用于演示内联样式 */
        .demo-inline {
            color: red;
            font-weight: bold;
            background-color: #ffffcc;
            padding: 5px;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="logo">我的网站</div>
            <nav class="nav">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
            </nav>
        </header>
        
        <div class="main-content">
            <aside class="sidebar">
                <h2>导航菜单</h2>
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">关于</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">产品</a></li>
                    <li><a href="#">博客</a></li>
                    <li><a href="#">联系</a></li>
                </ul>
                
                <h2 style="margin-top: 30px;">热门文章</h2>
                <ul>
                    <li><a href="#">CSS3新特性详解</a></li>
                    <li><a href="#">响应式设计技巧</a></li>
                    <li><a href="#">Web性能优化</a></li>
                    <li><a href="#">JavaScript高级编程</a></li>
                </ul>
            </aside>
            
            <div class="content-area">
                <div class="article">
                    <h2>欢迎访问我的网站</h2>
                    <p>这是一个使用DIV+CSS布局的示例页面，展示了各种CSS特性和布局技巧。</p>
                    <p>本页面使用了<span class="highlight">嵌入样式表</span>、<span class="highlight">外部样式</span>和少量<span class="highlight">内联样式</span>（仅用于演示）。</p>
                    
                    <div class="quote">
                        "CSS不仅仅是美化网页的工具，更是构建现代Web应用的基础。"
                    </div>
                    
                    <p>页面采用了响应式设计，可以在不同设备上良好显示。主要使用了以下技术：</p>
                    <ul>
                        <li>Flexbox布局</li>
                        <li>CSS Grid</li>
                        <li>媒体查询</li>
                        <li>定位技术</li>
                    </ul>
                </div>
                
                <h2 style="margin-top: 20px;">特色内容</h2>
                <div class="card-container">
                    <div class="card">
                        <div class="card-img"></div>
                        <div class="card-content">
                            <h3>响应式设计</h3>
                            <p>学习如何创建适应各种设备的网站，提升用户体验。</p>
                            <a href="#" class="btn">了解更多</a>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-img"></div>
                        <div class="card-content">
                            <h3>CSS动画</h3>
                            <p>使用CSS3实现平滑过渡和动画效果，无需JavaScript。</p>
                            <a href="#" class="btn">了解更多</a>
                        </div>
                    </div>
                    
                    <div class="card">
                        <div class="card-img"></div>
                        <div class="card-content">
                            <h3>Web性能优化</h3>
                            <p>优化网站加载速度，提升SEO排名和用户体验。</p>
                            <a href="#" class="btn">了解更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <footer class="footer">
            <p>© 2023 我的网站. 保留所有权利.</p>
            <p>使用DIV+CSS技术构建，遵循现代Web标准。</p>
        </footer>
    </div>
    
    <a href="#" class="back-to-top">↑</a>
    
    <script>
        // 仅用于演示返回顶部按钮
        window.addEventListener('scroll', function() {
            var backToTop = document.querySelector('.back-to-top');
            if (window.pageYOffset > 300) {
                backToTop.classList.add('show');
            } else {
                backToTop.classList.remove('show');
            }
        });
        
        document.querySelector('.back-to-top').addEventListener('click', function(e) {
            e.preventDefault();
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
</body>
</html>

总结

这个综合示例展示了以下知识点：

  1. DIV和CSS基础：使用DIV作为容器，CSS控制样式
  2. 样式表类型：嵌入样式表（主要部分）和内联样式（仅用于演示）
  3. 注释：CSS注释用于解释代码
  4. 样式选择器：元素选择器、类选择器、ID选择器、后代选择器、伪类选择器等
  5. 背景：背景颜色、背景图像、背景渐变、背景重复等
  6. 边框：边框样式、宽度、颜色
  7. 文字属性：颜色、大小、粗细、字体
  8. 文本属性：对齐、行高、首行缩进、文本装饰
  9. 列表：列表样式、位置、自定义图像
  10. 超链接：四种状态的样式设置
  11. 盒子模型：内容、内边距、边框、外边距
  12. margin与padding：设置元素间距
  13. float：创建多列布局，以及清除浮动
  14. 块级元素与行内元素：不同元素类型的特性和转换
  15. 溢出：处理内容溢出的情况
  16. 定位：static、relative、absolute、fixed、sticky定位方式
  17. z-index：控制元素堆叠顺序

这个示例还包含了响应式设计、CSS动画、Flexbox和Grid布局等现代Web技术，展示了如何将这些基础知识点应用到实际项目中。