css

加个鸡腿儿8 小时前
前端·css·架构
经验分享2:SSR 项目中响应式组件的闪动陷阱与修复实践最近在开发公司官网的响应式 Banner 组件时,遇到了一个移动端首屏加载闪动的问题。 一套代码做PC端和移动端的适配,作为团队新人,我最初采用了 JS 动态判断的方案,但被 TL 指出存在性能问题。在这次代码 Review 中,我深刻理解了 SSR 项目中响应式适配的正确姿势。
华仔啊9 小时前
前端·css
写 CSS 用 px?这 3 个单位能让页面自动适配屏幕在网页开发中,CSS 单位是控制元素尺寸、间距和排版的基础。长期以来,px(像素)因其直观、精确而被广泛使用。
菩提小狗10 小时前
前端·css·less
Sqli-Labs Less-3 靶场完整解题流程解析-豆包生成你作为网络安全初学者,希望我详细讲解sqli-labs-master/Less-3靶场的完整解题过程,并且对其中的难点知识点进行拆解、扩展,帮助你理解每一步的原理和逻辑。下面我会从环境准备→注入类型判断→闭合方式分析→信息爆破 一步步讲解,确保每个环节都清晰易懂。
web小白成长日记14 小时前
前端·css·vue.js·react.js
CSS 作用域隔离实战:React、Vue 与 Styled Components 的三种范式在现代前端开发中,组件化已成为构建大型应用的标准实践。然而,CSS 作为一门“全局性”语言,其天然缺乏作用域的概念,常常导致样式冲突、污染和维护困难。为了解决这一问题,主流框架和工具链提供了多种 CSS 作用域隔离方案。本文将通过三个典型示例——React 中的 CSS Modules、Vue 中的 scoped 样式,以及 React 生态中的 Styled Components——深入剖析它们各自的实现原理、使用方式与核心差异,帮助开发者在不同技术栈中做出合理选择。
@@小旭1 天前
前端·javascript·css
实现头部Sticky 粘性布局,并且点击菜单滑动到相应位置摘要:该代码实现了一个带粘性导航栏的页面滚动功能。通过el-button组件绑定点击事件,调用scrollToCity方法实现平滑滚动到对应ID的区块。使用scrollIntoView的smooth参数实现平滑滚动效果,并通过CSS的position:sticky使导航栏固定在顶部。注意事项包括:祖先元素不能设置overflow:hidden,否则会导致粘性布局失效。导航栏设置了z-index确保始终显示在前端。
Irene19911 天前
css
CSS 定位属性(relative、absolute、fixed、sticky)与实用技巧总结本文系统整理了CSS定位的核心属性和应用技巧。主要包含:掌握这些定位技术能有效提升页面布局的灵活性和开发效率,同时兼顾性能和移动端适配需求。
我的写法有点潮1 天前
前端·javascript·css
推荐几个国外比较流行的UI库(上)现在写样式的时候,我基本已经离不开 Tailwind CSS 了。最开始接触它的时候,其实挺不适应的,感觉类名又多又杂,全写在标签上。但真正用顺了之后,反而不太想回到以前那种来回切 CSS 文件的方式。
m0_502724951 天前
前端·css
vue动态设置背景图片后显示异常:style 绑定会覆盖整个 background 复合属性,而 background-size、background-repeat 等是 background 的子属性。
@Autowire1 天前
前端·css
Layout-position你想系统了解 CSS 中 position 属性的所有核心取值、各自的定位规则、适用场景,以及通过实例直观区分不同定位方式的差异,对吧?
神秘的猪头1 天前
css·vue.js·react.js
🎨 CSS 这种“烂大街”的技术,怎么在 React 和 Vue 里玩出花来?—— 模块化 CSS 深度避坑指南💡 写在前面: 作为一个前端老司机,你一定遇到过这种场景:你辛辛苦苦写好了一个精美的按钮样式,结果同事小王合并代码后,你的按钮突然变成了“杀马特”风格。你怒气冲冲地查代码,发现原来是你俩用了同一个类名 .button,而 CSS 这玩意儿默认是全局生效的,谁后加载谁说了算。
3秒一个大1 天前
css·vue.js·react.js
模块化 CSS:解决样式污染的前端工程化方案在前端开发从静态页面走向组件化、工程化的过程中,CSS 作为样式定义的核心语言,其原生特性带来的问题逐渐凸显。模块化 CSS 应运而生,成为解决样式全局污染、适配组件化开发的关键方案。本文将从模块化 CSS 的由来、用法及核心意义三个维度,结合 React 实战案例,深入解读这一前端工程化的重要实践。
kilito_012 天前
javascript·css·css3
数字时钟翻页效果这个翻页时钟(Flip Clock)通过 CSS 3D 变换 + 动画类切换 + DOM 内容动态更新 的方式,模拟了类似机械翻页牌的效果。下面从结构、样式和逻辑三方面详细分析其实现原理:
霍理迪2 天前
前端·css
CSS布局方式——弹性盒子(flex)目录概念:弹性容器元素1、flex-direction: ; 控制主轴的方向2、justify-content: ;控制主轴方向,弹性元素的布局
研☆香2 天前
javascript·css·html
html css js文件开发规范好的,以下是关于HTML、CSS和JavaScript文件开发规范的详细指南:语义化标签代码缩进属性顺序
困惑阿三2 天前
前端·css
CSS 动效交互实验室在现代前端开发中,CSS 动效是提升用户体验(UX)的灵魂。很多初学者容易混淆 transform、transition 和 animation。本文将通过原理剖析和代码实战,带你彻底掌握这“三剑客”。
卡尔特斯2 天前
css
CSS 特殊符号 / 英文导致换行问题速查表适用:以下场景覆盖:不拆单词 / 允许拆单词 / 特殊符号提前换行 等真实业务需求适用:⚠️ 英文会被拆成字母,属于主动选择的行为
Komorebi゛2 天前
前端·css
【CSS】斜角流光样式
Irene19912 天前
前端·css
CSS 废弃属性分类总结本文整理了CSS中已废弃或不推荐的属性,分为完全废弃、部分废弃、浏览器前缀废弃及即将废弃属性,并提供了替代方案。
San30.2 天前
前端·css·vue.js·react.js
告别全局污染:深入解析现代前端的模块化 CSS 演进之路在前端开发的蛮荒时代,CSS(层叠样式表)就像一匹脱缰的野马。它的“层叠”特性既是强大的武器,也是无数 Bug 的根源。每个前端工程师可能都经历过这样的噩梦:当你为了修复一个按钮的样式而修改了 .btn 类,结果却发现隔壁页面的导航栏莫名其妙地崩了。
23级二本计科2 天前
前端·css·html
前端 HTML + CSS + JavaScriptHTML决定网页的框架文本 图片 表单 按钮CSS显示网页中控件的样式外观颜色 大小 间距 排版JS表示处理逻辑