- 博客(621)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 SQL每日一题挑战计划
2021/4/1 查询"01"课程比"02"课程成绩高的学生的信息及课程分数-- 1、查询"01"课程比"02"课程成绩高的学生的信息及课程分数 -- 确定学生的信息在Student表中，课程的分数在Course表中select a.* ,b.s_score as 01_score,c.s_score as 02_score from student a join score b on a.s_id=b.s_id and b.c_id='01'join score c on a.s_id=c.
2021-04-01 10:16:10
865
原创 CSS 中「继承属性」的核心知识，包括哪些属性可继承、继承的规则、如何控制继承（继承/取消继承）
CSS 继承是指「子元素自动沿用父元素的某些样式属性值」，无需重复设置——比如给<body>设置，页面中所有文字元素（<p><span><li>等）都会自动继承这个字体大小，减少重复代码。核心可继承属性：文字/字体相关（font-*colortext-*）、列表相关（）、光标（cursor不可继承属性：盒模型（宽高/边距/边框）、布局（display/flex）、背景（background）；控制继承的关键字inherit：强制继承（如让子元素继承父背景色）；initial：取消继承，恢复默认值；
2026-01-13 17:17:26
588
原创 CSS 中 px、%、vh、vw 这四种常用单位的区别
px是「像素」的缩写，是屏幕显示的最小单位，尺寸固定不变（比如 1px 就是屏幕上的一个点），是最基础的 CSS 单位。是「百分比」，尺寸相对于父元素的对应属性计算（比如子元素宽度 50% = 父元素宽度 × 50%）。vw：视口宽度（Viewport Width），1vw = 屏幕可视区域宽度 × 1%；vh：视口高度（Viewport Height），1vh = 屏幕可视区域高度 × 1%；固定尺寸用px（边框、按钮、基础文字）；相对父容器适配用（自适应宽度、内边距）；相对屏幕适配用。
2026-01-13 16:59:37
771
原创 Text文本样式-「文本水平对齐」「行内元素垂直对齐」「空白符处理」「换行规则」
想控制「文本水平位置」→ 用text-align；想控制「文本是否换行/保留空格」→ 用；想控制「文本换行时怎么拆字/拆单词」→ 用word-break；想控制「图片/文字/单元格内容的垂直对齐」→ 用。
2026-01-13 14:33:29
726
原创 Grid-「容器级整体对齐」「项目级单元格内对齐」「单个项目自定义对齐」三大类
详细拆解 Grid 布局的每一种对齐方式，并且为每个对齐属性都提供独立、可运行的完整实例，按照「容器级整体对齐」「项目级单元格内对齐」「单个项目自定义对齐」三大类，逐一讲解 Grid 对齐属性，每个属性都配专属实例，帮你彻底理解 Grid 的对齐逻辑。Grid 是二维布局，对齐分为两个维度：这类属性作用于 Grid 容器，当网格内容区的总尺寸 < 容器尺寸时生效，核心是 （行轴）、（列轴）、（简写）。效果：网格内容区靠行轴（水平）起点对齐（靠左）。2. justify-content: end效果：网
2026-01-13 10:30:25
712
原创 Flex-「主轴对齐」「交叉轴对齐」「多行对齐」「单个项目对齐」四大类
你希望我更详细地拆解 Flex 布局的每一种对齐方式，并且为每一种对齐属性都提供独立、可运行的完整实例，我会把 Flex 对齐的核心属性（主轴、交叉轴、多行对齐）逐一拆解，每个属性都配专属实例，让你能清晰看到每个属性的作用和效果。Flex 布局的对齐完全围绕 主轴 和 交叉轴 展开：下面按「主轴对齐」「交叉轴对齐」「多行对齐」「单个项目对齐」四大类，逐个属性讲解并提供完整实例。 是 Flex 容器属性，控制所有项目在主轴上的对齐方式，常用值有 6 个，以下是每个值的独立完整实例。效果：项目靠主轴起点对齐，主
2026-01-13 10:05:56
693
原创 Grid-精准控制单个网格项在网格容器中「占据行列位置和跨度」grid-column-start[end]、grid-row-start[end]
控制网格项列方向的起止位置，控制行方向的起止位置。核心是通过「网格线编号」定义范围，跨行列数 = 结束线编号 - 起始线编号。日常开发中优先用简写grid-column: 起始/结束grid-row: 起始/结束，或span表示跨度，更简洁高效。
2026-01-12 10:45:20
940
原创 Grid-布局中控制网格项自动排列的核心属性 grid-auto-flow
用于指定网格容器中未明确定位排列方向：按行（row）填充 / 按列（column）填充；填充模式：常规填充（默认） / 密集填充（dense）（填补空白）。简单比喻：把网格容器想象成空货架，就是规定“往货架上摆商品时，是先摆满一层再摆下一层（row），还是先摆满一列再摆下一列（column）；以及摆的时候要不要填补前面空出来的空位（dense）”。
2026-01-12 10:25:10
326
原创 Grid-可视化定义区域属性 grid-template-areas，网格项通过 grid-area 绑定区域名，自动定位到对应位置
你想再次深入掌握 这个属性的完整用法，我会用一个覆盖核心场景的完整可运行实例，结合可视化布局、跨行列、空区域、错误示范等内容，帮你彻底理解这个属性的使用逻辑和实战价值。 是 Grid 布局中可视化定义区域的属性：这个实例包含“基础布局、跨行列布局、空区域布局、错误示范”4个场景，代码可直接复制运行：三、关键场景解析1. 场景1（基础布局）
2026-01-12 09:46:17
763
原创 Grid-定义网格显式行列 grid-template-columns 属性和 grid-template-rows 属性
定义网格容器中显式列的数量和每一列的宽度；：定义网格容器中显式行的数量和每一行的高度。关键概念：“显式行列”是你主动定义的行列，超出这个范围的网格项会触发“隐式行列”（由控制）。/* repeat(3, 1fr) 等价于 1fr 1fr 1fr → 3列等分 *//* repeat(2, 1fr) → 2行等分容器高度（容器未设高度，行高由内容决定） *//* 给容器设高度，让1fr生效 */效果3列完全等分容器宽度（扣除内边距和间距）；
2026-01-12 09:39:58
1137
原创 Grid-开启 Grid 布局 display:grid && display:inline-grid
是块级网格容器，独占一行，默认宽度100%，适合绝大多数布局场景（页面/大模块）；是行内块网格容器，宽度适配内容，可和行内元素同行，仅适合小型网格组件需并排显示的场景；二者核心差异是容器的盒模型类型（块级 vs 行内块），Grid 布局的行列、对齐、间距等属性在二者中完全通用。
2026-01-12 09:28:08
1565
原创 Grid- 布局的容器基本了解
属性取值作用displaygridgrid：容器为块级元素，独占一行；：容器为行内块元素，随内容行排列示例/* 最基础的网格容器 *//* 块级网格容器（最常用） */这是 Grid 容器最核心的属性，用于定义网格的行、列数量和尺寸。属性取值类型作用长度(px/rem)、百分比(%)、fr(弹性值)、repeat()、minmax()、auto等定义显式列的数量和每列宽度同上定义显式行的数量和每行高度常用取值示例/* 3列：第1列100px，第2列自适应，第3列占剩余空间 */
2026-01-12 09:21:20
542
原创 Layout-Flex 布局中使用 space-between/space-around/space-evenly 时的经典问题 —— 当最后一行的子项数量不足时
这个示例会清晰展示：当子项数量不足一行时，的剩余空间分配规则会导致最后一行子项间距被“拉伸”，视觉上非常不协调。
2026-01-09 14:18:27
729
原创 Layout-Flex 弹性布局
你想系统梳理 CSS Flex 弹性布局的核心概念、属性用法、布局规则，以及通过实例掌握从基础到进阶的 Flex 布局技巧，对吧？Flex（Flexible Box）是 CSS3 推出的一维弹性布局模型，能轻松实现元素的自适应、居中、均分、对齐等需求，是现代前端布局的首选方案（替代传统的 float/position 布局）。它的核心是「容器 + 子项」的双层结构，通过给容器设置 ，即可让子项拥有弹性布局能力。三、核心属性详解 & 场景解释1. 容器核心属性（最常用）✅ ：控制主轴方向（默认）：主
2026-01-09 13:55:04
902
原创 Layout-visibility是控制元素是否可见的核心属性，和 display: none 不同的是，它隐藏元素时仍会保留元素在文档流中的占位空间
是「隐藏但保留占位」，子元素可覆盖，适合不打乱布局的隐藏场景；是「完全移除」，不保留占位，适合动态切换显示/隐藏；opacity: 0是「透明可交互」，保留占位且能响应事件，适合动画场景；collapse仅对表格生效，隐藏行/列且不占空间，是表格隐藏的最优选择。记住这四种“隐藏”方式的核心差异，就能根据场景精准选择，避免布局错乱或交互失效的问题。
2026-01-09 13:52:59
1000
原创 Layout-top/right/bottom/left是定位元素的偏移控制属性，定义元素相对于参考坐标系的偏移位置
你想系统了解 CSS 中 /// 这四个定位偏移属性的作用规则、取值方式，以及它们如何配合 属性生效，同时需要实例直观展示不同场景下的偏移效果，对吧？/// 是定位元素的偏移控制属性，仅对非 定位（///）的元素生效，核心作用是定义元素相对于参考坐标系的偏移位置，是精准控制元素定位的关键。三、核心效果与场景解释1. relative 配合偏移：微调位置 定位的元素， 是相对于自身原始位置的偏移： → 向下偏移20px（与直觉相反：top值增大，元素向下移）； → 向右偏移30px；核
2026-01-09 13:52:28
1038
原创 Layout-position是控制元素在页面中定位方式的核心属性
你想系统了解 CSS 中 属性的所有核心取值、各自的定位规则、适用场景，以及通过实例直观区分不同定位方式的差异，对吧？ 是控制元素在页面中定位方式的核心属性，决定了元素是遵循普通文档流，还是脱离文档流固定在某个位置，是前端布局（尤其是弹窗、悬浮导航、吸顶组件）的核心知识点。定位生效需配合 ////（控制层级），其中：三、核心效果与场景解释1. static（默认）元素完全遵循普通文档流，// 全部无效；所有未设置 的元素默认都是 ，是页面布局的基础。2. relative（相对定位）核
2026-01-09 13:51:47
938
原创 Layout-overflow 是控制元素内容超出其指定宽高时的显示方式的核心属性
你想系统了解 CSS 中 属性的核心取值、各自的表现形式、适用场景，以及通过实例直观看到不同取值的效果和实际开发中的用法，对吧？ 是控制元素内容超出其指定宽高时的显示方式的核心属性，不仅能解决内容溢出问题，还能配合浮动清除、BFC（块级格式化上下文）等场景使用，是前端布局中高频用到的属性。三、核心效果与场景解释1. 基础取值对比（默认）：内容溢出后直接显示在元素外部，可能导致布局错乱（如文字超出卡片），仅适合无固定宽高的元素；：溢出部分完全隐藏，常用作“裁剪”（如圆角头像防止图片溢出、隐藏多余文
2026-01-09 13:51:15
876
原创 Layout-现代布局中，float 仅用于文字环绕图片
你想系统了解 CSS 中 （浮动）属性的核心用法、取值、布局特性，以及它和现代 flex/grid 布局的区别，同时需要实例直观展示浮动的效果和常见问题，对吧？ 是 CSS 早期的布局属性，核心作用是让元素“脱离普通文档流”并向左侧/右侧浮动，曾是实现多列布局的主要方式，虽然现在被 flex/grid 替代，但仍是前端基础必备知识点。三、核心效果与问题解释1. 经典场景：文字环绕图片 让元素脱离普通文档流，但文字会自动环绕它（这是 float 设计的初衷）；这是现代开发中 float 唯一推荐的使
2026-01-09 13:50:35
587
原创 display-flex 和 inline-flex都属于弹性布局，核心区别仅在于容器本身的显示类型（块级 vs 行内级）
flex是块级弹性容器，独占一行、宽度默认100%，适合页面大模块布局；是行内弹性容器，不独占一行、宽度自适应子项，适合行内小模块布局；核心选择逻辑：看容器是否需要“占满一行”——需要则用flex，不需要则用。
2026-01-09 13:49:38
733
原创 display-元素显示类型和布局方式，决定了元素是块级、行内、弹性布局还是网格布局等
你想系统了解 CSS 中 属性的核心取值、各自的布局特性、适用场景，以及通过实例直观区分不同取值的差异，对吧？ 是 CSS 中控制元素显示类型和布局方式的核心属性，决定了元素是块级、行内、弹性布局还是网格布局等，是前端布局的基础中的基础。我把常用取值按布局类型分类，方便你理解和记忆：下面的代码包含所有核心取值的对比，你可以直接运行，直观看到差异：三、核心取值效果解释1. 基础流布局（最基础）：：：：：：：掌握这些核心取值，就能覆盖绝大多数前端布局场景啦。
2026-01-09 13:47:52
894
原创 Layout-box-sizing是 CSS 中控制元素盒模型计算方式的核心属性，直接决定了元素的 width/height 是否包含内边距和边框
是默认值，width仅包含内容区，易导致元素宽度超出预期；让width包含 content+padding+border，宽度可控，是开发首选；实际项目中建议全局设置 border-box，统一盒模型计算方式，避免布局错位问题。
2026-01-09 13:46:19
754
原创 docker 常用命令实践DEMO
需要注意的是，虽然卷挂载提供了主机和容器之间的数据共享，但它并不影响容器的镜像。因此，如果你在主机上修改了挂载目录的内容（如添加、删除或修改文件），这些变化会立即在容器内的对应挂载点上可见。当你将主机的目录挂载到容器内的一个路径时，容器对该路径的访问实际上是对主机目录的访问。参数将主机的目录挂载到容器内时，Docker 会在容器启动时创建一个到主机目录的绑定。MySQL的数据（如数据库和表）存储在这个目录下，因此通过挂载这个目录，可以持久化MySQL的数据，即使容器被删除，数据也不会丢失。
2025-01-07 14:07:19
1642
1
原创 请你谈谈：vue的渲染机制（render）- 3举例说明问题
name: 组件的名称是HelloWorld。render和context。用于创建虚拟 DOM 节点，而context包含了当前组件的上下文信息（尽管在这个例子中并未使用到contextname: 组件的名称是HelloWorld。render和context。在这个例子中，context参数没有被使用，但它是 Vue 提供的，包含了当前组件的上下文信息。name: 组件的名称是HelloWorld。components: 一个空对象，表明这个组件没有局部注册的子组件（尽管在这个例子中。
2024-11-28 11:34:46
1485
原创 请你学习：前端布局3 - flex
Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其。
2024-08-29 08:25:28
1268
原创 请你谈谈：从宏任务&&微任务的角度谈谈js代码的执行顺序
当JavaScript引擎遇到异步代码时，它不会立即执行这些代码，而是会将异步操作（如定时器、网络请求、文件读写等）的回调函数或Promise等异步处理机制放入宿主环境（如浏览器或Node.js）的某个任务队列（如宏任务队列或微任务队列）中。异步操作的结果会在将来的某个时间点成为可用，此时宿主环境会将其对应的回调函数或Promise解决（resolve）或拒绝（reject）的处理程序放入JavaScript引擎的执行栈中执行。与宏任务不同，微任务是在当前宏任务执行完毕后，下一个宏任务开始之前执行的。
2024-08-25 15:11:36
889
原创 请你谈谈：async与await是如何控制异步操作的执行顺序
是 JavaScript 中用于处理异步操作的一种语法糖，它使得异步代码的编写、阅读和维护变得更加容易和直观。async和await关键字是在 ES2017（ES8）中引入的，旨在简化基于 Promise 的异步操作。
2024-08-25 11:53:52
1348
原创 请你谈谈：Promise 一个可能现在还没有结果，但将来某一时刻会有结果的异步操作
这个逻辑（即 Promise 的执行器函数中的代码）会立即执行，但它可能包含异步操作，这些异步操作则会在将来的某个时间点完成。首先，Promise 的创建确实会立即开始一个异步操作（如果 Promise 的执行器函数中包含了异步操作的话）。异步操作（如网络请求、文件读取、定时器回调等）的完成时间是由它们自身的性质决定的，而不是由 Promise 的创建时间决定的。所以，Promise 的创建会立即触发执行器函数的执行，而这个执行器函数可能会包含异步操作，这些异步操作会在将来的某个时间点完成。
2024-08-12 08:26:07
1251
原创 请你学习：前端布局3 - 浮动 float
由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。给div1 div2 设置了。
2024-08-04 15:09:38
1460
原创 请你学习：前端布局2 - 定位（Positioning）是一种重要的布局技术
在页面布局中，定位（Positioning）是一种重要的布局技术，它允许我们精确地控制元素在页面上的位置。定位模式、是否脱标以及移动位置是理解定位的三个关键方面。
2024-08-03 06:06:46
936
原创 请你学习：前端布局1 - CSS盒模型（Box Model）是CSS布局的核心概念之一
CSS盒模型（Box Model）是CSS布局的核心概念之一，它描述了如何对文档中的元素进行布局和尺寸计算。每个元素都会生成一个矩形的盒子，这个盒子由几个部分组成，包括。了解这些部分如何相互作用对于创建有效的网页布局至关重要。
2024-08-02 22:44:35
1226
原创 请你谈谈：spring拦截器的应用-preHandle postHandle afterCompletion执行顺序问题的讨论？
方法名调用时机执行顺序（多个拦截器时）主要作用preHandle请求处理之前，Controller方法调用之前正向顺序决定是否继续执行后续的拦截器或ControllerpostHandleController方法处理完请求后，视图渲染前反向顺序（如果执行）对ModelAndView进行操作（如果需要）（错误说法）整个请求处理结束之后，包括视图渲染之后反向顺序资源清理工作，如关闭数据库连接等。
2024-08-01 08:27:29
1208
原创 请你谈谈：spring循环依赖的解决方案？
在Spring框架中，对象的实例化（也称为bean的创建）以及对象属性的设置（也称为依赖注入或DI, Dependency Injection）是两个核心的概念，它们共同协作以支持Spring的IoC（控制反转）容器的主要功能。在Spring中，特别是在处理单例（Singleton）bean的循环依赖时，Spring使用了一种特殊的机制来确保即使存在循环依赖，也能正确地创建和注入bean。getBean()
2024-07-28 19:46:53
919
原创 请你谈谈：vue的渲染机制（render）- 2举例说明问题
如何在 Vue 的render函数中使用方法来创建虚拟节点（VNode）。这里是一个稍微整理后的示例，它直接对应于你提供的注释和代码片段，但作为一个完整的render函数的一部分，可能位于一个 Vue 组件的script部分中。// 假设 MyComponent 是一个已经定义好的 Vue 组件importfrom;exportdefaultnamerender// 使用 createElement 创建根 div 元素return'div'// HTML 标签名。
2024-07-28 17:09:25
1276
原创 请你谈谈：vue的渲染机制（render）- 1 原理讲解
Vue 的组件挂载和更新过程是一个高度优化的过程，它利用虚拟 DOM 和响应式系统来确保数据的变化能够高效地反映到视图上。这个过程从模板编译开始，经过挂载、更新等阶段，最终实现了数据的双向绑定和视图的动态更新。
2024-07-28 09:45:08
1408
原创 请你谈谈：spring AOP的浅显认识？
假设你有一个业务逻辑类，里面包含了一些用户操作的方法，如addUserdeleteUser等。@Service// 业务逻辑代码...// 业务逻辑代码...// 其他方法...接下来，定义一个日志切面类LogAspect，用于在业务方法执行前后记录日志。@Aspect@Component// 定义切点，匹配UserService类中的所有方法// 前置通知，在目标方法执行前运行// 后置通知，在目标方法执行后运行（无论是否抛出异常）// 返回通知，在目标方法正常返回后运行。
2024-07-27 09:35:04
1168
原创 请你谈谈：针对Mybatis引出的Spring事务的探究2：spring事务的失效
异常处理不当导致Spring事务失效的情况，通常发生在事务方法内部捕获了异常，但没有正确地将异常抛出给Spring的事务管理器，从而导致Spring无法识别到需要回滚事务的异常。在Spring中，默认情况下，只有运行时异常（如果方法抛出了检查型异常（即非运行时异常，需要显式地声明抛出或捕获的异常），并且没有特别的配置来指示 Spring 需要对这些异常进行事务回滚，那么事务将不会回滚。如果方法捕获了这些异常并进行了处理（比如吞掉了异常），而没有重新抛出，那么Spring就不会知道发生了需要回滚事务的情况。
2024-07-24 21:22:34
341
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人