【CSS系统化学习】 - 盒模型与文本属性 第三部分：盒模型与文本属性3. 盒模型盒模型是CSS布局的核心概念，它定义了元素的内容、填充、边框和边距之间的关系。边框（border）作用：设置元素的边框样式、宽度和颜色。语法：.box { border: 2px solid #000; /* 宽度 | 样式 | 颜色 */ }细分属性：border-width：边框宽度。border-style：边框样式（如solid, dashed, dotted）。border-color：边框颜色。填充（padding）作用：设置元素内容与边框之间的空间。语法：.box { padding: 10px; /* 上下左右 */ padding: 10px 20px; /* 上下 | 左右 */ padding: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */ }注意：填充会增加元素的尺寸。边距（margin）作用：设置元素与其他元素之间的空间。语法：.box { margin: 10px; /* 上下左右 */ margin: 10px 20px; /* 上下 | 左右 */ margin: 10px 20px 30px 40px; /* 上 | 右 | 下 | 左 */ }注意：负边距可用于重叠元素。盒模型计算标准盒模型：width和height仅包含内容区域。替代盒模型：width和height包含内容、填充和边框。.box { box-sizing: border-box; /* 启用替代盒模型 */ }4. 文本属性文本属性用于控制文本的样式和布局。字体系列（font-family）作用：设置文本的字体。语法：body { font-family: "Arial", sans-serif; }注意：提供备用字体以确保兼容性。字体大小（font-size）作用：设置文本的大小。语法：h1 { font-size: 24px; }常用单位：px, em, rem, %。字体粗细（font-weight）作用：设置文本的粗细。语法：.bold-text { font-weight: bold; /* 或数值如700 */ }文字颜色（color）作用：设置文本的颜色。语法：p { color: #333; }行高（line-height）作用：设置文本行之间的间距。语法：p { line-height: 1.5; /* 无单位表示倍数 */ }文本对齐方式（text-align）作用：设置文本的水平对齐方式。语法：.center-text { text-align: center; }文本装饰（text-decoration）作用：设置文本的装饰线（如下划线、删除线）。语法：a { text-decoration: none; /* 去除下划线 */ }文本转换（text-transform）作用：控制文本的大小写。语法：.uppercase { text-transform: uppercase; /* 大写 */ }

【CSS系统化学习】- CSS选择器 2. CSS选择器以下是CSS中常用的选择器及其示例：元素选择器作用：通过HTML标签名选择元素。语法：p { font-size: 16px; }示例：选中所有<p>标签并设置字体大小。类选择器作用：通过类名（class）选择元素。语法：.warning { color: #ff0000; border: 1px solid red; }示例：选中所有class="warning"的元素并设置红色文本和边框。注意：一个元素可以有多个类（如class="button primary"）。ID选择器作用：通过唯一ID（id）选择元素。语法：#header { background-color: #333; padding: 20px; }示例：选中id="header"的元素并设置背景颜色。注意：ID在页面中应是唯一的。属性选择器作用：根据元素的属性或属性值选择元素。语法：/* 选中包含title属性的元素 */ [title] { cursor: help; } /* 选中type="text"的输入框 */ input[type="text"] { border: 1px solid #ccc; }示例：为所有带有title属性的元素添加帮助光标。伪类选择器作用：选择元素的特定状态（如悬停、聚焦等）。语法：/* 悬停状态 */ a:hover { text-decoration: underline; } /* 第一个子元素 */ li:first-child { font-weight: bold; } /* 无效的输入框 */ input:invalid { border-color: red; }常见伪类：:hover, :active, :focus, :nth-child(n), :not(selector)。伪元素选择器作用：为元素的特定部分添加样式（如首行、首字母等）。语法：/* 段落的首字母 */ p::first-letter { font-size: 24px; } /* 元素内容前插入内容 */ .note::before { content: "⚠️ "; } /* 选中被用户选中的文本 */ ::selection { background: yellow; }常见伪元素：::before, ::after, ::first-line, ::placeholder。注意：伪元素使用双冒号（::），伪类用单冒号（:）。组合使用示例/* 类选择器 + 伪类 */ .button:hover { opacity: 0.8; } /* 后代选择器 */ nav ul li { list-style: none; } /* 子选择器 */ .container > .item { margin: 10px; }总结 CSS选择器是控制样式作用范围的核心工具，合理使用可大幅提升代码复用性和维护性。

PHP版本演进与核心特性解析：从PHP 5到PHP 8的技术革新 探索PHP从5.3到8.3的版本演进，解析各版本核心特性与性能优化。涵盖命名空间、JIT编译器、类型系统等关键改进，提供版本升级建议与最佳实践，助您掌握现代PHP开发。

DcatAdmin 中 $form->saving() 与 $form->saved() 的区别及实战示例 核心区别方法触发时机可修改表单值数据持久化状态$form->saving()表单提交后，数据保存到数据库前触发✔️ 生效尚未保存到数据库$form->saved()表单数据成功保存到数据库后触发❌ 需手动处理已生成完整模型数据使用场景对比1. $form->saving() - 保存前干预典型场景：修改即将存储的原始数据 特点：直接修改表单输入值，最终会随表单提交保存到数据库$form->saving(function (Form $form) { // 直接修改表单字段值（生效） $form->input('price', $form->input('price') * 0.8); // 自动打8折 // 或通过模型属性修改（需模型已实例化） if ($form->model()->exists) { $form->model()->slug = Str::slug($form->title); } });2. $form->saved() - 保存后处理典型场景：基于已存储数据的后续操作 注意：此时修改模型数据需手动保存，且要避免无限循环$form->saved(function (Form $form) { // 获取已保存的模型实例 $model = $form->model(); // 修改数据需显式保存 $model->update_count += 1; $model->save(); // 必须手动调用 // 典型场景：关联操作/异步任务 Log::info('数据更新', $model->toArray()); dispatch(new SendUpdateNotification($model)); });常见问题示例Q：为什么在 saved() 中修改数据无效？错误示范：$form->saved(function (Form $form) { $form->model()->price = 100; // 未调用 save() });修正方案：$form->saved(function (Form $form) { $model = $form->model(); $model->price = 100; $model->save(); // 必须显式保存 });最佳实践建议数据预处理优先使用 saving()字段格式化自动生成 slug计算衍生字段值后置操作使用 saved()写入操作日志清理缓存触发异步任务避免循环触发 在 saved() 中保存模型时添加条件判断：$form->saved(function (Form $form) { if ($form->model()->isDirty()) { // 检查是否有修改 $form->model()->save(); } });通过合理运用这两个回调，可以实现表单数据处理的全生命周期管理。关键要牢记：saving 管存前加工，saved 管存后跟进。

【CSS系统化学习】- 基础部分 # CSS基础入门：样式引入与核心概念---## 一、CSS的三种引入方式### 1. 内联样式 **适用场景**：快速调试单个元素的样式 **语法**：直接在HTML标签中使用`style`属性 **示例**： ```html内联样式示例文本``` **缺点**：难以维护，无法复用样式规则。---### 2. 内部样式表 **适用场景**：单页面样式管理 **语法**：在HTML文件的``标签内添加``块 **示例**： ```html body { background-color: #f0f0f0; } h1 { color: blue; text-align: center; } 内部样式表示例标题 ``` **优点**：页面级样式隔离，避免污染全局样式。---### 3. 外部样式表 **适用场景**：多页面共享样式 **语法**：通过``标签引入独立的`.css`文件 **示例**： **styles.css**： ```css .container { max-width: 1200px; margin: 0 auto; } ``` **index.html**： ```html 内容区域 ``` **优势**： - 代码复用性强 - 便于团队协作 - 浏览器缓存优化性能---## 二、样式优先级规则 | 引入方式 | 优先级 | 作用范围 | |----------------|--------|----------| | 内联样式 | 最高 | 单个元素 | | 内部样式表 | 中 | 当前页面 | | 外部样式表 | 低 | 全局 |**冲突解决**： 当多个样式规则冲突时，优先级遵循： `!important > 内联样式 > ID选择器 > 类选择器 > 元素选择器`---## 三、最佳实践建议 1. **开发环境**：使用外部样式表便于维护 2. **生产环境**：压缩CSS文件（如`styles.min.css`） 3. **调试技巧**：通过浏览器开发者工具实时修改样式