标签 HTML 下的文章 - 枉自朝朝暮暮

标签搜索

枉自朝朝暮暮

累计撰写 12 篇文章
累计收到 1 条评论

搜索到 1 篇与的结果

2023-05-01
【学习笔记】HTML和CSS基础 HTML1.1 浏览器浏览器内核名称核心技术架构开发者/维护方Google ChromeBlink（Chromium）基于 WebKit 分支，多进程架构Google（开源项目）Microsoft EdgeBlink（Chromium）同 Chrome，基于 Chromium 代码库MicrosoftMozilla FirefoxGecko独立渲染引擎，支持 Rust 和 WebAssemblyMozilla 基金会Apple SafariWebKit / Nitro基于 WebKit，JIT 编译优化AppleOperaBlink（Chromium）同 Chrome，基于 Chromium 代码库Opera Software ASA360/UC 浏览器Trident + Blink双核模式（兼容 IE + Chromium）奇虎 360/UCWeb性能对比指标BlinkGeckoWebKit页面加载速度⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐JavaScript 性能⭐⭐⭐⭐⭐ (V8)⭐⭐⭐⭐ (SpiderMonkey)⭐⭐⭐ (Nitro)CSS 支持⭐⭐⭐⭐⭐（最新标准）⭐⭐⭐⭐⭐（严格模式）⭐⭐⭐⭐（部分滞后）内存占用⭐⭐（较高）⭐⭐⭐（中等）⭐⭐⭐⭐（较低）标准兼容性⭐⭐⭐⭐⭐⭐⭐⭐⭐（先锋）⭐⭐⭐（保守）1.2 HTML简介HTML全称HyperText Markup Language，超文本标记语言，超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。标签名不区分大小写，建议小写。参考资料：https://www.w3school.com.cn/<!DOCTYPE html> <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>1.3.2字符编码<meta charset="UTF-8"> 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见下方响应式设计示例 <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>属性名枚举值/用法示例说明注意事项methodGET（数据附加到 URL） POST（数据在请求体中）表单提交的 HTTP 方法。GET 适合非敏感数据POST 适合文件上传或敏感信息。enctypeapplication/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 标签，需通过以下代码启用：语义化优先替代 <div class="header"> 为 <header>，提升 SEO 和可访问性。使用 <picture> 和 srcset 适配不同设备分辨率。表单验证结合 HTML5 原生验证（如 required、pattern）与 JS 自定义逻辑。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 语法。CSS1.样式编写方式行内：<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. 特殊场景伪类选择器描述示例:targetURL 锚点指向的元素（如 #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:focusp::first-line, ::selection3.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() 嵌套计算）。总结方式适用场景示例十六进制快速开发、简单颜色#ff0000RGB/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-sizingcontent-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）是是是默认值由内容决定0none0常用场景文本、图片按钮内边距卡片边框页面边距元素空白问题：行内元素和行内块元素之间会存在空白间隙<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;.rowFlexbox/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: relativeposition: relative;.absolute设置 position: absoluteposition: absolute;.fixed设置 position: fixedposition: fixed;.sticky设置 position: stickyposition: 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-reverseflex-direction: column;justify-content主轴对齐：flex-start、center、space-between、space-aroundjustify-content: space-between;align-items交叉轴对齐：stretch（默认）、center、flex-startalign-items: center;flex-wrap换行方式：nowrap（默认）、wrap、wrap-reverseflex-wrap: wrap;完整示例：.container { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; /* 子项间距 */ }13.1.2. Grid 网格布局属性作用与常用值示例display定义网格容器：grid、inline-griddisplay: 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.BFCBFC（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：可能导致内容被裁剪或意外滚动条。
- 2023年05月01日
- 121 阅读
- 0 评论
- 0 点赞