目录

  1. 第一部分：核心基础

    div css3教程
    （图片来源网络，侵删）
    • 什么是 Div 和 CSS？
    • 为什么使用 Div + CSS 布局？（告别 Table）
    • 开发环境准备
    • 你的第一个 Div + CSS 页面

  2. 第二部分：CSS 基础与盒模型

    • CSS 的三种引入方式
    • 选择器：如何找到你的元素
    • 核心概念：CSS 盒模型
    • 文本样式与常用属性

  3. 第三部分：布局核心 - 定位与浮动

    • 浮动：经典布局的基石
    • 定位：精确控制元素位置
    • 清除浮动：解决布局混乱的关键

  4. 第四部分：CSS3 新特性与高级布局

    • CSS3 选择器增强
    • CSS3 边框与背景
    • CSS3 文本效果
    • CSS3 2D/3D 变换与过渡
    • CSS3 动画
    • Flexbox (弹性盒子布局) - 现代布局利器
    • Grid (网格布局) - 二维布局王者

  5. 第五部分：响应式设计

    div css3教程
    （图片来源网络，侵删）
    • 什么是响应式设计？
    • 媒体查询
    • 视口
    • 响应式图片和流体布局

  6. 第六部分：最佳实践与常见问题

    • 命名规范
    • 代码组织与维护
    • 浏览器兼容性处理
    • 常见问题与解决方案

第一部分：核心基础

什么是 Div 和 CSS？

  • Div (Division): 一个 HTML 标签，本身没有任何特殊含义，它是一个块级容器，用于包裹页面上的其他元素（如文本、图片、其他 Div 等），你可以把它想象成一个“盒子”或“容器”。

    <div>
  <h1>这是一个标题</h1>
  <p>这是一段文字。</p>
</div>

  • CSS (Cascading Style Sheets): 层叠样式表，它是一种样式表语言，用来描述 HTML 元素应该如何被渲染和显示，CSS 控制网页的视觉表现，如颜色、字体、间距、布局等。

简单比喻：

div css3教程
（图片来源网络，侵删）
  • HTML 是房子的结构和框架（墙壁、门窗、房间）。
  • CSS 是房子的装修和风格（墙壁颜色、家具样式、窗帘）。

为什么使用 Div + CSS 布局？

在早期,网页布局主要使用 <table> 标签，但这导致了：

  • 代码臃肿：大量的表格代码让 HTML 文件变得巨大。
  • 维护困难：修改一个简单的布局需要改动复杂的表格结构。
  • SEO 不友好：搜索引擎难以从复杂的表格结构中提取有效内容。
  • 可访问性差：对于屏幕阅读器等辅助技术不友好。

Div + CSS 的优势：

  • 内容与表现分离：HTML 只负责内容，CSS 负责样式，代码清晰，易于维护。
  • 加载速度快：CSS 文件可以被缓存，减少了 HTML 文件的体积。
  • SEO 优化：简洁的 HTML 结构更有利于搜索引擎抓取。
  • 灵活性和可扩展性：可以轻松地改变整个网站的风格，只需修改 CSS 文件。

开发环境准备

你只需要一个文本编辑器和一个浏览器。

  • 文本编辑器:
    • VS Code (强烈推荐，免费、强大，有丰富的插件)
    • Sublime Text
    • Atom
    • Notepad++ (Windows)
  • 浏览器:
    • Chrome 或 Firefox (推荐，都拥有强大的开发者工具 F12 或 Ctrl+Shift+I，可以实时调试 CSS)。

你的第一个 Div + CSS 页面

让我们创建一个最简单的例子来感受一下。

步骤 1: 创建 HTML 文件 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的第一个 Div CSS 页面</title>
    <!-- 引入 CSS 文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <div class="header">
        <p>这是网站的头部。</p>
    </div>
    <div class="content">
        <p>这是网站的主要内容区域。</p>
    </div>
    <div class="footer">
        <p>这是网站的底部。</p>
    </div>
</body>
</html>

步骤 2: 创建 CSS 文件 (style.css)

/* body 样式 */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0; /* 清除默认的外边距 */
    padding: 0; /* 清除默认的内边距 */
}
/* div 容器样式 */
.header, .content, .footer {
    width: 80%;
    margin: 10px auto; /* 上下外边距 10px，左右自动居中 */
    padding: 20px;
    background-color: white;
    border: 1px solid #ccc;
}
/* 不同区域的特定样式 */
.header {
    background-color: #4CAF50; /* 绿色头部 */
    color: white;
}
.footer {
    background-color: #333; /* 深灰色底部 */
    color: white;
    text-align: center;
}

步骤 3: 在浏览器中打开 index.html 你会看到一个结构清晰、样式简单的网页，恭喜你，你已经迈出了第一步！

第二部分：CSS 基础与盒模型

CSS 的三种引入方式

  1. 内联样式 (不推荐，仅用于临时测试)

    <p style="color: red; font-size: 20px;">这是一段红色文字。</p>

  2. 内部样式表 (适用于单页面)

    <head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>

  3. 外部样式表 (最佳实践，推荐使用)

    <head>
    <link rel="stylesheet" href="style.css">
</head>

选择器：如何找到你的元素

选择器告诉浏览器要给哪个 HTML 元素应用样式。

  • 元素选择器: p { color: black; } (所有 <p>
  • 类选择器: .container { width: 960px; } (所有 class="container" 的元素)
  • ID 选择器: #main-header { background: gray; } (唯一一个 id="main-header" 的元素)
  • 后代选择器: div p { font-size: 14px; } (所有在 <div> 内部的 <p>
  • 子选择器: div > p { font-weight: bold; } (所有 <div> 的直接子 <p>
  • 伪类选择器: a:hover { color: orange; } (鼠标悬停在链接上时的样式)

核心概念：CSS 盒模型

这是 CSS 布局中最最重要的概念。每一个 HTML 元素都可以看作一个矩形的盒子，这个盒子由四部分组成：

  1. Content (内容): 显示文本、图片等实际内容。
  2. Padding (内边距): 内容与边框之间的空间。
  3. Border (边框): 包裹内容和内边距的线。
  4. Margin (外边距): 当前盒子与其他盒子之间的空间。

关键属性：

  • width 和 height: 默认情况下，它们只设置 Content 区域的宽高。
  • box-sizing: content-box; (默认值): width 和 height 只包含内容。
  • box-sizing: border-box; (强烈推荐): width 和 height 包含 Content + Padding + Border，这让布局计算变得非常直观。

示例：

.div-box {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid black;
    margin: 20px;
    background-color: lightblue;
    /* 如果不设置 box-sizing, 实际占位宽度是 300 + 20*2 + 10*2 = 360px */
    /* 推荐使用 border-box */
    box-sizing: border-box; /* width: 300px 包含了 padding 和 border */
}

文本样式与常用属性

p {
    color: #333; /* 文字颜色 */
    font-size: 16px; /* 字体大小 */
    font-family: "Microsoft YaHei", sans-serif; /* 字体族 */
    font-weight: bold; /* 字体粗细 (bold, normal) */
    line-height: 1.5; /* 行高 */
    text-align: center; /* 文本对齐 */
    text-decoration: none; /* 文本修饰 (下划线等) */
    letter-spacing: 2px; /* 字符间距 */
}

第三部分：布局核心 - 定位与浮动

浮动

浮动曾是实现多列布局的主流方式,但现在主要被 Flexbox 和 Grid 取代，理解它对维护旧项目和理解布局历史很重要。

  • 作用: 让元素脱离正常的文档流，并使其可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。
  • 属性: float: left; 或 float: right;。

问题： 父容器会因为浮动元素脱离文档流而“坍塌”（高度为 0），导致后续元素布局错乱。

解决方案：清除浮动

<div class="parent">
    <div class="float-left">浮动元素</div>
    <div class="float-right">浮动元素</div>
    <!-- 清除浮动元素 -->
    <div style="clear: both;"></div>
</div>

更现代的清除浮动方法（推荐）：

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

定位

定位允许你将元素精确地放在页面的任何位置,它通过 position 属性和 top, bottom, left, right 属性来控制。

  • position: static; (默认值): 元素在正常的文档流中。
  • position: relative; (相对定位): 相对于其自身的原始位置进行偏移，原来的位置仍然保留。
    .box {
    position: relative;
    left: 20px; /* 向右移动 20px */
}
  • position: absolute; (绝对定位): 相对于最近的已定位的祖先元素进行定位，如果找不到，则相对于 <html> 元素，它会完全脱离文档流。
    .parent {
    position: relative; /* 父元素需要是已定位的 */
}
.box {
    position: absolute;
    top: 10px;
    left: 10px;
}
  • position: fixed; (固定定位): 相对于浏览器视口进行定位，不会随页面滚动而移动，常用于导航栏、返回顶部按钮等。
    .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
  • position: sticky; (粘性定位): 结合了 relative 和 fixed 的特性，元素在跨越某个阈值之前表现为 relative，之后表现为 fixed，常用于表格标题或侧边栏。

第四部分：CSS3 新特性与高级布局

CSS3 带来了革命性的变化，让网页设计更加炫酷和高效。

CSS3 选择器增强

/* 属性选择器 */
input[type="text"] { ... } /* 选中 type 为 text 的 input */
/* 结构伪类 */
ul li:first-child { ... } /* 选中 ul 的第一个 li */
ul li:last-child { ... }  /* 选中 ul 的最后一个 li */
ul li:nth-child(2n) { ... } /* 选中 ul 的所有偶数 li (2, 4, 6...) */
ul li:nth-child(3n+1) { ... } /* 选中 1, 4, 7... */
/* 伪元素 */
p::first-line { ... } /* 选中 p 标签的第一行 */
p::first-letter { ... } /* 选中 p 标签的第一个字母 */

CSS3 边框与背景

/* 圆角边框 */
.box {
    border-radius: 10px; /* 四个角都是 10px */
    border-radius: 10px 20px 30px 40px; /* 左上, 右上, 右下, 左下 */
}
/* 阴影 */
.box {
    /* 水平偏移 垂直偏移 模糊半径 颜色 */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}
/* 渐变背景 */
.linear-gradient {
    background: linear-gradient(to right, #ff0000, #ffff00);
}
.radial-gradient {
    background: radial-gradient(circle, #ff0000, #0000ff);
}

CSS3 文本效果

/* 文本阴影 */
h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* 文本溢出处理 */
.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 显示省略号 */
}

CSS3 2D/3D 变换与过渡

.box {
    width: 100px;
    height: 100px;
    background: orange;
    transition: transform 0.5s ease; /* 添加过渡效果，持续0.5秒 */
    /* 2D 变换 */
    /* transform: translate(50px, 50px); /* 平移 */
    /* transform: rotate(45deg); /* 旋转 */
    /* transform: scale(1.5); /* 缩放 */
    /* transform: skew(10deg, 10deg); /* 倾斜 */
    /* 3D 变换 */
    /* transform: rotateX(60deg); /* 绕X轴旋转 */
    /* transform: rotateY(60deg); /* 绕Y轴旋转 */
}
.box:hover {
    transform: rotate(360deg) scale(1.2); /* 鼠标悬停时执行变换 */
}

CSS3 动画

比过渡更强大,可以定义关键帧，实现更复杂的动画。

@keyframes myAnimation {
    0% {
        transform: translateX(0);
        background-color: red;
    }
    50% {
        transform: translateX(100px);
        background-color: yellow;
    }
    100% {
        transform: translateX(0);
        background-color: red;
    }
}
.animated-box {
    width: 50px;
    height: 50px;
    background-color: red;
    animation: myAnimation 2s infinite; /* 应用动画，持续2秒，无限循环 */
}

Flexbox (弹性盒子布局)

Flexbox 是一维布局模型，非常适合在容器内对齐和分布项目。

核心概念:

  • Flex Container (容器): 设置 display: flex; 的父元素。
  • Flex Items (项目): 容器内的直接子元素。

容器属性:

.container {
    display: flex;
    /* 主轴方向 (row, column, row-reverse, column-reverse) */
    flex-direction: row; 
    /* 换行 (nowrap, wrap, wrap-reverse) */
    flex-wrap: wrap;
    /* 主轴对齐方式 (flex-start, center, space-between, space-around) */
    justify-content: center;
    /* 交叉轴对齐方式 (stretch, center, flex-start, flex-end) */
    align-items: center;
}

项目属性:

.item {
    /* 项目在交叉轴上的对齐方式 */
    align-self: flex-start;
    /* 项目在主轴上的伸缩比例 */
    flex-grow: 1; /* 占据剩余空间 */
    /* 项目的基础宽度/高度 */
    flex-basis: 100px;
}

Grid (网格布局)

Grid 是一个二维布局系统，可以同时处理行和列，是复杂布局的终极解决方案。

核心概念:

  • Grid Container (容器): 设置 display: grid; 的父元素。
  • Grid Lines (网格线): 构成网格的分隔线。
  • Grid Tracks (网格轨道): 两条相邻网格线之间的空间。
  • Grid Cells (网格单元格): 两条相邻的行和两条相邻的列网格线之间的空间。
  • Grid Areas (网格区域): 任意数量的网格单元格组成的矩形区域。

容器属性:

.container {
    display: grid;
    /* 定义列轨道 */
    grid-template-columns: 200px 1fr 150px; /* 固定, 弹性, 固定 */
    /* 定义行轨道 */
    grid-template-rows: 80px 1fr 60px;
    /* 定义网格区域 */
    grid-template-areas:
        "header header header"
        "sidebar main main"
        "footer footer footer";
    /* 网格间距 */
    gap: 10px;
}

项目属性:

.header {
    /* 将项目放置到定义的网格区域 */
    grid-area: header;
}
.sidebar {
    grid-column: 2 / 4; /* 从第2条列线开始，到第4条列线结束 */
    grid-row: 2; /* 占据第2行 */
}

第五部分：响应式设计

响应式设计让网页在不同设备（桌面、平板、手机）上都能有良好的显示效果。

什么是响应式设计？

一种网页设计方法,使网页能够自动适应不同屏幕尺寸和设备，提供最佳的浏览体验。

媒体查询

媒体查询是实现响应式设计的核心技术,它允许你根据设备的特定特征（如宽度、高度、方向）应用不同的 CSS 样式。

/* 默认样式，应用于所有设备 */
body {
    background-color: lightblue;
    font-size: 16px;
}
/* 当视口宽度小于等于 768px 时 (平板) */
@media (max-width: 768px) {
    body {
        background-color: lightgreen;
        font-size: 14px;
    }
    .container {
        width: 95%;
    }
}
/* 当视口宽度小于等于 480px 时 (手机) */
@media (max-width: 480px) {
    body {
        background-color: pink;
        font-size: 12px;
    }
    .container {
        width: 100%;
    }
}

视口

视口是浏览器显示网页内容的区域,为了确保移动设备上的正确缩放，需要在 <head> 中添加 viewport meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width: 设置视口宽度为设备屏幕宽度。
  • initial-scale=1.0: 初始缩放比例为 1.0。

响应式图片和流体布局

  • 流体布局: 使用相对单位（如 , vw, vh, em, rem）代替固定像素（px），让元素大小能随视口变化。
    .fluid-container {
    width: 90%; /* 百分比宽度 */
    padding: 2em; /* em 相对于父元素的字体大小 */
}
  • 响应式图片: 使用 max-width 确保图片不会溢出其容器。
    img {
    max-width: 100%;
    height: auto; /* 保持宽高比 */
}

第六部分：最佳实践与常见问题

命名规范

  • BEM (Block, Element, Modifier): 一种流行的命名方法。
    • Block (块): 独立实体，如 .menu。
    • Element (元素): 块的一部分，用双下划线连接，如 .menu__item。
    • Modifier (修饰符): 改变块或元素的外观/状态，用双连字符连接，如 .menu--horizontal。
  • 保持一致性,使用有意义的名字。

代码组织与维护

  • 模块化: 将 CSS 按功能模块（如 header.css, footer.css, components.css）或页面组件拆分。
  • 注释: 使用注释来分隔不同的部分，解释复杂的代码。
  • CSS 预处理器 (Sass/Less): 使用变量、嵌套、混入等特性，让 CSS 更易于编写和维护。

浏览器兼容性处理

  • 厂商前缀: 一些新特性需要添加特定浏览器的前缀才能生效。
    .box {
    -webkit-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Safari, Chrome */
    -moz-box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Firefox */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 标准 */
}
  • Autoprefixer: 使用构建工具（如 Webpack, Vite）的插件，可以自动添加所需的厂商前缀。

常见问题与解决方案

  • 外边距重叠: 两个垂直相邻的块级元素，它们之间的外边距会取较大的那个，而不是相加。
    • 解决方案: 给其中一个元素添加 padding 或 border，或者使用 overflow: hidden; 触发 BFC (Block Formatting Context)。
  • 高度塌陷: 见第三部分“清除浮动”。
  • 文字溢出: 使用 text-overflow: ellipsis;。

总结与学习路径

  1. 打好基础: 彻底理解盒模型和文档流。
  2. 掌握布局: 熟练使用 Flexbox 和 Grid，它们是现代网页布局的标准。
  3. 拥抱 CSS3: 学习过渡、变换、动画，让你的页面动起来。
  4. 学会响应式: 掌握媒体查询和视口，让你的网站适配各种设备。
  5. 实践出真知: 找一个简单的网站（如个人博客、作品集），尝试用你学到的知识从零开始构建它。
  6. 持续学习: 关注 CSS 的新标准，如 Container Queries（容器查询），它将进一步改变我们编写响应式代码的方式。

这份教程为你铺就了一条从入门到精通的道路,祝你学习愉快，早日成为 CSS 大师！