隐藏一个div看似简单，但CSS提供了多种实现方式，各自在文档流、事件响应、动画过渡上的表现差异很大。最常见的display:none会让元素完全脱离渲染树，不占据任何空间；visibility:hidden虽然不可见，但原来的位置仍被保留；opacity:0只改变透明度，元素依然可以接收点击。实际开发中还...

栏目：HTML/CSS 时间：10-05 CSS隐藏div CSS display:none visibility:hidden

页面滚动时掉帧、点击后界面卡顿，多数时候不是因为JavaScript计算慢，而是浏览器在短时间内反复执行了布局和绘制。回流与重绘直接影响关键渲染路径，理解两者的触发条件比盲目加loading更有价值。这篇文章从浏览器渲染流程出发，说明回流、重绘与合成的区别，列出最容易引发强制...

栏目：HTML/CSS 时间：10-05 网页性能优化 重排重绘 强制回流

处理页面布局时，一个常见的困扰是容器明明设置了固定宽度，却被内部某个子元素撑得超出边界。这种宽度被撕开的现象通常源于子元素设置了不可收缩的宽度、文本禁止换行或者Flex容器默认的收缩机制失效。要解决这个问题，最直接的手段是给容器设置overflow:hidden或auto，把溢出...

栏目：HTML/CSS 时间：10-05 CSS容器宽度 overflow属性 flex-wrap

谈到在网页里把数据变成Excel文件，常见思路有三种：把表格伪装成CSV、生成HTML表格让Excel打开、借助SheetJS这类库输出真正的xlsx。这三种做法在兼容性和文件结构上差别很大，直接决定用户打开后看到的是乱码、纯文本还是带格式的工作簿。本文从Blob和下载链接着手，先讲清楚纯...

栏目：HTML/CSS 时间：10-05 html5导出excel 前端导出Excel SheetJS

写博客时想把某段文字变成可以点击的链接，却发现不知道代码从哪下手？其实HTML做链接的核心只有一个a标签，配上href属性填上网址就能用。本文把博客链接的写法拆开讲透：先给最基础的标准语法，再分别演示跳转外部网址、站内文章、页面内锚点、邮箱这几种高频场景的完整代码，接着...

栏目：HTML/CSS 时间：10-05 HTML超链接 a标签 博客链接

双击HTML文件打开后页面样式异常或接口请求失败，往往是因为运行方式不对。查看HTML运行效果不只是打开文件那么简单，直接双击、编辑器预览、本地HTTP服务器和在线工具各有差异，对相对路径、模块加载和跨域请求的影响完全不同。本文从实际排查角度出发，梳理五种常用查看HTML运...

栏目：HTML/CSS 时间：10-05 HTML运行 查看HTML效果 本地服务器

表单校验通常离不开 JavaScript 对 input 或 change 事件的监听，但样式层面的实时反馈其实可以交给 CSS 完成。:valid 与 :invalid 这两个伪类能根据浏览器原生约束验证结果自动匹配元素，配合 required、pattern、type 等属性，输入框会在有效和无效状态间即时切换。问题在于...

栏目：HTML/CSS 时间：10-05 css :valid伪类 表单验证

页面在本地打开时布局、颜色、字体一切正常，部署到服务器后却只剩光秃秃的HTML内容，这种情况几乎每个前端开发者都会遇到。问题通常不在CSS规则本身，而在于部署之后静态资源定位失败、服务器返回错误的MIME类型、浏览器缓存了旧样式，或者构建时路径配置与线上目录不一致。排...

栏目：HTML/CSS 时间：10-05 CSS样式失效 静态资源路径 Nginx配置

按下数字键后操作数没有出现在屏幕上，多数时候不是事件没绑定，而是构造函数里压根没有给显示状态一个初始值。未初始化的类字段默认是undefined，渲染函数一旦读取就会把undefined拼进字符串或直接输出到界面，表现就是空白或一串异常文字。本文用一个存在这类缺陷的计算器代码...

栏目：HTML/CSS 时间：10-04 JavaScript计算器 构造函数初始化 操作数显示

列表首项保持强调色，其余项使用弱化颜色，这种常见排版需求如果靠添加额外类名实现会比较繁琐。CSS的:not伪类配合:first-child可以精准命中除第一项以外的所有列表项，再通过color属性完成文字颜色控制。核心写法是li:not(:first-child) { color: #666; }，它不要求修改HTML结...

栏目：HTML/CSS 时间：10-04 CSS伪类 列表样式 文字颜色

为什么同一个渐变图标在加上 filter: hue-rotate(90deg) 之后，整体色调会绕着色环偏移？如果你只想调整颜色而不重新切图或修改 SVG 源码，这个 CSS 滤镜函数就能派上用场。hue-rotate 接收一个角度参数，将元素所有像素的色相沿色相环旋转对应度数，保持明度和饱和度基本不变。0d...

栏目：HTML/CSS 时间：10-04 CSS hue-rotate 色相旋转 filter滤镜

CSS 里的 ::after 和 ::before 并不是网页结构中真实存在的节点，而是由浏览器根据样式规则临时生成的两个盒子。它们分别表示某个元素内容之后和内容之前的虚拟子元素，必须配合 content 属性才能出现在页面上。::before 通常用于在元素前面插入装饰性内容、图标或辅助文字，:...

栏目：HTML/CSS 时间：10-04 伪元素 ::after ::before

页面里明明已经引入了 jQuery，可点击按钮就是没有反应，控制台还报出 $ is not defined。这类问题在 PHP 搭建的站点中尤其常见，原因往往不是 jQuery 本身坏了，而是加载顺序、路径解析或作用域冲突。本文从实际排查角度出发，梳理导致 jQuery 在 PHP 页面失效的主要场景，包括 scr...

栏目：HTML/CSS 时间：10-04 jQuery失效 PHP页面 JavaScript冲突

想让页面在明暗主题之间平滑过渡，同时保留漂亮的渐变背景，靠写两套样式并不划算。CSS 自定义属性配合 var() 可以集中管理颜色和渐变参数，只需要切换根节点上的 data-theme 属性，所有引用这些变量的元素都会立即更新。linear-gradient 中的色标、角度、位置同样可以交给变量...

栏目：HTML/CSS 时间：10-04 CSS变量 linear-gradient 主题切换

在Web端做手写签名，如果只想着最后导出一张透明背景的PNG，很容易忽略轨迹点采集、曲线平滑和设备像素比这些关键细节。本文直接以原生Canvas为核心，说明如何用指针事件统一处理鼠标、手指和触控笔输入，再把移动坐标换算成画布内坐标，并用二次贝塞尔曲线消除折线感。保存环节会...

栏目：HTML/CSS 时间：10-04 HTML5签名 Canvas手写签名 数字签名保存

CSS的:valid和:invalid伪类并不是孤立的装饰工具，它们直接反映浏览器内置的约束验证API状态。只要表单控件带有required、pattern、min、max、type=email等约束属性，浏览器就会实时计算该控件是否通过验证，并把结果映射到这两个伪类上。因此，开发者不用写任何JavaScript就可...

栏目：HTML/CSS 时间：10-04 CSS伪类 表单验证 样式控制

双击下载的圣诞树HTML文件，浏览器里却只显示一排标签，或者背景漆黑但圣诞树没有出现，这种情况大多和代码本身无关，而是文件扩展名、编码格式或打开方式出了问题。本文从零开始介绍HTML圣诞树代码的正确运行方法，包括如何保存为UTF-8编码的html文件、直接双击打开、使用VS Code...

栏目：HTML/CSS 时间：10-04 HTML圣诞树 圣诞树代码 运行HTML文件

刚接触网页制作的朋友常遇到一个尴尬场景：用记事本辛辛苦苦写好HTML代码，保存后双击文件，结果又用记事本打开了，代码原封不动显示在屏幕上，浏览器根本没有启动。问题往往出在文件扩展名和系统默认打开方式上。本文从保存文件、修改关联、直接拖入浏览器、本地调试等几个环节入...

栏目：HTML/CSS 时间：10-04 记事本运行HTML HTML文件 浏览器打开

同样是HTML5画Logo，Canvas和SVG走的是完全不同的两条路。Canvas基于像素位图，用JavaScript在画布上逐点着色，画出来的标志一旦放大就会暴露锯齿；SVG则是用XML描述矢量路径，无论缩放到什么尺寸边缘都保持锐利。但这个差异只是冰山一角。Canvas适合生成带有复杂光影、粒子效果和...

栏目：HTML/CSS 时间：10-04 HTML5绘制Logo Canvas绘图 SVG矢量图形

写CSS时经常遇到样式不生效的情况，排查半天才发现是引入方式本身出了问题。这篇文章不绕概念，直接带你梳理link、@import、内联style、style标签以及JS动态插入这五种常见引入方式各自的工作原理和生效时机。重点讲解如何通过浏览器开发者工具中的网络请求、计算样式、元素...

栏目：HTML/CSS 时间：10-04 CSS引入方式 样式生效 浏览器开发者工具

如果你在v-for渲染的列表里给每个箭头图标绑定了同一个data变量，点击任意一个箭头后，会发现所有箭头同时翻转。这个现象并非Vue的缺陷，而是组件共享了同一份响应式状态。列表项虽然生成了多个DOM节点，但它们引用的数据地址是同一个，修改这个值时所有绑定它的节点都会更新。本...

栏目：HTML/CSS 时间：10-04 Vue循环 图标状态 响应式数据

工具类越积越多，维护时最怕的不是样式难写，而是不知道某个组合是否已经存在、该不该继续叠加。Tailwind本身提供了不止一种收敛手段：可以在配置文件里扩展主题 token，把颜色、间距、圆角等抽象成语义化名称；也可以用 @layer components 配合 @apply 把高频按钮、卡片、表单状...

栏目：HTML/CSS 时间：10-04 Tailwind配置 自定义类名 CSS工具类

每天通勤前在不同应用之间来回切换查路线、看天气，流程往往比较琐碎。如果能在 Firefox 地址栏输入 go 公司，就自动出现一份包含驾车路线、公共交通和天气提示的出行方案，效率会明显提升。本文展示一种轻量实现：把 Firefox 的书签关键字机制与一个本地 JavaScript 页面组合，让...

栏目：HTML/CSS 时间：10-04 Firefox关键字搜索 JavaScript 出行规划

把一组尺寸不一的图片排成整齐又有节奏的照片墙，如果只用固定宽高的img标签加浮动，很快会遇到间隙对不齐、响应式断裂的问题。HTML5配合CSS Grid和Flexbox可以更直接地控制网格轨道与伸缩比例，让照片墙既保持视觉密度，又能在不同屏幕下自动调整列数。本文先给出一个语义化的...

栏目：HTML/CSS 时间：10-03 HTML5照片墙 照片墙布局 CSS Grid布局

宽度和高度看似基础，但围绕它们的取值方式、盒模型计算以及动态约束规则，会直接影响页面布局的稳定性。固定像素、百分比、视口单位、min-content等不同取值各有适用场景，错误混用容易造成溢出或塌陷。本文从实际样式场景出发，说明width与height的常用属性写法，包括box-sizing...

栏目：HTML/CSS 时间：10-03 CSS宽度 高度设置 盒模型

模态框的遮罩层怎么覆盖全屏又不产生滚动条？弹窗内容如何在视口内稳定居中，还能在内容过长时优雅滚动？如果把 JavaScript 从方案里拿掉，纯 CSS 能否独立完成这些布局任务？答案是可行的。借助 :target 伪类或隐藏的 checkbox 配合兄弟选择器，CSS 可以维护模态框的显示与隐藏状态...

栏目：HTML/CSS 时间：10-03 CSS模态框 纯CSS布局 模态框居中

同一个个人页面在Chrome和Edge里显示正常，换到IE11或更早浏览器时布局可能散掉，脚本也不执行。问题往往不在某一处，而是HTML5语义标签、CSS新属性和ES6语法共同造成。处理兼容要先让浏览器进入标准模式，使用完整DOCTYPE声明，并为HTML5标签提供shiv或polyfill。样式层面优先做...

栏目：HTML/CSS 时间：10-03 HTML兼容性 旧浏览器 渐进增强

固定侧边栏在页面滚动时跑到可视区域外，甚至压住页脚，这种问题该如何系统解决？position fixed定位本身基于视口，不受文档流和滚动容器约束，侧边栏高度一旦超过视口或容器底部就会出界。常见的误区是给fixed元素同时设置top和bottom就能限制范围，实际上当显式指定height时，bottom...

栏目：HTML/CSS 时间：10-03 CSS固定侧边栏 position fixed top bottom限制

给页面加样式时，最常遇到的选择就是样式该写在哪里。写在HTML标签的style属性里最直接，但样式一多就难以维护；放在head区域的style标签中能集中管理单个页面，却无法跨页面复用；通过link标签引入外部CSS文件是工程化项目的主流方案，浏览器可以并行加载并缓存；用@import导入样式虽...

栏目：HTML/CSS 时间：10-03 CSS引入方式 行内样式 外部样式表

想把装饰性图标、清浮动或自定义列表序号直接写进样式表？伪元素before和after就是干这个用的。这篇文章从content属性、定位规则、常见翻车点三个角度展开，演示如何配合position与z-index做出实用效果，也解释了为什么有些场景下伪元素失效。如果你曾困惑before与after到底加...

栏目：HTML/CSS 时间：10-03 CSS伪元素 after选择器 before选择器