星野集-个人编程学习与开发笔记归档|站长博客

CSS3核心特性-第9章-9.2-3D变换与透视

HTML5+CSS3教程 CSS

学习目标理解3D变换的核心概念（透视、3D空间、变换原点）掌握perspective属性的语法与取值规则实现基础3D变换效果（旋转、平移、缩放）掌握transform-style: preserve-3d的应用场景能够开发简单的3D交互效果（如卡片翻转、立方体展示）概念讲解 3D变换是C

CSS Emmet写法指南：新手也能秒懂的高效样式代码技巧

开发技巧笔记 CSS

前面我们聊完了HTML部分的Emmet写法，接下来重点说说CSS的Emmet写法——它同样能帮你省去敲重复属性的力气，尤其是写样式时经常要重复输入的margin、padding、color等属性，用Emmet几秒钟就能搞定。 CSS的Emmet语法和HTML不太一样，它更像是一套「属性缩写规则」，掌

Emmet写法：前端开发者的“快捷键外挂”（小白友好版HTML篇）

开发技巧笔记 HTML

如果你刚接触前端开发（比如学HTML/CSS），肯定遇到过这种情况：明明只是要写个简单的页面结构，却要反复敲<div>、</div>、class=""这些重复代码，手指都快抽筋了……这时候如果有人告诉你：“用Emmet写法，敲3个字母就能生成一整段代码”，你会不会眼前一亮？别急，这篇文章就用最生活

CSS3核心特性-第9章-9.1-2D变换（transform）

HTML5+CSS3教程 CSS

一、概念讲解 2D变换（transform）是CSS3提供的用于对元素进行平面空间变换的技术，通过修改元素的坐标、旋转角度、缩放比例或倾斜程度，实现动态视觉效果，且不会影响文档流布局。常见的2D变换包括平移（translate）、旋转（rotate）、缩放（scale）和倾斜（skew），可单独

VSCode光标异常：输入字符总是替换？一招教你轻松解决

开发技巧

问题现象：我的VSCode怎么了？今天在写代码的时候，我遇到了一个特别烦人的问题。本来在VSCode里正常敲代码，突然发现每输入一个字符，原来位置上的字符就被替换掉了，就像打字机那样直接覆盖上去。更奇怪的是，我注意到光标也变得不太一样了，不再是平时那种细细的竖线，而是变成了一个实心的小方块。这种

CSS3核心特性-第8章-8.4-自定义字体（@font-face）

笔记 CSS HTML5+CSS3教程

8.4 自定义字体（@font-face）学习目标掌握@font-face规则的语法结构及字体格式要求理解字体文件格式（TTF/OTF/WOFF）的兼容性差异学会优化自定义字体加载性能（字体子集、预加载策略）能够解决自定义字体在不同浏览器中的渲染问题概念讲解 @font-face是CSS

CSS里padding和margin到底怎么选？一篇讲透两者的区别和使用场景

笔记 CSS

写CSS时，最让人纠结的问题之一大概是：该用padding还是margin？这两个属性都能“留空”，但用错了可能导致布局错乱、样式不符合预期。本文用最直白的语言+生活化类比，帮你彻底理清两者的区别，并总结一套“傻瓜式”选择指南。一、核心概念：padding是“内衬”，margin是“外隔”——从

CSS3核心特性-第8章-8.3-滤镜效果（filter）

HTML5+CSS3教程 CSS

一、滤镜效果概述 CSS3的filter属性用于对元素应用图形效果，如模糊、亮度调整、对比度增强等，无需依赖图片编辑软件即可实现复杂视觉效果。该属性支持多种滤镜函数组合，可作用于图片、文字、背景等任何HTML元素，广泛应用于图片处理、交互动效和主题切换场景。二、核心语法与取值 2.1 基础语法 /

CSS3核心特性-第8章-8.2-文本样式高级特性

HTML5+CSS3教程 CSS

一、学习目标掌握 text-shadow 实现文本阴影效果的语法及多阴影叠加技巧理解 word-wrap 与 overflow-wrap 的区别及换行控制场景熟练运用 text-overflow 处理文本溢出显示省略号的实现方法了解 letter-spacing、word-spacing 等

JavaScript中的“数据解析”：用 `parseInt` 和 `parseFloat` 搞懂字符串转数字

笔记 JavaScript

你有没有遇到过这种情况？用户输入框里填了 "123"，你想用它做数学计算，结果直接加 5 却得到 "1235"；或者从接口拿到 "99.9" 这样的字符串，想转成数字却发现计算时总出错…… 这时候，你需要用到 JavaScript 中的“数据解析”工具——parseInt 和 parseFloat

看懂 `if (!b)`：一行代码背后的“真假判断”逻辑

笔记 JavaScript

你可能在写JavaScript代码时见过这样的片段： let b; if (!b) { console.log("执行这里的代码"); } 或者更常见的是检查用户输入： let userName = document.getElementById("username").value; // 获

JavaScript数据类型转换：从“意外结果”到“主动掌控”

笔记 JavaScript

你有没有在写JS代码时遇到过这些“迷惑行为”？比如明明写了 1 + "1"，结果得到的是 "11" 而不是 2；或者用 == 比较 "" 和 0，居然得到 true；又或者明明变量是 null，和 undefined 比较却返回 true…… 这些“不按常理出牌”的结果，其实都和JavaScrip

JavaScript移位赋值运算符：用「挪位置」的方式快速计算？

笔记 JavaScript

你可能在代码里见过类似 a <<= 2或者 b >>= 1这样的写法，看起来像数学里的「大于等于」符号被拆开了？其实这是 JavaScript 中的移位赋值运算符。它的作用听起来有点玄乎——通过「移动二进制位的位置」来快速完成计算。别被「二进制位」「移位」这些词吓到，我们用生活中的例子一步步拆解，

JavaScript里的取幂运算符：算平方、开根号，一行代码搞定

笔记 JavaScript

你是不是在学JavaScript时见过别人写 2 ** 3，却不知道这行代码是什么意思？或者想算“一个数的几次方”，却还在用循环乘来乘去？今天咱们就聊聊JavaScript里的取幂运算符 **——它和你数学课里学的“幂运算”是一对好搭档，看完这篇你能彻底搞懂怎么用。一、先回忆：数学里的“幂”是什么

CSS3核心特性-第8章-8.1-边框与背景增强

HTML5+CSS3教程 CSS

一、学习目标掌握CSS3边框增强属性（border-radius、box-shadow）的语法与取值理解线性渐变（linear-gradient）和径向渐变（radial-gradient）的实现原理能够使用背景增强属性（background-size、background-clip）实现复杂