分类：前端基础 - 星野集-个人编程学习与开发笔记归档|站长博客 | 前端核心技术基础踩坑实录

视觉视口与逻辑视口：前端开发者必须搞懂的屏幕适配核心概念

开发技巧前端基础

作为前端开发者，你是否遇到过这样的困惑：明明在代码里设置了页面宽度为375px，但在不同手机上显示效果却不一样？或者为什么同样的CSS媒体查询，在某些设备上触发时机总跟预期有偏差？这就要从移动端特有的视觉视口(Visual Viewport)和逻辑视口(Layout Viewport)说起。一、先

CSS3核心特性-第9章-9.3-过渡效果（transition）

CSS HTML5+CSS3教程

一、学习目标掌握过渡效果的核心语法及6个关键属性理解过渡四要素（属性、时长、缓动函数、延迟）的作用实现3种常见交互动效（颜色过渡、尺寸变换、位置移动）区分过渡与动画的适用场景及性能优化技巧二、概念讲解过渡效果（transition）是CSS3引入的状态间平滑过渡技术，允许元素在不同状态（

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），可单独

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 等

弹