HTML
1.1 浏览器
| 浏览器 | 内核名称 | 核心技术架构 | 开发者/维护方 |
|---|---|---|---|
| Google Chrome | Blink（Chromium） | 基于 WebKit 分支，多进程架构 | Google（开源项目） |
| Microsoft Edge | Blink（Chromium） | 同 Chrome，基于 Chromium 代码库 | Microsoft |
| Mozilla Firefox | Gecko | 独立渲染引擎，支持 Rust 和 WebAssembly | Mozilla 基金会 |
| Apple Safari | WebKit / Nitro | 基于 WebKit，JIT 编译优化 | Apple |
| Opera | Blink（Chromium） | 同 Chrome，基于 Chromium 代码库 | Opera Software ASA |
| 360/UC 浏览器 | Trident + Blink | 双核模式（兼容 IE + Chromium） | 奇虎 360/UCWeb |
性能对比
| 指标 | Blink | Gecko | WebKit |
|---|---|---|---|
| 页面加载速度 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| JavaScript 性能 | ⭐⭐⭐⭐⭐ (V8) | ⭐⭐⭐⭐ (SpiderMonkey) | ⭐⭐⭐ (Nitro) |
| CSS 支持 | ⭐⭐⭐⭐⭐（最新标准） | ⭐⭐⭐⭐⭐（严格模式） | ⭐⭐⭐⭐（部分滞后） |
| 内存占用 | ⭐⭐（较高） | ⭐⭐⭐（中等） | ⭐⭐⭐⭐（较低） |
| 标准兼容性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐（先锋） | ⭐⭐⭐（保守） |
1.2 HTML简介
HTML全称HyperText Markup Language，超文本标记语言，超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。标签名不区分大小写，建议小写。参考资料：
<!DOCTYPE html><!-- html5声明 一般情况下可省略-->
<html lang="zh-CN">
<head>
<meta charset="UTF-8"> <!-- 编码声明-->
<title>标题</title>
</head>
<body>
HTML内容
<input text=''>
</body>
</html>
1.3基本属性
1.3.1文档声明
<!DOCTYPE html><!-- html5声明 一般情况下可省略-->1.3.2字符编码
<meta charset="UTF-8"> <!-- 编码声明,写在head标签里-->1.3.3语言设置
<html lang="zh-CN">- zh-CN：中文-简体
- zh-TW：中文-繁体
- zh：中文
- en-US：英语-美国
- en-GB：英语-英国
1.4常用标签
1.4.1排版标签
1.4.1.1 标题
标签之间换行，不能互相嵌套
一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>1.4.1.2 div标签
div间默认换行，可以嵌套其他标签
<div>
</div>1.4.1.3 段落
不允许嵌套
<p>段落</p>PS:
- 块级元素：div、h1、P等：独占一行
- 行级元素：span、input等不独占一行。行级元素内不允许写块元素
1.4.2 文本标签
em标签
strong标签
span标签>
| 标签名 | 语义 | 单双 |
|---|---|---|
| em | 着重阅读的内容 | 双 |
| strong | 十分重要，比em强烈 | 双 |
| span | 没有寓意，包裹短语的通用容器 | 双 |
1.4.3 图片标签
单标签
<img src="">核心属性：
| 属性名 | 作用与枚举值 | 示例 |
|---|---|---|
src | 必填，指定图片资源路径： - 相对路径（images/logo.png） - 绝对 URL（https://example.com/image.jpg） - Base64 数据（data:image/png;base64,...） | <img src="logo.png"> |
alt | 必填，替代文本： - 描述性文字（alt="公司 Logo"） - 装饰性图片设为空（alt=""） | <img src="deco-line.png" alt=""> |
width/height | 显式设置图片尺寸（单位：像素）： - 避免布局偏移（CLS） - 与 CSS 尺寸配合使用 | <img src="photo.jpg" width="800" height="600"> |
loading | 加载行为： - lazy（延迟加载，视口外图片） - eager（立即加载，默认） | <img src="banner.jpg" loading="lazy"> |
srcset | 响应式图片源（分辨率/宽度适配）： image-1x.jpg 1x, image-2x.jpg 2x image-480w.jpg 480w, image-800w.jpg 800w | 见下方响应式设计示例 |
sizes | 媒体查询与显示宽度： (max-width: 600px) 480px, 800px | 见下方响应式设计示例 |
<!-- 浏览器根据设备像素比（如 Retina 屏）自动选择高清图。 -->
<img src="image-1x.jpg"
srcset="image-1x.jpg 1x, image-2x.jpg 2x"
alt="响应式图片">常见错误与解决方案
| 问题场景 | 解决方案 |
|---|---|
| 图片不显示（404） | 检查 src 路径，确保服务器权限正确。 |
| 布局偏移（CLS） | 显式设置 width 和 height，或使用 CSS aspect-ratio。 |
| 移动端图片过大 | 使用 srcset 按屏幕宽度加载合适尺寸，或通过 CDN 动态裁剪。 |
| 透明背景锯齿 | 使用 PNG 或 WebP 格式，避免 JPEG。 |
1.4.4 超链接
<a href="https://www.baidu.com">百度一下</a>常用属性：
href：跳转链接
- 指定网址：https://www.baidu.com
- 相对路径的其他资源：./index.html
- 连接到页面中其他元素：如
#selector - 脚本：
href="javascropt:alert('hello')" - 其他协议：比如 https://、ftp://、mailto:、file: 等，可以唤起其他应用
target：跳转的目标
- _blank：新标签页
- _self：当前页面
1.4.5列表
有序列表(ordered)：
- 列1
- 列2
<ol> <li>列1</li> <li>列2</li> </ol>属性：
type1（数字，默认）、A（大写字母）、a（小写字母）、I（大写罗马数字）、i（小写罗马数字）。推荐用 CSS 替代： list-style-type: decimal/upper-alpha/lower-roman;start整数（如 start="3"，从 3 开始计数）。仅对数字类型有效。 reversed布尔属性（倒序显示序号）。 示例： <ol reversed>（兼容性较差，慎用）。无序列表（unordered）
- 选项1
- 选项2
<ul> <li>选项1</li> <li>选项2</li> </ul>自定义（definition）
- 1.选项
- 1.1.选项
- 2.选项
- 2.1.选项
<dl> <dt>1.选项</dt> <dd>1.1.选项</dd> <dt>2.选项</dt> <dd>2.1.选项</dd> </dl>
注意事项：
列表可以进行嵌套，例：
- 水果
- 苹果
- 香蕉
- 蔬菜
- 胡萝卜
- 西红柿
<ul> <li>水果 <ol> <li>苹果</li> <li>香蕉</li> </ol> </li> <li>蔬菜 <ul> <li>胡萝卜</li> <li>西红柿</li> </ul> </li> </ul>- 水果
1.4.6表格
| 姓名 | 职位 | 部门 |
|---|---|---|
| 张三 | 前端工程师 | 技术部 |
| 李四 | 产品经理（兼UI设计） | |
| 总计：2 人 | ||
<table>
<caption>员工信息表</caption>
<colgroup>
<col span="1" style="background-color: #f5f5f5">
<col span="2" style="width: 200px">
</colgroup>
<thead>
<tr>
<th scope="col">姓名</th>
<th scope="col">职位</th>
<th scope="col">部门</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>前端工程师</td>
<td>技术部</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td colspan="2">产品经理（兼UI设计）</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">总计：2 人</td>
</tr>
</tfoot>
</table> <table> 标签
| 说明 | 属性 | 示例 |
|---|---|---|
| 定义表格容器 | border：数值（如 1），控制表格边框宽度（已过时，推荐用 CSS）。width：数值或百分比（如 100%），定义表格宽度。 | <table border="1">...</table><table width="100%"> |
| 注意事项 | 避免使用 border 和 cellspacing，优先用 CSS 控制样式。 |
<tr> 标签
| 说明 | 属性 | 示例 |
|---|---|---|
| 定义表格行 | 无特殊属性 | <tr><td>内容</td></tr> |
| 注意事项 | 必须嵌套在 <table>、<thead>、<tbody> 或 <tfoot> 内。 |
<th> 标签
| 说明 | 属性 | 示例 |
|---|---|---|
| 定义表头单元格 | scope：col（关联列）、row（关联行）、colgroup（列组）、rowgroup（行组）。colspan：合并列数。rowspan：合并行数。 | <th scope="col">姓名</th><th colspan="2">合并表头</th><th rowspan="3">跨行表头</th> |
| 注意事项 | 必须用 scope 属性提升可访问性（屏幕阅读器友好）。 |
<td> 标签
| 说明 | 属性 | 示例 |
|---|---|---|
| 定义表格数据单元格 | colspanrowspan | <td colspan="2">合并单元格</td><td rowspan="3">跨行单元格</td> |
| 注意事项 | 避免滥用合并，保持表格结构清晰。 |
<thead>, <tbody>, <tfoot> 标签
| 标签名 | 说明 | 示例 | 注意事项 |
|---|---|---|---|
<thead> | 定义表头区域 | <thead><tr><th>标题</th></tr></thead> | 必须位于 <table> 内，且顺序为 <thead> → <tbody> → <tfoot>。 |
<tbody> | 定义表格主体内容 | <tbody><tr><td>数据</td></tr></tbody> | 可包含多个 <tbody> 分段管理数据。 |
<tfoot> | 定义表格底部汇总信息 | <tfoot><tr><td>总计</td></tr></tfoot> | 必须位于 <tbody> 之后。 |
<caption> 标签
| 说明 | 属性 | 示例 | 注意事项 |
|---|---|---|---|
| 定义表格标题 | 无特殊属性 | <caption>2023 年销售数据</caption> | 必须紧跟在 <table> 开始标签后。 |
<colgroup> 和 <col> 标签
| 标签名 | 说明 | 属性 | 示例 |
|---|---|---|---|
<colgroup> | 定义表格列组 | span（合并列数） | <colgroup span="2" style="background:#eee"></colgroup> |
<col> | 定义单列样式 | span（合并列数） | <colgroup><col span="2" style="width:100px"></colgroup> |
| 注意事项 | 用于批量控制列宽或样式，需配合 CSS 使用。 |
1.4.7.form表单
<form action="/submit" method="POST" enctype="multipart/form-data">
<!-- 输入控件 -->
<input type="text" name="username" required>
<button type="submit">提交</button>
</form>| 属性名 | 枚举值/用法示例 | 说明 | 注意事项 |
|---|---|---|---|
method | GET（数据附加到 URL）POST（数据在请求体中） | 表单提交的 HTTP 方法。 | GET 适合非敏感数据POST 适合文件上传或敏感信息。 |
enctype | application/x-www-form-urlencoded（默认编码） multipart/form-data（文件上传） text/plain（纯文本） | 表单数据的编码方式。 | 文件上传必须设为 multipart/form-data。 |
action | /submit（提交到服务器接口） javascript:void(0)（JS 处理） 空值（当前页面） | 表单提交的目标地址。 | 使用 javascript: 需绑定 onsubmit 事件处理。 |
1.4.8.input标签
type属性：
type 值 | 用途与特性 | 示例 |
|---|---|---|
text | 单行文本输入（默认） | <input type="text" name="username"> |
password | 密码输入（隐藏内容） | <input type="password" name="pwd"> |
email | 邮箱输入（触发格式验证） | <input type="email" name="email"> |
number | 数字输入（支持 min/max/step） | <input type="number" min="1" max="100" step="1"> |
file | 文件上传（需 enctype="multipart/form-data"） | <input type="file" name="avatar" accept="image/*"> |
checkbox | 多选框 | <input type="checkbox" name="hobby" value="reading"> |
radio | 单选框（相同 name 分组） | <input type="radio" name="gender" value="male"> |
submit | 提交按钮 | <input type="submit" value="提交"> |
hidden | 隐藏字段（存储无需用户输入的数据） | <input type="hidden" name="token" value="abc123"> |
其他关键属性
| 属性名 | 作用 | 示例 |
|---|---|---|
required | 必填字段（触发浏览器验证） | <input type="text" required> |
placeholder | 输入提示文本 | <input placeholder="请输入用户名"> |
pattern | 正则表达式验证（需配合 title 提示） | <input pattern="[A-Za-z]{3}" title="3位字母"> |
readonly | 只读字段（值可提交） | <input type="text" value="固定值" readonly> |
disabled | 禁用字段（值不提交） | <input type="text" disabled> |
其他表单控件：
<textarea> 多行文本输入
<textarea name="comment" rows="4" cols="50" placeholder="请输入评论"></textarea><select> 下拉选择
<select name="city">
<option value="">请选择城市</option>
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
</select><fieldset> 和 <legend> 分组控件
<fieldset>
<legend>用户信息</legend>
<input type="text" name="username">
<input type="email" name="email">
</fieldset>1.4.9 iframe
<iframe>（内联框架）用于在当前 HTML 页面中嵌入另一个独立的 HTML 文档。常见用途包括：
- 嵌入第三方内容（如地图、视频、广告）。
- 展示沙盒化内容（如代码编辑器预览）。
- 实现页面局部刷新（传统用法，现代开发中已较少使用）。
核心属性
| 属性名 | 说明 | 常用值/示例 |
|---|---|---|
src | 指定嵌入内容的 URL（必填）。 | src="https://example.com" src="local-page.html" |
width & height | 定义框架的宽高（单位：像素或百分比）。 | width="800" height="600" width="100%" |
frameborder | 是否显示边框（已过时，推荐用 CSS 替代）。 | 0（无边框）或 1（有边框）。 |
allow | 控制嵌入内容的功能权限（安全关键属性）。 | allow="fullscreen"（允许全屏） allow="camera; microphone"（设备权限） |
sandbox | 启用沙盒模式，限制嵌入页面的行为（安全关键属性）。 | sandbox="allow-scripts"（仅允许脚本） sandbox="allow-forms"（允许表单提交） |
loading | 控制框架加载时机（优化性能）。 | loading="lazy"（延迟加载） loading="eager"（立即加载） |
name | 为框架命名，用于超链接的 target 属性。 | <a href="page.html" target="my-frame">打开链接</a> |
安全注意事项
防止点击劫持（Clickjacking）
方法一：通过响应头禁止被嵌入。
Content-Security-Policy: frame-ancestors 'none'方法二：在嵌入的页面中添加以下代码：
<script> if (window !== window.top) { window.top.location = window.location; } </script>
2. 沙盒模式（Sandbox）
严格模式：禁止所有功能。
<iframe src="external.html" sandbox></iframe>允许部分功能：按需开放权限。
<iframe sandbox="allow-scripts allow-same-origin"></iframe>
3. 跨域限制（CORS）
嵌入跨域内容时，需确保目标页面设置了允许嵌入的 CORS 头：
Access-Control-Allow-Origin: *
示例代码
嵌入 YouTube 视频
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/视频ID"
title="YouTube 视频"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>嵌入 Google 地图
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d坐标参数"
width="600"
height="450"
style="border:0;"
allowfullscreen
loading="lazy"
></iframe>沙盒化代码预览
<iframe
sandbox="allow-scripts"
srcdoc="<script>alert('安全沙盒中的代码');</script>"
></iframe>5. 替代方案
- 现代替代：优先使用 Web Components 或前端框架（如 React、Vue）的组件化方案。
- 动态加载：通过 JavaScript 的
fetch()或XMLHttpRequest加载内容并插入到 DOM 中。
1.4.10 meta标签
html基本信息
<head>
<meta charset="UTF-8">
<meta name="description" content="免费的 Web 教程">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Bill Gates">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。
当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。
meta标签还可以使用html的全局属性
1.5.HTML5新增标签
1.5.1语义化标签
| 标签 | 说明 | 属性示例 | 注意事项 |
|---|---|---|---|
<header> | 定义页面或区块的页眉（如导航栏、Logo）。 | 无特殊属性 | 一个页面可包含多个 <header>，通常位于顶部。 |
<footer> | 定义页面或区块的页脚（如版权信息、联系方式）。 | 无特殊属性 | 可嵌套在 <article> 或 <section> 内。 |
<nav> | 定义导航链接集合（如主导航菜单）。 | 无特殊属性 | 仅用于主要导航，次要链接无需包裹。 |
<article> | 定义独立内容块（如博客文章、新闻条目）。 | 无特殊属性 | 内容应自包含，适合单独分发或复用。 |
<section> | 定义文档中的章节或区块（如章节、标签页）。 | 无特殊属性 | 需搭配标题（<h2>~<h6>）使用。 |
<aside> | 定义与主内容相关的侧边栏或附加内容（如引用、广告）。 | 无特殊属性 | 内容应与主内容相关，但非必需。 |
<main> | 定义文档主体内容（每个页面唯一）。 | 无特殊属性 | 不可嵌套在 <header>、<footer> 或 <article> 内。 |
<figure> | 定义媒体内容组合（如图片、图表、代码块）。 | 无特殊属性 | 需配合 <figcaption> 添加标题或说明。 |
<time> | 定义时间或日期。 | datetime（机器可读格式，如 datetime="2023-10-01"） | 示例：<time datetime="2023-10-01">国庆节</time>。 |
1.5.2.多媒体标签
| 标签 | 说明 | 属性示例 | 注意事项 |
|---|---|---|---|
<video> | 嵌入视频文件。 | controls（显示控件）、autoplay（自动播放）、poster（封面图）。 | 提供多种格式（如 MP4、WebM）以提高兼容性。 |
<audio> | 嵌入音频文件。 | controls、loop（循环播放）、muted（静音）。 | 支持 MP3、WAV、Ogg 等格式。 |
<track> | 为 <video> 或 <audio> 添加字幕或章节信息。 | kind（类型，如 subtitles）、src（字幕文件路径）、srclang（语言）。 | 示例：<track src="subs_en.vtt" kind="subtitles" srclang="en">。 |
1.5.3.图形与交互标签
| 标签 | 说明 | 属性示例 | 注意事项 |
|---|---|---|---|
<canvas> | 通过 JavaScript 绘制图形、动画或游戏。 | width、height（画布尺寸）。 | 需配合 JS 使用，示例：<canvas id="myCanvas" width="800" height="600"></canvas>。 |
<svg> | 定义矢量图形（如图标、图表）。 | viewBox（视口）、fill（填充颜色）、stroke（描边颜色）。 | 直接嵌入 SVG 代码或通过 <img> 引用外部文件。 |
1.5.4.表单增强标签
| 标签/属性 | 说明 | 属性示例 | 注意事项 |
|---|---|---|---|
<datalist> | 定义输入框的预定义选项列表（与 <input list> 配合使用）。 | id（与 <input list> 属性关联）。 | 示例：<input list="browsers"><datalist id="browsers"><option value="Chrome"></datalist>。 |
<output> | 显示计算或用户输入的结果。 | for（关联的输入控件 ID）。 | 需通过 JS 更新值。 |
<input type="email"> | 邮箱输入（自动格式验证）。 | multiple（允许多个邮箱，用逗号分隔）。 | 需后端二次验证。 |
<input type="date"> | 日期选择器。 | min、max（限制日期范围）。 | 浏览器样式可能不一致。 |
<input type="range"> | 滑块控件。 | min、max、step（步长）。 | 示例：<input type="range" min="0" max="100" step="10">。 |
1.5.5.其他新增标签
| 标签 | 说明 | 属性示例 | 注意事项 |
|---|---|---|---|
<mark> | 高亮显示文本（如搜索结果关键词）。 | 无特殊属性 | 示例：<p>这是<mark>高亮</mark>文本。</p>。 |
<progress> | 显示任务进度条。 | value（当前值）、max（最大值）。 | 示例：<progress value="70" max="100"></progress>。 |
<meter> | 显示标量测量值（如磁盘使用量）。 | min、max、value、low、high（阈值范围）。 | 示例：<meter value="6" min="0" max="10">6/10</meter>。 |
<dialog> | 定义对话框或模态窗口。 | open（默认显示）。 |
1.5.6.兼容性与最佳实践
兼容性处理：
旧版 IE（IE8及以下）不支持 HTML5 标签，需通过以下代码启用：
<!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->
语义化优先
- 替代
<div class="header">为<header>，提升 SEO 和可访问性。 - 使用
<picture>和srcset适配不同设备分辨率。
- 替代
表单验证
- 结合 HTML5 原生验证（如
required、pattern）与 JS 自定义逻辑。
- 结合 HTML5 原生验证（如
1.6.单双标签列表
1.6.1.单标签
单标签不需要结束标签，通常用于插入元素或执行动作，不可包含内容。
常见单标签：
| 标签 | 作用 | 示例 |
|---|---|---|
<br> | 强制换行 | 第一行<br>第二行 |
<hr> | 水平分割线 | <hr style="border: 1px solid #ccc;"> |
<img> | 插入图片 | <img src="image.jpg" alt="描述"> |
<input> | 输入控件（文本、密码、文件等） | <input type="text" name="username"> |
<meta> | 定义元数据（字符编码、视口等） | <meta charset="UTF-8"> |
<link> | 引入外部资源（CSS、图标等） | <link rel="stylesheet" href="style.css"> |
<area> | 定义图像映射区域（需配合 <map> 使用） | <area shape="rect" coords="0,0,82,126" href="link.html"> |
<base> | 设置页面的基础 URL | <base href="https://example.com/"> |
特殊说明：
- 单标签在 HTML5 中可以省略斜杠（如
<br>），但在 XHTML 中需强制闭合（如<br />）。 <img>、<input>等标签即使没有内容，也需保持自闭合格式。
1.6.2.双标签
双标签必须成对出现，用于定义结构或包含内容。
常见双标签：
| 标签 | 作用 | 示例 |
|---|---|---|
<div> | 通用块级容器 | <div class="container"><p>内容</p></div> |
<p> | 段落 | <p>这是一段文字。</p> |
<h1>~<h6> | 标题（1 级最大，6 级最小） | <h1>主标题</h1> |
<a> | 超链接 | <a href="https://example.com">链接</a> |
<ul>/<ol> | 无序列表/有序列表 | <ul><li>项目1</li></ul> |
<table> | 表格 | <table><tr><td>单元格</td></tr></table> |
<form> | 表单容器 | <form action="/submit" method="POST"></form> |
<script> | 嵌入或引用 JavaScript 代码 | <script src="app.js"></script> |
特殊说明：
- 双标签必须严格闭合，否则会导致页面渲染错误（如未闭合的
<div>会影响后续布局）。 - 部分双标签可嵌套单标签，例如
<p>中包含<br>或<img>。
1.6.3常见混淆点
| 场景 | 正确用法 | 错误用法 |
|---|---|---|
| 自闭合标签 | <img src="image.jpg">（正确） | <img src="image.jpg"></img>（错误，双标签闭合） |
| 双标签闭合 | <div><p>内容</p></div> | <div><p>内容</p>（错误，未闭合 <div>） |
| 特殊双标签 | <br>（单标签）不能写成 <br></br> | <br></br>（错误，单标签无需闭合） |
如何验证标签闭合？
浏览器开发者工具：
- 按
F12打开控制台，若标签未闭合会提示Error: Unclosed element。
- 按
在线验证工具：
- 使用 W3C Validator 检查 HTML 语法。
CSS
1.样式编写方式
- 行内：
<div style="width: 100px"/> - 内部：
<style></style> - 外部：
<link rel="stylesheet" href="./XX.css">
优先级：行内 > 内部 = 外部
2.语法规范
h1{
colr: green;
font-size: 40px;
}选择器：{属性名:属性值;属性名:属性值}
3.选择器
3.1 通配选择器
* {
属性名:属性值
}3.2 元素选择器
通过元素标签进行选择
h1{
colr: green;
font-size: 40px;
}3.3 类选择器
元素标签定义class属性.class
<div class="student"></div>
.student{
}3.4 ID选择器
元素标签定义ID#ID
<div id="student"></div>
#student{
}3.5 复合选择器
交集选择器：既是，又是
p.class#id{ }并集选择器：A和B都选择
p, .class, #id{ }
3.6 后代选择器
选择某元素的后代元素，中间用空格隔开
div span{
}
.student #zangsan{
}3.7 子代选择器
选择器>选择器，选择某元素的子元素（非孙）
div > a{
}3.8 兄弟选择器
选择器+选择器，选择某元素的相邻的兄弟元素。如果不相邻，则找不到。
div+a{
}选择器~选择器，选择某元素后所有的兄弟元素
div~a{}3.9 属性选择器
[title]或者[title="t1"]
选中具有某个属性，或者某属性值为？的元素
[title]{
}
[title="t1"]{
}
[title^="t"]{}/*以t开头的*/
[title$="t"]{}/*以t结尾的*/
[title*="t"]{}/*存在字母t的*/3.10 伪类选择器
根据元素的状态、位置或特定条件来定义样式，而无需在 HTML 中显式添加类名或 ID。语法格式：
以冒号 : 开头，例如 :hover、:nth-child()。
a:link{}
a:visited{}3.10.1. 元素状态相关
| 伪类选择器 | 描述 | 示例 |
|---|---|---|
:hover | 鼠标悬停在元素上时生效 | a:hover { color: red; } |
:focus | 元素获得焦点时生效（如输入框、按钮） | input:focus { border: 2px solid blue; } |
:active | 元素被点击（激活）时生效 | button:active { transform: scale(0.95); } |
:visited | 链接已被访问过时生效（需谨慎使用，受浏览器安全限制） | a:visited { color: purple; } |
3.10.2. 元素位置相关
| 伪类选择器 | 描述 | 示例 |
|---|---|---|
:nth-child(n) | 选择父元素中的第 n 个子元素 | li:nth-child(odd) { background: #f0f0f0; }an+b（n自增）；odd（奇数）、even（偶数） |
:first-child | 选择父元素的第一个子元素 | p:first-child { font-weight: bold; } |
:last-child | 选择父元素的最后一个子元素 | tr:last-child { border-bottom: 2px solid #ccc; } |
:not(selector) | 排除符合指定选择器的元素 | div:not(.special) { margin: 0; } |
| :first-of-type | 满足条件的第一个子元素 | div>p:first-of-type{} |
| :last-of-type | 满足条件的最后一个 | |
| :nth-of-type | 满足条件的n个子元素 |
3.10.3. 表单相关
| 伪类选择器 | 描述 | 示例 |
|---|---|---|
:checked | 单选框/复选框被选中时生效 | input[type="checkbox"]:checked + label { color: green; } |
:disabled | 表单元素被禁用时生效 | button:disabled { opacity: 0.5; } |
:required | 表单字段带有 required 属性时生效 | input:required { border: 1px solid red; } |
3.10.4. 特殊场景
| 伪类选择器 | 描述 | 示例 |
|---|---|---|
:target | URL 锚点指向的元素（如 #section1） | #section1:target { display: block; } |
:root | 匹配文档根元素（通常是 <html>） | :root { --primary-color: #333; } |
3.10.5.伪类 vs 伪元素
| 特性 | 伪类（Pseudo-class） | 伪元素（Pseudo-element） |
|---|---|---|
| 用途 | 匹配元素的状态或位置 | 操作元素的特定部分（如首行、首字母） |
| 语法 | 单冒号 :（如 :hover） | 双冒号 ::（如 ::before） |
| 是否创建新内容 | 否（仅改变现有元素的样式） | 是（可插入生成内容，如 ::before） |
| 示例 | li:hover, input:focus | p::first-line, ::selection |
3.11伪元素选择器
操作元素的特定部分，如首行、首字母。可插入生成内容
| 伪类选择器 | 描述 |
|---|---|
::first-letter | 第一个文字 |
::firstline | 第一行文字 |
::selection | 被鼠标选中的文字 |
::before | 在某某元素之前插入 |
::after | 在某某元素之后插入 |
3.12.选择器优先级
通常情况：行内样式>ID选择器>类选择器>元素选择器>通配选择器。
复杂情况：按照ID选择器个数，类、伪类、属性选择器的个数，元素、伪元素选择器的个数依次比较优先级。相同情况覆盖。
如
特殊情况：属性值后!important。最优先
.container span.slogan{}
/*0,2,1*/
div>p>span:nth-child(1)
/*0,1,3*/4.CSS特性
- 层叠性：相同元素的相同样式会覆盖
- 继承性：元素自动拥有父元素或祖父元素所设置的某些样式，优先继承离得近的。比如
text-??、font-、line、color - 优先级：样式拥有优先级。
5.颜色
5.1. 颜色名称（Named Colors）
- CSS 预定义了 140 多个标准颜色名称（如
red,blue,black等）。 - 优点：简单易记，适合快速开发。
- 缺点：颜色范围有限，无法精确控制。
.color-example {
color: red;
background: lightblue;
}5.2. 十六进制（Hex Codes）
- 格式：
#RRGGBB或简写#RGB（每位重复一次）。 - 支持透明度：
#RRGGBBAA或#RGBA。
.hex-example {
color: #ff0000; /* 纯红色 */
background: #fff; /* 白色简写 */
border-color: #4a5b6c; /* 自定义颜色 */
opacity: 0.8; /* 整体透明度（影响子元素） */
}5.3. RGB 函数（RGB）
- 格式：
rgb(red, green, blue)，取值范围0-255。 - 支持透明度：
rgba(red, green, blue, alpha)，alpha范围0-1。
css
复制
.rgb-example {
color: rgb(255, 0, 0); /* 纯红色 */
background: rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
}5.4. HSL 函数（Hue, Saturation, Lightness）
- Hue（色相）:
0-360°（角度，如0°红色，120°绿色）。 - Saturation（饱和度）:
0-100%（百分比，控制色彩鲜艳度）。 - Lightness（亮度）:
0-100%（百分比，控制明暗）。 - 支持透明度：
hsla(hue, saturation, lightness, alpha)。
.hsl-example {
color: hsl(0, 100%, 50%); /* 纯红色 */
background: hsla(120, 100%, 50%, 0.3); /* 半透明绿色 */
}5.5. 预处理器变量（CSS Variables）
- 自定义颜色变量，提高代码复用性。
:root {
--primary-color: #2196F3;
--secondary-color: rgba(255, 152, 0, 0.8);
}
.custom-colors {
color: var(--primary-color);
border: 2px solid var(--secondary-color);
}5.6. HSLA 透明度
- 通过
hsla()实现颜色透明度的精细控制。
.overlay {
background: hsla(0, 0%, 0%, 0.5); /* 半透明黑色 */
}5.7. 字符串形式
- 直接使用颜色关键字或十六进制值作为字符串。
.string-example {
color: "red"; /* 等效于 red */
background: "#00ff00"; /* 等效于 #0f0 */
}5.8. 透明黑色（RGBA 黑色）
- 常用于遮罩层或文字阴影。
.modal-backdrop {
background: rgba(0, 0, 0, 0.7);
}5.9. 线性渐变（Linear Gradient）
- 使用
linear-gradient()创建颜色过渡。
.gradient-example {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}5.10. Lab/CIEDE2000（高级颜色模型）
- 现代浏览器支持的实验性功能，用于更精确的颜色匹配。
.lab-color {
color: color(lab(50% 60% 30%));
}注意事项
- 颜色对比度：确保文本与背景对比度符合 WCAG 标准（至少 4.5:1）。
浏览器兼容性：
hsl()和rgba()在 IE9+ 支持。color()函数（如 Lab）仅在部分现代浏览器中支持。
- 性能优化：避免过度使用复杂颜色函数（如
hsl()嵌套计算）。
总结
| 方式 | 适用场景 | 示例 |
|---|---|---|
| 十六进制 | 快速开发、简单颜色 | #ff0000 |
| RGB/RGBA | 需要透明度或编程逻辑控制 | rgba(255, 0, 0, 0.5) |
| HSL/HSLA | 动态调整明暗、饱和度（如主题切换） | hsl(0, 100%, 50%) |
| CSS 变量 | 主题化、跨组件复用 | --primary-color: #2196F3 |
| 渐变 | 背景、装饰效果 | linear-gradient(...) |
根据具体需求选择最合适的颜色表示方式，例如：
- 设计稿还原：直接使用十六进制或 RGB。
- 动态主题：优先使用 HSL 或 CSS 变量。
- 透明度需求：使用 RGBA 或 HSLA。
6.常用CSS属性
6.1.布局与盒模型
| 属性 | 描述 | 示例 |
|---|---|---|
display | 定义元素的显示类型（块级、行内、弹性、网格等） | display: flex; |
position | 定位方式（静态、相对、绝对、固定、粘性） | position: relative; |
top/right/bottom/left | 定位元素偏移量 | top: 20px; |
margin | 外边距（控制元素间距） | margin: 10px 5px; |
padding | 内边距（控制内容与边框距离） | padding: 15px; |
width/height | 元素宽高 | width: 100%; |
box-sizing | 盒模型计算方式（content-box 或 border-box） | box-sizing: border-box; |
6.2.字体与文本
| 属性 | 描述 | 示例 |
|---|---|---|
color | 文本颜色 | color: #333; |
font-size | 字体大小 | font-size: 16px; |
font-family | 字体类型 | font-family: Arial, sans-serif; |
text-align | 文本水平对齐（左、右、居中、两端对齐） | text-align: center; |
line-height | 行高 | line-height: 1.5; |
text-decoration | 文本装饰线（如下划线） | text-decoration: none; |
letter-spacing | 字符间距 | letter-spacing: 1px; |
6.3.背景与边框
| 属性 | 描述 | 示例 |
|---|---|---|
background-color | 背景颜色 | background-color: #f0f0f0; |
background-image | 背景图片 | background-image: url("img.jpg"); |
background-size | 背景图片尺寸（cover、contain） | background-size: cover; |
border | 边框（宽度、样式、颜色） | border: 1px solid #ccc; |
border-radius | 圆角半径 | border-radius: 8px; |
box-shadow | 阴影效果（水平偏移、垂直偏移、模糊、颜色） | box-shadow: 2px 2px 10px rgba(0,0,0,0.1); |
6.4.Flexbox 布局
| 属性 | 描述 | 示例 |
|---|---|---|
display: flex | 启用弹性容器 | display: flex; |
flex-direction | 主轴方向（行、列等） | flex-direction: row-reverse; |
justify-content | 主轴对齐方式（居中、两端对齐等） | justify-content: space-between; |
align-items | 交叉轴对齐方式 | align-items: center; |
flex-grow | 子元素弹性伸展比例 | flex-grow: 1; |
flex-shrink | 子元素弹性收缩比例 | flex-shrink: 0; |
6.5.Grid 布局
| 属性 | 描述 | 示例 |
|---|---|---|
display: grid | 启用网格容器 | display: grid; |
grid-template-columns | 定义列宽（如 1fr 2fr） | grid-template-columns: repeat(3, 1fr); |
gap | 网格间距 | gap: 10px; |
grid-row/grid-column | 定义子元素位置 | grid-column: 1 / 3; |
6.6.响应式与视口
| 属性 | 描述 | 示例 |
|---|---|---|
max-width | 最大宽度（防止元素过宽） | max-width: 1200px; |
min-height | 最小高度 | min-height: 300px; |
@media | 媒体查询（响应式设计） | @media (max-width: 768px) { ... } |
6.7.动态效果
| 属性 | 描述 | 示例 |
|---|---|---|
transition | 过渡效果（属性、时长、缓动函数） | transition: all 0.3s ease; |
animation | 关键帧动画（名称、时长、延迟等） | animation: slide 2s infinite; |
6.8.其他常用属性
| 属性 | 描述 | 示例 |
|---|---|---|
opacity | 透明度（0~1） | opacity: 0.8; |
visibility | 元素可见性（visible/hidden） | visibility: hidden; |
z-index | 层叠顺序（解决重叠元素的显示问题） | z-index: 10; |
cursor | 鼠标悬停样式 | cursor: pointer; |
6.9.CSS 自定义属性（变量）
:root {
--primary-color: #2196F3;
}
.element {
background: var(--primary-color);
}6.10伪类与伪元素
| 属性 | 描述 | 示例 |
|---|---|---|
content | 伪元素内容（需配合 ::before/::after） | content: "→"; |
::placeholder | 输入框占位符样式 | ::placeholder { color: gray; } |
7.元素显示模式
7.1. 块级元素（Block-level Elements）
特点：
- 独占一行：默认情况下，块级元素会从上到下独占一行，无论内容宽度是否填满父容器。
- 可设宽高：可以通过
width和height直接设置尺寸。 - 宽度默认值：若未设置宽度，默认撑满父容器的剩余空间（
width: 100%）。 - 支持内外边距：
margin和padding在四个方向均有效。
常见标签：
<div>,<p>, <h1>~<h6>, <ul>, <li>, <form>, <header>, <footer>, <section>示例：
<div style="background: lightblue;">
这是一个块级元素，默认占满整行，可以设置宽高。
</div>
<span style="background: lightgreen;">这是一个行内元素，不会独占一行。</span>6.2. 行内元素（Inline Elements）
特点：
- 不独占一行：多个行内元素会在同一行内依次排列，直到容器宽度不足才会换行。
- 不可设宽高：
width和height对行内元素无效，尺寸由内容决定。 - 宽度默认值：仅等于内容的宽度。
- 内外边距限制：
margin和padding仅在水平方向（左右）生效，垂直方向（上下）会被忽略。
常见标签：
<a>, <span>, <strong>, <em>, <img>, <br>, <input>, <button>示例：
<span style="background: pink;">行内元素 A</span>
<span style="background: yellow;">行内元素 B</span>
<!-- 两者会在同一行显示 -->6.3. 行内块元素（Inline-block Elements）
特点：
- 不独占一行：与行内元素类似，多个行内块元素会在同一行排列。
- 可设宽高：与块级元素类似，可以直接设置
width和height。 - 内外边距完整：
margin和padding在四个方向均有效，与块级元素一致。
常见标签：
<img>, <input>, <button>, <textarea>（也可以通过 display: inline-block 将普通元素转为行内块）
示例：
<div style="background: orange;" class="inline-block">行内块元素 1</div>
<div style="background: cyan;" class="inline-block">行内块元素 2</div>.inline-block {
display: inline-block;
width: 100px;
height: 50px;
}6.4.核心区别对比表
| 特性 | 块级元素 | 行内元素 | 行内块元素 |
|---|---|---|---|
| 换行 | 独占一行 | 不独占 | 不独占 |
| 宽高控制 | 支持 width/height | 不支持 | 支持 |
| 内外边距 | 四向均有效 | 水平有效，垂直无效 | 四向均有效 |
| 默认宽度 | 父容器剩余空间 | 内容宽度 | 由内容或 width 决定 |
| 典型用途 | 页面布局、结构划分 | 文本内嵌元素 | 灵活排列且需尺寸控制的元素 |
6.5.如何切换显示类型
通过 display 属性可以强制转换元素的显示类型：
.element {
display: block; /* 转为块级元素 */
display: inline; /* 转为行内元素 */
display: inline-block; /* 转为行内块元素 */
}示例：
<span style="display: block; background: gray;">被转为块级的 span</span>
<div style="display: inline; background: brown;">被转为行内的 div</div>6.6.注意事项
- 块级元素嵌套规则：块级元素可以包含行内元素或其他块级元素，但行内元素不能直接包含块级元素。
- 图片默认行为：
<img>是行内块元素，因此可以直接设置宽高，无需额外转换。 - 清除默认样式：部分块级元素（如
ul、p）有默认外边距或内边距，需用margin: 0; padding: 0;重置。
8.盒子模型
8.1.盒子模型的组成
每个元素被视为一个矩形盒子，包含四个部分：
内容区域（Content）
- 元素的实际内容（文本、图片等）。
- 由
width和height定义尺寸。
内边距（Padding）
- 内容与边框之间的空白区域。
- 由
padding-top、padding-right、padding-bottom、padding-left控制。
边框（Border）
- 包围内边距和内容的线框。
- 由
border-width、border-style、border-color定义。
外边距（Margin）
- 元素与其他元素之间的空白区域。
- 由
margin-top、margin-right、margin-bottom、margin-left控制。
8.2.总宽高的计算
盒子的总宽高由以下公式计算：
总宽度 = width + padding-left + padding-right + border-left-width + border-right-width
总高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width关键属性：box-sizing
content-box（默认值）width和height仅包含内容区域，不包含padding和border。
示例：.box { width: 200px; padding: 20px; border: 5px solid black; box-sizing: content-box; /* 总宽度 = 200 + 20 * 2 + 5 * 2 = 250px */ }border-boxwidth和height包含内容、padding和border，内容区域会缩小。
示例：.box { width: 200px; padding: 20px; border: 5px solid black; box-sizing: border-box; /* 总宽度固定为 200px，内容宽度 = 200 - (20 * 2 + 5 * 2) = 150px */ }
推荐实践：全局设置 box-sizing: border-box 以简化布局计算：
*, *::before, *::after {
box-sizing: border-box;
}8.3.外边距折叠（Margin Collapsing）
在垂直方向上，相邻的两个块级元素的外边距会合并为一个较大的外边距，取两者中的较大值。
触发条件
- 相邻的兄弟元素。
- 父元素与第一个/最后一个子元素（无
padding或border隔开）。 - 空块级元素（无内容、
padding、border）。
解决方法
- 为父元素添加
padding或border。 - 使用
overflow: hidden或float触发 BFC（块级格式化上下文）。 - 设置
margin为0。
8.4.内边距与边框的影响
- 内容区域缩小：
若未使用border-box，padding和border会增加元素总尺寸，导致内容区域被压缩。 - 背景渲染：
background-color会覆盖content、padding和border区域。
8.5.实际应用示例
按钮样式
.button {
display: inline-block;
padding: 12px 24px;
border: 2px solid #333;
background: #f0f0f0;
margin: 10px; /* 外边距控制按钮间距 */
box-sizing: border-box; /* 确保宽高包含所有部分 */
}响应式布局
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto; /* 居中 */
padding: 20px;
box-sizing: border-box; /* 总宽度始终 ≤ 1200px */
}8.6.总结
| 特性 | 内容（content） | 内边距（padding） | 边框（border） | 外边距（margin） |
|---|---|---|---|---|
| 作用 | 显示元素的核心内容 | 控制内容与边框距离 | 定义元素边界 | 控制元素间间距 |
| 是否影响总尺寸 | 否（除非 box-sizing） | 是 | 是 | 是 |
| 默认值 | 由内容决定 | 0 | none | 0 |
| 常用场景 | 文本、图片 | 按钮内边距 | 卡片边框 | 页面边距 |
元素空白问题：
行内元素和行内块元素之间会存在空白间隙
<div>
<span>1</span><!-- 取消换行也行 -->
<span>1</span>
<span>1</span>
</div>
<style>
div {
font-size: 0px /*设置字体为0*/
}
span {
font-size: 10px
}
</style>行内块的幽灵空白问题
行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的。
- 方案一：给行内块设置
vertical，值不为baseline即可，设置为middel、bottom、top均可 - 方案二：若父元素中只有一张图片，设置图片为
display:block。 - 方案三：给父元素设置
font-size:0。再单独设置其他文本。
9.浮动
9.1.浮动的核心概念
1. 基本定义
float属性：用于将元素向左（left）或向右（right）移动，使其脱离正常文档流，其他内容围绕其排列。- 初始值：
none（元素不浮动）。
2. 语法
.element {
float: left | right | none;
}9.2.浮动的行为特性
1. 脱离文档流
- 浮动元素不再占据原文档流的位置，其他块级元素会忽略其存在，但行内元素会围绕它排列。
示例：文本环绕图片（经典用法）。
<img src="image.jpg" style="float: left; margin: 10px;"> <p>文本内容会环绕在图片右侧...</p>
2. 宽高影响
- 浮动元素的宽高由其内容或显式设置的
width/height决定。 - 默认宽度：若未设置宽度，浮动元素宽度为内容宽度。
3. 父容器高度塌陷
- 问题：当父容器仅包含浮动元素时，其高度会塌陷为
0。 - 原因：浮动元素脱离文档流，父容器无法感知其高度。
解决方案：
方法 1：添加清除浮动元素
<div class="parent"> <div class="float-left"></div> <div class="float-left"></div> <div style="clear: both;"></div> <!-- 清除浮动 --> </div>方法 2：使用伪元素清除浮动（推荐）
.parent::after { content: ""; display: table; clear: both; }方法 3：触发 BFC（块级格式化上下文）
.parent { overflow: hidden; /* 或 float、position 等 */ }
9.3.浮动的应用场景
1. 多栏布局
经典两列布局：左侧固定宽度，右侧自适应。
<div class="container"> <div class="left-column" style="float: left; width: 200px;">左侧内容</div> <div class="right-column">右侧内容自适应</div> </div>.right-column { margin-left: 200px; /* 为左侧留出空间 */ }
2. 图文混排
图片环绕文字：通过
img { float: left; margin: 0 10px 10px 0; }
3. 旧版布局替代方案
- 在 Flexbox/Grid 出现前，浮动是实现复杂布局的主要手段（现已被取代）。
9.4.浮动的常见问题与解决
1. 元素间隙问题
- 现象：浮动元素间因换行符产生空白间隙。
- 原因：空白字符（空格、换行）被渲染为小间隙。
解决方案：
- 移除 HTML 中的多余空格或换行。
设置父元素，再重置子元素字体大小。
font-size: 0.parent { font-size: 0; } .child { font-size: 16px; /* 恢复子元素字体 */ }
2. 父容器高度塌陷
- 参见上文解决方案（清除浮动或触发 BFC）。
3. 元素覆盖问题
- 现象：浮动元素可能覆盖其他非浮动元素。
- 解决：调整
z-index或避免过度嵌套。
10.定位
10.1. 静态定位（static）
- 默认值：所有元素均为静态定位。
特点：
- 元素按正常文档流排列。
top/right/bottom/left无效。
示例：
.element { position: static; /* 可省略 */ }
10.2. 相对定位（relative）
特点
- 元素相对于其正常位置偏移（通过
top/right/bottom/left）。 - 不脱离文档流，其他元素仍按原位置排列。
- 可作为定位上下文（子元素的
absolute会相对于它）。
- 元素相对于其正常位置偏移（通过
示例
.box { position: relative; top: 20px; /* 向下偏移 20px */ left: 30px; /* 向右偏移 30px */ }
10.3. 绝对定位（absolute）
特点：
- 元素脱离文档流，相对于最近的已定位祖先（
position值非static的祖先）定位。 - 若无已定位祖先，则相对于初始包含块（通常是
<html>或视口）。 - 需配合
top/right/bottom/left使用。
- 元素脱离文档流，相对于最近的已定位祖先（
应用场景：
- 弹窗、下拉菜单、遮罩层。
示例：
.parent { position: relative; /* 成为定位上下文 */ } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 居中 */ }
10.4. 固定定位（fixed）
特点：
- 元素脱离文档流，相对于视口（viewport） 定位。
- 滚动页面时位置不变。
- 常用于导航栏、侧边栏、返回顶部按钮。
注意事项：
- 移动端视口需设置
<meta name="viewport">。
- 移动端视口需设置
示例：
.fixed-nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; /* 确保在最上层 */ }
10.5. 粘性定位（sticky）
特点：
- 元素在滚动时在特定阈值前保持相对定位，超过后变为固定定位。
- 需设置
top/right/bottom/left阈值。
应用场景：
- 吸顶导航栏、表格表头固定。
示例：
.sticky-header { position: sticky; top: 0; background: white; }
10.6.定位上下文（Containing Block）
- 定义：元素定位的参考容器。
如何确定：
- 根元素（
<html>）的包含块是视口。 - 普通元素的包含块由其最近的块级祖先的
content区域决定。 - 绝对定位元素的包含块由最近的已定位祖先（
position: relative/absolute/fixed/sticky）决定。
- 根元素（
10.7.偏移属性（top/right/bottom/left）
- 作用：指定元素相对于其定位上下文的偏移量。
- 取值：
length（如20px）、percentage（相对于包含块宽度/高度）。 注意：
- 若同时设置
top和bottom，仅生效其中一个（取决于布局）。 - 百分比值在绝对定位中基于包含块尺寸，相对定位中基于自身尺寸。
- 若同时设置
10.8.层叠顺序（z-index）
- 作用：控制定位元素的堆叠顺序（谁在上层）。
规则：
- 正值比负值上层。
- 数值越大，层级越高。
- 父元素的
z-index会影响子元素层级。
注意：
- 仅对定位元素（
relative/absolute/fixed/sticky）有效。 - 避免过度依赖
z-index，可能导致维护困难。
- 仅对定位元素（
10.9.常见布局场景
1. 固定侧边栏
.sidebar {
position: fixed;
right: 0;
top: 0;
width: 250px;
height: 100vh;
}2. 居中弹窗
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}3. 粘性吸顶
.header {
position: sticky;
top: 0;
background: #fff;
z-index: 100;
}10.10注意事项
- 避免过度使用
absolute/fixed：
过度脱离文档流可能导致布局混乱，优先考虑 Flexbox/Grid。 - 父容器高度塌陷：
绝对定位元素会导致父容器高度塌陷，需用padding/margin或伪元素清除。 - 移动端兼容性：
position: fixed在 iOS 的软键盘弹出时可能异常，需特殊处理。 - 响应式设计：
固定定位元素在移动端可能遮挡内容，需结合媒体查询调整。
10.11总结
| 定位类型 | 脱离文档流 | 定位参考 | 典型用途 |
|---|---|---|---|
static | 否 | 正常文档流 | 默认布局 |
relative | 否 | 自身正常位置 | 微调元素位置 |
absolute | 是 | 最近的已定位祖先 | 弹窗、下拉菜单 |
fixed | 是 | 视口 | 固定导航栏、返回顶部按钮 |
sticky | 条件性脱离 | 视口或父容器阈值 | 吸顶导航栏、表格表头 |
11.常用布局名词
11.1语义化类名
| 位置 | 名词 |
|---|---|
| 顶部导航条 | topbar |
| 页头 | header、page-header |
| 导航 | nav、navigator、navbar |
| 搜索框 | search、search-box |
| 横幅、广告、宣传图 | banner |
| 主要内容 | content、main |
| 侧边栏 | aside、sidebar |
| 页脚 | footer、page-footer |
| 类名 | 用途 | 示例（HTML） |
|---|---|---|
.header | 页面头部 | <header class="header">...</header> |
.footer | 页面底部 | <footer class="footer">...</footer> |
.main-content | 主要内容区域 | <main class="main-content">...</main> |
.sidebar | 侧边栏 | <aside class="sidebar">...</aside> |
.card | 卡片式布局容器 | <div class="card">...</div> |
11.2.基础布局类
| 类名 | 用途 | 示例（CSS） |
|---|---|---|
.container | 页面或区域的容器，通常用于限制宽度并居中 | max-width: 1200px; margin: 0 auto; |
.wrapper | 包裹内容的通用容器 | padding: 20px; |
.row | Flexbox/Grid 中的行容器，用于水平排列子元素 | display: flex; flex-wrap: wrap; |
.col | 列容器，用于垂直排列内容 | flex: 1; |
.cell | 网格单元格（Grid 布局） | grid-area: 1 / 1 / 2 / 3; |
11.3.Flexbox 布局类
| 类名 | 用途 | 示例（CSS） |
|---|---|---|
.flex | 启用 Flexbox 布局 | display: flex; |
.flex-row | 水平方向排列（默认） | flex-direction: row; |
.flex-col | 垂直方向排列 | flex-direction: column; |
.flex-center | 子元素水平和垂直居中 | justify-content: center; align-items: center; |
.flex-gap-* | 设置子元素间距（如 .flex-gap-20 表示 20px） | gap: 20px; |
.flex-fill | 子元素填充剩余空间 | flex: 1; |
.flex-basis-* | 设置子元素初始宽度（如 .flex-basis-200 表示 200px） | flex-basis: 200px; |
11.4.Grid 布局类
| 类名 | 用途 | 示例（CSS） |
|---|---|---|
.grid | 启用 Grid 布局 | display: grid; |
.grid-cols-* | 定义列数（如 .grid-cols-3 表示 3 列） | grid-template-columns: repeat(3, 1fr); |
.grid-rows-* | 定义行高（如 .grid-rows-100 表示每行 100px） | grid-template-rows: 100px; |
.grid-gap-* | 设置网格间距（如 .grid-gap-15 表示 15px） | gap: 15px; |
.grid-item-* | 定义网格项的位置（如 .grid-item-span-2 表示跨越 2 列） | grid-column: span 2; |
11.5.响应式布局类
| 类名 | 用途 | 示例（CSS） |
|---|---|---|
.responsive | 响应式容器（结合媒体查询） | @media (max-width: 768px) { ... } |
.mobile-hidden | 在移动端隐藏元素 | @media (max-width: 768px) { display: none; } |
.desktop-only | 仅在桌面端显示 | @media (min-width: 769px) { display: block; } |
.sm-*/.md-*/.lg-* | 不同屏幕尺寸的适配类（如 .sm-col-6 表示小屏幕下的 6 列） | grid-template-columns: repeat(6, 1fr); |
11.6.定位相关类
| 类名 | 用途 | 示例（CSS） |
|---|---|---|
.relative | 设置 position: relative | position: relative; |
.absolute | 设置 position: absolute | position: absolute; |
.fixed | 设置 position: fixed | position: fixed; |
.sticky | 设置 position: sticky | position: sticky; top: 0; |
.z-index-* | 控制层叠顺序（如 .z-index-10） | z-index: 10; |
11.7.实用工具类（Utility Classes）
| 类名 | 用途 | 示例（CSS） |
|---|---|---|
.m-0/.p-10 | 设置外边距/内边距（如 .m-0 表示 margin: 0） | margin: 0; |
.w-100/.h-50 | 设置宽高（如 .w-100 表示 width: 100%） | width: 100%; |
.text-center | 文本居中 | text-align: center; |
.bg-primary | 背景色（需配合 CSS 变量） | background: var(--primary); |
.overflow-hidden | 隐藏溢出内容 | overflow: hidden; |
12.重置默认样式
12.1.快速重置（通用方法）
通过通配符选择器 * 重置所有元素的 margin 和 padding，并统一盒模型：
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 统一盒模型为 border-box */
}
html, body {
width: 100%;
height: 100%;
}优点：简单快捷。
缺点：可能过度重置（如列表、标题等元素的默认样式未被处理）。
12.2.经典 Reset CSS（Eric Meyer 重置）
更全面的重置方案，覆盖更多元素：
/* Eric Meyer's Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}优点：覆盖更多默认样式，适合复杂项目。
缺点：可能移除一些有用样式（如标题的加粗、列表符号）。
12.3.现代重置（Normalize.css）
Normalize.css 是一个更温和的重置方案，保留有用的默认样式，同时修复浏览器兼容性问题。
使用方法：直接通过 CDN 引入：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">优点：平衡了跨浏览器一致性和保留默认样式。
缺点：需额外引入外部文件。
12.4.选择性重置（按需调整）
根据项目需求，仅重置部分元素：
/* 重置 body、标题、段落、列表 */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li {
margin: 0;
padding: 0;
}
/* 重置链接默认样式 */
a {
text-decoration: none;
color: inherit;
}
/* 重置表格默认样式 */
table {
border-collapse: collapse;
border-spacing: 0;
}优点：灵活控制，减少不必要的重置。
缺点：需手动维护。
12.5.结合 CSS 变量（现代实践）
在重置基础上定义全局变量，方便后续统一调整：
:root {
--font-family: 'Arial', sans-serif;
--spacing-unit: 8px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-family);
}
body {
line-height: 1.5;
padding: calc(var(--spacing-unit) * 2);
}13.CSS3特性
13.1.布局与盒模型
13.1.1. Flexbox 弹性布局
| 属性 | 作用与常用值 | 示例 |
|---|---|---|
display | 定义弹性容器：flex（块级）、inline-flex（行内） | display: flex; |
flex-direction | 主轴方向：row（默认）、column（垂直）、row-reverse、column-reverse | flex-direction: column; |
justify-content | 主轴对齐：flex-start、center、space-between、space-around | justify-content: space-between; |
align-items | 交叉轴对齐：stretch（默认）、center、flex-start | align-items: center; |
flex-wrap | 换行方式：nowrap（默认）、wrap、wrap-reverse | flex-wrap: wrap; |
完整示例：
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px; /* 子项间距 */
}13.1.2. Grid 网格布局
| 属性 | 作用与常用值 | 示例 |
|---|---|---|
display | 定义网格容器：grid、inline-grid | display: grid; |
grid-template-columns | 列定义：repeat(3, 1fr)（等宽三列）、100px auto 20% | grid-template-columns: 1fr 2fr; |
grid-template-rows | 行定义：100px minmax(200px, auto) | grid-template-rows: 100px auto; |
gap | 网格间距：10px（行列统一）、10px 20px（行 10px，列 20px） | gap: 20px; |
grid-area | 子项定位：grid-row: 1/3; grid-column: 2/4; | 见下方示例 |
完整示例：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px auto;
gap: 10px;
}
.item {
grid-column: 1 / 3; /* 跨两列 */
grid-row: 1;
}13.2、选择器与伪类
13.2.1. 属性选择器
| 选择器 | 匹配规则 | 示例 |
|---|---|---|
[attr] | 包含指定属性的元素 | input[required]（选择必填输入框） |
[attr="value"] | 属性值完全匹配 | a[target="_blank"]（新窗口打开的链接） |
[attr^="value"] | 属性值以 value 开头 | a[href^="https"]（选择 HTTPS 链接） |
[attr$="value"] | 属性值以 value 结尾 | img[src$=".png"]（选择 PNG 图片） |
[attr*="value"] | 属性值包含 value 子字符串 | div[class*="box"]（类名含 "box" 的 div） |
13.2. 伪类与伪元素
| 选择器 | 作用 | 示例 |
|---|---|---|
:nth-child(n) | 选择第 n 个子元素 | li:nth-child(2n)（偶数行列表项） |
:hover | 鼠标悬停状态 | button:hover { background: #eee; } |
:focus | 输入框聚焦状态 | input:focus { border-color: blue; } |
::before/::after | 插入内容到元素前/后 | .tip::before { content: "⚠️ "; } |
13.3.动画与过渡
13.3.1 Transition 过渡
| 属性 | 作用 | 示例 |
|---|---|---|
transition-property | 指定过渡属性（如 all、opacity） | transition-property: transform; |
transition-duration | 过渡持续时间（单位：s 或 ms） | transition-duration: 0.3s; |
transition-timing-function | 速度曲线：ease（默认）、linear、cubic-bezier() | transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
| 简写 | transition: property duration timing-function delay; | transition: all 0.3s ease; |
13.3.2. Animation 动画
| 属性 | 作用 | 示例 |
|---|---|---|
@keyframes | 定义动画关键帧 | `@keyframes slide { |
| from { transform: translateX(-100%); } | ||
| to { transform: translateX(0); } | ||
}` | ||
animation-name | 指定动画名称 | animation-name: slide; |
animation-duration | 动画持续时间 | animation-duration: 1s; |
animation-iteration-count | 播放次数：infinite（循环）、2（固定次数） | animation-iteration-count: infinite; |
| 简写 | animation: name duration timing-function delay iteration-count direction; | animation: slide 1s ease infinite; |
13.4.视觉效果
13.4.1. 变形（Transform）
| 属性 | 作用 | 示例 |
|---|---|---|
translate() | 平移：translateX(50px)、translateY(20%) | transform: translate(10px, -50%); |
rotate() | 旋转：rotate(45deg)（顺时针）、rotate(-90deg) | transform: rotate(45deg); |
scale() | 缩放：scale(1.2)（放大 1.2 倍） | transform: scale(0.8); |
skew() | 倾斜：skew(20deg, 10deg) | transform: skew(15deg); |
13.4.2. 渐变与阴影
| 属性 | 作用 | 示例 |
|---|---|---|
linear-gradient() | 线性渐变 | background: linear-gradient(45deg, #ff6b6b, #4ecdc4); |
box-shadow | 盒子阴影：水平偏移 垂直偏移 模糊半径 颜色 | box-shadow: 2px 2px 10px rgba(0,0,0,0.1); |
text-shadow | 文字阴影 | text-shadow: 1px 1px 2px #000; |
13.5.响应式设计
13.5.1. 媒体查询（Media Queries）
/* 手机端样式 */
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
/* 深色模式 */
@media (prefers-color-scheme: dark) {
body {
background: #333;
color: white;
}
}13.5.2. 视口单位
| 单位 | 说明 | 示例 |
|---|---|---|
vw | 视口宽度的 1%（Viewport Width） | width: 100vw;（铺满屏幕宽度） |
vh | 视口高度的 1%（Viewport Height） | height: 50vh;（视口高度的一半） |
vmin/vmax | 取视口宽高中较小/较大值的 1% | font-size: 4vmin;（适应移动端） |
13.6.性能优化
硬件加速：
.element { transform: translateZ(0); /* 触发 GPU 加速 */ }- 减少重绘：
使用 transform 和 opacity 做动画（避免修改 width、margin）。
- CSS 压缩：
使用工具（如 PostCSS、cssnano）压缩生产环境代码。
13.7.兼容性处理
前缀适配：
.element { -webkit-transition: all 0.3s; /* Chrome/Safari */ -moz-transition: all 0.3s; /* Firefox */ transition: all 0.3s; }特性检测：
@supports判断浏览器是否支持某特性：
@supports (display: grid) { .container { display: grid; } }
14.BFC
BFC（Block Formatting Context，块级格式化上下文）是 CSS 渲染中的一个独立布局环境。它规定了内部块级元素的排列规则，且 BFC 内外的元素互不影响。
14.1.触发 BFC 的条件
满足以下任一条件即可触发 BFC：
- 根元素（
<html>）。 - 浮动元素：
float值不为none。 - 绝对定位元素：
position为absolute或fixed。 - 非块级容器：
display为inline-block、table-cell、flex等。 - Overflow 属性：
overflow值不为visible（如auto、hidden）。 - CSS3 新属性：
display: flow-root（无副作用的 BFC 触发方式）。
14.2.BFC 的核心作用
防止外边距合并（Margin Collapse）
- 问题：相邻块级元素的上下外边距会合并（取最大值）。
解决：将其中一个元素包裹在 BFC 容器中。
<div style="overflow: auto;"> <div style="margin: 20px;">内容</div> </div>
包含浮动元素
- 问题：父元素高度塌陷（子元素浮动后父元素高度为 0）。
解决：父元素触发 BFC，自动计算浮动元素高度。
.parent { overflow: auto; /* 触发 BFC */ } .child { float: left; }
阻止元素被浮动覆盖
- 问题：非浮动元素与浮动元素重叠。
解决：非浮动元素触发 BFC，独占一行。
.non-float { overflow: hidden; /* 触发 BFC */ }
14.3.BFC 应用场景
清除浮动
<div class="parent" style="overflow: auto;"> <div class="child" style="float: left;"></div> </div>2. 自适应两栏布局
<div style="float: left; width: 200px;">左栏</div> <div style="overflow: hidden;">右栏（自适应宽度）</div>3. 避免外边距穿透
<div style="overflow: auto;"> <div style="margin-top: 50px;">内部元素</div> </div> <div>外部元素</div> <!-- 外边距不再合并 -->
14.4.最佳实践
优先使用
display: flow-root：
无副作用（如滚动条），专为触发 BFC 设计。.container { display: flow-root; }- 避免滥用
overflow: hidden：可能导致内容被裁剪或意外滚动条。
